https://github.com/antonniklasson/react-dategrid
A minimal foundation for building calendars with React
https://github.com/antonniklasson/react-dategrid
calendar react render-props
Last synced: 9 months ago
JSON representation
A minimal foundation for building calendars with React
- Host: GitHub
- URL: https://github.com/antonniklasson/react-dategrid
- Owner: AntonNiklasson
- Created: 2018-04-08T10:16:33.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-18T14:50:59.000Z (about 8 years ago)
- Last Synced: 2025-10-05T21:55:23.625Z (9 months ago)
- Topics: calendar, react, render-props
- Language: JavaScript
- Homepage:
- Size: 233 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# React Dategrid 📅
A calendar component based on [render props](https://reactjs.org/docs/render-props.html).
The approach is to _make as few decisions as possible_. The only markup it renders is the structure for the underlying table, everything else is up to the consumer. It has no knowledge of something like a _selected date_ or how do style past dates. Implement that kind of behaviour in `renderDay`. The only thing it really needs is a moment instance to base its view on.
## Install
```
npm install --save react-dategrid
yarn add react-dategrid
```
## Usage
Each `day` is a moment instance. The `view` is what is currently shown by the component, also represented by a moment instance.
```javascript
import Dategrid from 'react-dategrid';
class Datepicker extends React.Component {
state = {
view: moment()
}
renderTitle = (view) => {
return {view.format('MMMM YYYY')};
}
renderWeekday = (index) => {
const weekday = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'][index];
return
{weekday} }
renderDay = (day, view) => {
if (moment().isSame(day, "day")) {
return (
{day.date()}
);
}
return
{day.date()};
}
render() {
return (
);
}
}
```
## Props
### view
The current view to render.
### onViewChange(updatedView)
Called as the view updates.
### renderTitle(view)
Receives the current view instance. This will be placed between the navigations with a colspan fixed to 5.
### renderPreviousNavigation(props)
Receives props to be spread on the interactive navigation element.
### renderNextNavigation(props)
Receives props to be spread on the interactive navigation element.
### renderDay(day, view)
Receives a specific day as a moment instance together with the current view. This will be rendered into a ``.