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

Readme

Source

react-calendar

Calendars for React.

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:

<Calendar firstMonth={1}                <!-- Base calendar compoment -->
          date={moment("2014-01-01")}
          weekNumbers={true}
          size={12}>
  <Month date={moment()}                <!-- Pass subcomponents to mark -->
         modifiers={{current: true}}/>  <!-- current month and day -->
  <Day date={moment()}
       modifiers={{current: true}} />
</Calendar>

Each component can be used separately AND passed to other components to modify rendering.

<Month date={moment()} />

Styling

There is no style by default, but an example theme using bootstrap is included in less/bootstrap-theme.less.

Keywords

FAQs

What is react-calendar?

Is react-calendar well maintained?

Package last updated on 30 Sep 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install