React Event Calendar

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

Selected advanced features of the Pro version:

• Display a large number of columns with a fixed width and access them using a horizontal scrollbar
• Show resources as columns instead of days
• 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

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)

Tutorials

• React Calendar: Rendering JSX in Events

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:

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"}
              ref={component => {
                this.calendar = component && component.control;
              }}
            />
        );
    }
}

export default Calendar;

The DayPilot.Calendar object is now stored in calendar property 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 {
  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={component => {
          this.calendar = component && component.control;
        }}
      />
    );
  }
}

export default Calendar;