0.1.2 • Published 6 years ago
react-calendar-listview v0.1.2
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. |