React Calendar is a UI component that lets you add calendar and scheduling functionality to your React application.
- Create daily or weekly calendar views
- Display a custom number of days as columns in the calendar
- Customize the appearance using CSS
- Create, move and resize events using drag and drop
- Delete events using a built-in icon
- Easily switch the visible date using a React date picker component
- Define your own business hours
- Translate the calendar automatically by setting a custom locale
- Show resources as columns instead of days
Selected advanced features of the Pro version:
- Display a large number of columns with a fixed width and access them using a horizontal scrollbar
- Group resource headers in a hierarchy of columns
- Display large event data sets - events are rendered progressively as users scroll
- Allow overnight schedules (set custom start and end hour for the vertical axis)
- Export the calendar as image (JPG, PNG, BMP) or document (PDF)
- Use the calendar on mobile devices with touch support
- The calendar can display all-day events in a special column header row
For a timeline view with date/time on the horizontal axis and resources on the vertical axis, see the React Scheduler component.
Open-Source Tutorials
- React Weekly Calendar Tutorial (Open-Source)
A React project with week view calendar, drag and drop support, custom event CSS, and a date picker. - React Resource Calendar with Editable Columns (Open-Source)
How to use the React calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). The resources are displayed as columns.
Tutorials
See all React Calendar and Scheduler Tutorials.
React Calendar Package
DayPilot Lite (Open-Source)
The open-source version of the React Calendar component is available in DayPilot Lite for React (@daypilot/daypilot-lite-react).
npm install @daypilot/daypilot-lite-react
DayPilot Pro
You can get the daypilot-pro-react module at npm.daypilot.org:
NPM
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2021.4.5165.tar.gz
Yarn
yarn add https://npm.daypilot.org/daypilot-pro-react/trial/2021.4.5165.tar.gz
React Event Calendar Component
The React event calendar component is available using <DayPilotCalendar> tag:
import React, {Component} from 'react'; // DayPilot Lite import {DayPilotCalendar} from "@daypilot/daypilot-lite-react"; // DayPilot Pro import {DayPilotCalendar} from "daypilot-pro-react"; class Calendar extends Component { render() { return ( <DayPilotCalendar /> ); } } export default Calendar;
React Calendar Configuration
You can use all standard DayPilot.Calendar properties and events with the React calendar component:
import React, {Component} from 'react'; // DayPilot Lite import {DayPilotCalendar} from "@daypilot/daypilot-lite-react"; // DayPilot Pro import {DayPilotCalendar} from "daypilot-pro-react"; class Calendar extends Component { render() { return ( <DayPilotCalendar viewType="Week" /> ); } } export default Calendar;
Accessing DayPilot.Calendar Object
In order to invoke the calendar component methods, it's necessary to get a DayPilot.Calendar object reference using ref attribute:
import React, {Component} from 'react'; // DayPilot Lite import {DayPilotCalendar} from "@daypilot/daypilot-lite-react"; // DayPilot Pro import {DayPilotCalendar} from "daypilot-pro-react"; class Calendar extends Component { constructor(props) { super(props); this.calendarRef = React.createRef(); } get calendar() { return this.calendarRef.current.control; } render() { return ( <DayPilotCalendar viewType={"Week"} ref={this.calendarRef} /> ); } } export default Calendar;
The DayPilot.Calendar object is now accessible using the calendar getter of the Calendar class. You can use it to invoke the DayPilot.Calendar class methods:
import React, {Component} from 'react'; // DayPilot Pro import {DayPilotCalendar} from "daypilot-pro-react"; class Calendar extends Component { constructor(props) { super(props); this.calendarRef = React.createRef(); } get calendar() { return this.calendarRef.current.control; } render() { return ( <DayPilotCalendar viewType={"Week"} onTimeRangeSelected={args => { this.calendar.message("Selected range: " + args.start.toString("hh:mm tt") + " - " + args.end.toString("hh:mm tt")); }} ref={this.calendarRef} /> ); } } export default Calendar;