react-scroll-calendar v1.0.0
React Scroll Calendar
A simple and reusable Scrollable-Calendar component for React (Demo)
Features
- Scroll – Just keep scrolling', just keep scrollin'
- Flexible – Min/max date and selcted date.
- Customizeable – Customize and theme to your heart's content.
- Events and callbacks – onSelect.
- Mobile-friendly – Silky smooth scrolling on mobile
Getting Started
Using npm:
npm install react-scroll-calendar --saveUsage
Basic Example
import React, { Component } from 'react';
import MobileCalendar from 'react-scroll-calendar';
import moment from 'moment';
import "react-scroll-calendar/build/react-scroll-calendar.css"; // only needs to be imported once
// Render the Calendar
render(
<MobileCalendar
minDate={moment('2019-01-14', 'YYYY-MM-DD')}
selectedDate={moment('2019-01-23', 'YYYY-MM-DD')}
maxDate={moment('2019-10-14', 'YYYY-MM-DD')}
/>,
document.getElementById('root')
);Prop Types
| Property | Type | Default | Description |
|---|---|---|---|
| minDate | moment | moment().add(1, 'd') | The minimum date that is selectable. |
| maxDate | moment | moment().add(9, 'M') | The maximum date that is selectable. |
| selectedDate | moment | null | The selected date of the calendar. |
| className | String | null | Optional CSS class name to append to the root element. |
| onSelect | Function | Callback invoked after select() returns the current selected. | |
| monthFormat | String | MMMM | Label format for the month tile. |
| yearFormat | String | YYYY | Label format for the year tile. |
| enableYearTitle | Boolean | true | Option to enable / disable the year in header. |
| enableMonthTitle | Boolean | true | Option to enable / disable the month in header. |
Compatibility
React
We're always trying to stay compatible with the latest version of React.
Moment.js
Currently we are using Moment.js. In future we will switch to native Date objects to reduce the size of the package. Please see the example for moment.js.
Browser Support
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
Reporting Issues
If you find an issue, please report it along with any relevant details to reproduce it. The easiest way to do so is to fork this sandbox on CodeSandbox.
License
react-scroll-calendar is available under the MIT License.