React Monthly Calendar

Tutorials

• React Monthly Calendar Tutorial

React Monthly Calendar Editions

DayPilot Lite (Open-Source)

The DayPilot Lite for React package is available at @daypilot/daypilot-lite-react.

npm install @daypilot/daypilot-lite-react

DayPilot Pro

The monthly calendar component is included in DayPilot Pro for JavaScript.

You can install the daypilot-pro-vue package using a link from npm.daypilot.org.

Monthly Calendar Configurator

Instead of configuring the monthly component manually, you can also use the online Monthly Calendar UI Builder configurator. It lets you set the monthly calendar component properties and generate a new React project with all required dependencies.

How to add the React monthly calendar component to your application?

Insert the <DayPilotMonth> tag into your JSX page:

import React, {Component} from 'react';
import {DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {

  render() {
    return (
        <DayPilotMonth />
    );
  }
}

export default Month;

How to configure the React monthly calendar?

You can specify the monthly calendar properties using attributes of the <DayPilotMonth> tag:

import React, {Component} from 'react';
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {

  render() {
    return (
        <DayPilotMonth
          startDate={DayPilot.Date.today()}
        />
    );
  }
}

export default Month;

How to load configuration from a React state object?

If you need to change the monthly calendar properties on the fly it's necessary to load the properties from the state object. You can load all properties at once using destructuring assignment.

import React, {Component} from 'react';
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: DayPilot.Date.today()
    };
  }

  render() {
    return (
        <DayPilotMonth
          {...this.state}
        />
    );
  }
}

export default Month;

How to access the monthly calendar methods?

In order to access the monthly calendar methods, you need to get a reference to DayPilot.Month object first. It's available as control property of the DayPilotMonth component. This example saves a reference to the DayPilotMonth React component to calendarRef and exposes the DayPilot.Month object as this.calendar using a special getter.

import React, {Component} from 'react';
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {

  constructor(props) {
    super(props);
    this.calendarRef = React.createRef();
    this.state = {
      startDate: DayPilot.Date.today()
    }
  }

  get calendar() {
    return this.calendarRef.current.control;
  }

  render() {
    return (
      <div>
        <DayPilotMonth
          {...this.state}
          ref={this.calendarRef}
        />
      </div>
    );
  }
}

export default Month;

How to load calendar event data?

This example shows how to load event data using the direct API (using update() method):

import React, {Component} from 'react';
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {

  constructor(props) {
    super(props);
    this.calendarRef = React.createRef();
    this.state = {
      startDate: "2023-11-01"
    };
  }

  get calendar() {
    return this.calendarRef.current.control;
  }
  
  componentDidMount() {
    const events = [
      {
        id: 1,
        text: "Event 1",
        start: "2023-11-08",
        end: "2023-11-09"
      },
      {
        id: 2,
        text: "Event 2",
        start: "2023-11-09",
        end: "2023-11-10"
      },    
    ];
    this.calendar.update({events});
  }

  render() {
    return (
      <div>
        <DayPilotMonth
          {...this.state}
          ref={this.calendarRef}
        />
      </div>
    );
  }
}

export default Month;

This example shows how to load monthly calendar event data from a remote HTTP endpoint. The built-in DayPilot.Http.get() helper method uses a simple syntax inspired by axios.

import React, {Component} from 'react';
import {DayPilot, DayPilotMonth} from "daypilot-pro-react";

class Month extends Component {

  constructor(props) {
    super(props);
    this.calendarRef = React.createRef();
    this.state = {
      startDate: DayPilot.Date.today()
    };
  }

  get calendar() {
    return this.calendarRef.current.control;
  }
  
  componentDidMount() {
    this.loadEvents();
  }
  
  async loadEvents() {
    const start = this.calendar.visibleStart();
    const end = this.calendar.visibleEnd();
    const {data} = await DayPilot.Http.get(`/api/Events?start=${start}&end=${end}`);
    this.calendar.update({events: data});
  }

  render() {
    return (
      <div>
        <DayPilotMonth
          {...this.state}
          ref={this.calendarRef}
        />
      </div>
    );
  }
}

export default Month;