react-calendar alternatives and similar libraries
Based on the "Date / Time picker" category.
Alternatively, view react-calendar alternatives based on common mentions on social networks and blogs.
-
-
-
react-day-picker
DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications. -
react-infinite-calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more. -
-
-
-
react-bootstrap-daterangepicker
A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project. -
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
Do you think we are missing an alternative of react-calendar or a related project?
README
react-calendar
Calendars for React v15.
Not just calendar component, but a modular toolkit for building everything related to calendars in React, such as Datepickers.
In early alpha stage, documentation and features will arrive.
Example
npm install
npm run
One year calendar (Demo):
<Calendar startDate={ moment() }
endDate={ moment().endOf('year') } <!-- Base calendar component -->
weekNumbers={true}
size={12}
mods={
[ <!-- Pass modifier objects to change rendering -->
{
date: moment(),
classNames: [ 'current' ],
component: [ 'day', 'month', 'week' ] <!-- This shows the current day, week, and month. -->
}
]
}
/>
Each component can be used separately AND passed to other components to modify
rendering. We have deprecated this in favor of passing a more flexible modifier object.
<Month date={moment()} />
If a modifier is passed without date it modifies all components of this type in the tree. Useful, for example, for passing callbacks.
<Calendar firstMonth={1}
date={moment("2014-01-01")}
weekNumbers={true}
size={12}
startDate={ moment() }
endDate={ moment().endOf('year') } <!-- Base calendar compoment -->
weekNumbers={true}
size={12}
mods={
[
{
component: [ 'day' ],
events: {
onClick: (date) => alert(date)
}
}
]
} />
Events
All mouse and touch events are supported on all components with react style onCamelCase props (eg. onClick). Event handlers receives two arguments - date in moment.js format and the original react event.
Styling
There is no style by default, but an example theme using bootstrap is included in less/bootstrap-theme.less.
react-calendar uses SuitCSS style (a variant of BEM) to make default class hierarchy,
if you want to add a class that is separate from that hierarchy just pass classes
prop to any component. classes is an object with keys as class names and values as
boolean-like values (this will be probably changed to just passing array of classes in
future API). If you want to add SuitCSS modifier classes (eg rc-Day--current),
pass similar object via modifiers prop (again this will probably become an array
in next version of API).
For example:
<Day date={moment()} mods={[{bar: true}]} />
will yield the following classes: "rc-Day rc-Day--bar".
TODO
- [ ] Merging of modifiers and classe
- [ ] Docs
- [ ] Calendar should be able to page
- [ ] A component for Year - Calendar is supposed to be a 'controller' component for pageable stuff
- [ ] A component that is on lower level that Day - for events.
- [x]
Utils to create range of components for modifying multiple components easier - [ ] An example datepicker component using react-calendar
- [x]
Basic unit tests - [ ] More Tests!