react event calendar scheduler component

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

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

react event calendar component configuration

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

react event calendar component week

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

react event calendar component message

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;