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
• 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

• 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 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;