react-calendar-listview

react-calendar

A React Native inspired date list renderer

What is this?

A convenient platform agnostic component for rendering lists of dates for any purpose. You could use this to build your own date picker, calendar, day planner or basically anything that requires a sequenced list of dates.

There's just one component which leverages the fashionable render props pattern. It looks and behaves a lot like a React Native ListView.

Usage

yarn add react-calendar-listview

<Calendar
  range="month"
  interval="day"
  pad="week"
  sectionBy={getWeek}
  renderItem={({ date, withinPeriod }) => {
    return (
      <Day key={date} withinPeriod={withinPeriod}>
        {date.getDate()}
      </Day>
    );
  }}
  renderSection={({ key, values, children }) => <Week key={key}>{children}</Week>}
/>;

Props

Props	Description
range	The range of dates in the sequence
interval	The interval between each date in the sequence
pad (optional)	The padding applied to the range. Useful when rendering a month of dates padded to the start and end of the week
renderItem	A render prop function that accepts date props for an individual date in the sequence. Render whatever you want here.
sectionBy	A function that accepts each date and returns a key to group dates by. Useful for grouping date groups together for styling or layout.
renderSection	Required if using sectionBy. A render prop function that accepts section key, values, and renderItem children.