React Monthly Calendar

Tutorials

React Monthly Calendar Tutorial

React application that displays a monthly event calendar. Calendar events use custom background to show event type. A context menu allows deleting events and changing color.

React Calendar with Day/Week/Month Views (Open-Source)

How to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

Next.js Monthly Calendar (Open-Source)

Learn how to build a customized monthly calendar UI in Next.js 15 using the open-source DayPilot scheduling library.

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 from 'react';
import { DayPilotMonth } from "@daypilot/daypilot-lite-react";

const Month = () => {
  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 from 'react';
import { DayPilot, DayPilotMonth } from "@daypilot/daypilot-lite-react";

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

export default Month;

How to change the monthly calendar configuration dynamically in React?

If you need to change the monthly calendar properties on the fly, you can point the attributes to state variables:

import React, { useState } from 'react';
import { DayPilot, DayPilotMonth } from "@daypilot/daypilot-lite-react";

const Month = () => {
  const [startDate, setStartDate] = useState(DayPilot.Date.today());

  return (
    <DayPilotMonth
      startDate={startDate}
    />
  );
};

export default Month;

How to access the monthly calendar methods?

In order to access the monthly calendar methods in React, you need to get a reference to DayPilot.Month object first. You can store the reference using the controlRef attribute. This example saves a reference to the DayPilotMonth React component to the calendar state variable.

import React, { useState } from 'react';
import { DayPilot, DayPilotMonth } from "@daypilot/daypilot-lite-react";

const Month = () => {
  const [startDate, setStartDate] = useState(DayPilot.Date.today());
  const [calendar, setCalendar] = useState();

  return (
    <DayPilotMonth
      startDate={startDate}
      controlRef={setCalendar}
    />
  );
};

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, { useState, useEffect } from 'react';
import { DayPilot, DayPilotMonth } from "@daypilot/daypilot-lite-react";

const Month = () => {
  const [startDate, setStartDate] = useState(DayPilot.Date.today());
  const [calendar, setCalendar] = useState();
  const [events, setEvents] = useState([]);

  useEffect(() => {
    const data = [
      {
        id: 1,
        text: "Event 1",
        start: "2025-11-08",
        end: "2025-11-09"
      },
      {
        id: 2,
        text: "Event 2",
        start: "2025-11-09",
        end: "2025-11-10"
      },
    ];

    setEvents(data);
  }, []);

  return (
    <DayPilotMonth
      startDate={startDate}
      events={events}
      controlRef={setCalendar}
    />
  );
};

export default Month;

This example shows how to load the 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, { useState, useEffect } from 'react';
import { DayPilot, DayPilotMonth } from "@daypilot/daypilot-lite-react";

const Month = () => {
  const [startDate, setStartDate] = useState(DayPilot.Date.today());
  const [calendar, setCalendar] = useState();
  const [events, setEvents] = useState([]);

  useEffect(() => {
    const start = calendar?.visibleStart();
    const end = calendar?.visibleEnd();
    const {data} = await DayPilot.Http.get(`/api/Events?start=${start}&end=${end}`);
    setEvents(data);
  }, []);

  return (
    <DayPilotMonth
      startDate={startDate}
      events={events}
      controlRef={setCalendar}
    />
  );
};

export default Month;