https://github.com/imranolas/react-calendar
A React Native inspired date list renderer
https://github.com/imranolas/react-calendar
calendar component datepicker datetime react
Last synced: 7 days ago
JSON representation
A React Native inspired date list renderer
- Host: GitHub
- URL: https://github.com/imranolas/react-calendar
- Owner: imranolas
- Created: 2017-12-04T08:37:08.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:36:35.000Z (about 3 years ago)
- Last Synced: 2025-11-27T09:43:54.409Z (about 2 months ago)
- Topics: calendar, component, datepicker, datetime, react
- Language: JavaScript
- Homepage: https://imranolas.github.io/react-calendar
- Size: 1.08 MB
- Stars: 29
- Watchers: 1
- Forks: 5
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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`
```jsx
{
return (
{date.getDate()}
);
}}
renderSection={({ key, values, children }) => {children}}
/>;
```
## Props
| Props | Description |
| :----------------- | :------------------------------------------------------------------------------------------------------------------------------------- |
| `activeRange` | A `Date` within the active range |
| `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`. |