What is react-calendar?
react-calendar is a flexible and customizable calendar component for React applications. It allows developers to easily integrate a calendar into their projects, providing functionalities such as date selection, navigation between months and years, and customization of calendar appearance.
What are react-calendar's main functionalities?
Basic Calendar
This is the most basic usage of the react-calendar package, rendering a simple calendar component.
<Calendar />
Date Selection
Allows users to select a date. The selected date is managed via state in the parent component.
<Calendar onChange={setDate} value={date} />
Range Selection
Enables users to select a range of dates. The selected range is managed via state in the parent component.
<Calendar selectRange={true} onChange={setDateRange} value={dateRange} />
Custom Tile Content
Allows customization of the content of each tile in the calendar. In this example, a 'Special' label is added to Sundays.
<Calendar tileContent={({ date, view }) => view === 'month' && date.getDay() === 0 ? <p>Special</p> : null} />
Navigation Between Views
Allows setting the default view of the calendar to 'year', 'month', 'decade', or 'century'.
<Calendar defaultView='year' />
Other packages similar to react-calendar
react-datepicker
react-datepicker is a popular date picker component for React. It offers a wide range of features including date and time selection, range selection, and localization support. Compared to react-calendar, react-datepicker provides more advanced date and time picking functionalities but may require more configuration for basic calendar views.
react-big-calendar
react-big-calendar is a powerful calendar component for React that supports events, drag-and-drop, and customizable views. It is more feature-rich compared to react-calendar, making it suitable for applications that require complex scheduling and event management.
fullcalendar-react
fullcalendar-react is a React wrapper for FullCalendar, a highly customizable and feature-rich calendar library. It supports a wide range of views, event management, and customization options. It is more comprehensive than react-calendar, making it ideal for applications that need extensive calendar functionalities.
react-calendar
Calendars for React 0.14.3.
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 compoment -->
weekNumbers={true}
size={12}
mods={
[
{
date: moment(),
classNames: [ 'current' ],
component: [ 'day', 'month', 'week' ]
}
]
}
/>
Each component can be used separately AND passed to other components to modify
rendering.
<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.
- Utils to create range of components for modifying multiple components easier
- An example datepicker component using react-calendar
- Tests