React Scheduler Component

Open-Source Tutorials

• React Scheduler with Horizontal Timeline (Open-Source)
  A lightweight, open-source React Scheduler component with a horizontal timeline, drag-and-drop support, customizable appearance, and smooth performance for large data sets.

Tutorials

• React Scheduler Tutorial
  Introduction to using the React Scheduler component in your application

• React Shift Scheduling Application (PHP/MySQL Backend)
  React application for planning employee shifts at multiple locations.

• React Activity Planning System (Node, Express, PostgreSQL)
  An application for scheduling activities for different departments. It uses the React Scheduler component to display tasks and milestones.

• React Work Order Planning System (PHP/MySQL)
  An application that lets you assign tasks to employees. Includes a React queue component that displays a list of tasks that were not scheduled yet.

• Using React Scheduler with TypeScript
  A sample React project that uses the Scheduler component in TypeScript.

• React Scheduler: Rendering JSX Components in Row Header
  How to render custom JSX content in Scheduler row headers.

• React Scheduler: Rendering JSX Components in Callout (Bubble)
  How to display custom JSX content in hover callouts.

• React Scheduler: External Drag and Drop
  How to activate external items so they can be dragged to the Scheduler as events.

• React Scheduler: Full Screen Layout
  Configure the React Scheduler component to fill the available screen space.

• React Scheduler: How to Display Slot Details using Background Events
  Move selected events to the background and use them to display detailed information about a date range.

• React Scheduler: How to Search Events
  How to search React Scheduler events, highlight the search text and jump between results using "Next" and "Previous" buttons.

• React: Milestone Scheduler
  The React Scheduler can display milestones in addition to standard events or tasks. You can use custom shapes, icons, colors and connect the milestones using links.

• Next.js Scheduler Tutorial
  How to use the React Scheduler in a Next.js application.

What features are available?

To see all the features please see:

• Scheduler documentation: The documentation includes detailed description of all the features.

• Live demos: The demos are built using the pure JavaScript version of the Scheduler but all the features are also available in the React version.

How to install the React Scheduler component?

DayPilot Lite (Open-Source)

The open-source version of the React Scheduler 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 install https://npm.daypilot.org/daypilot-pro-react/trial/2025.3.6519.tar.gz

This package is a part DayPilot Pro for JavaScript, a library of advanced scheduling components for web applications.

How to add the React Scheduler component to your application?

You can use the Scheduler component by simply including <DayPilotScheduler> tag in your JSX.

DayPilot Lite (Open-Source)

import React from 'react';
import {DayPilotCalendar} from "@daypilot/daypilot-lite-react";

const Scheduler = () => {
    return (
        <DayPilotScheduler />
    );
}

export default Scheduler;

DayPilot Pro

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

const Scheduler = () => {
    return (
        <DayPilotScheduler />
    );
}

export default Scheduler;

How to configure the React Scheduler?

The React Scheduler allows you to customize the appearance and behavior using configuration properties. All properties that are mentioned in the Scheduler JavaScript API reference are available in React as well.

You can specify the properties directly using <DayPilotScheduler> attributes:

import React from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

const Scheduler = () => {
    return (
        <div>
            <DayPilotScheduler
                startDate={"2024-12-01"}
                days={31}
                scale={"Day"}
                timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
                resources={[
                    {name: "Resource 1", id: "R1"},
                    {name: "Resource 2", id: "R2"},
                    {name: "Resource 3", id: "R3"},
                ]}
            />
        </div>
    );
}

export default Scheduler;

You can also load the properties from the state object using destructuring assignment:

import React, { useState } from 'react';
import {DayPilotScheduler} from "daypilot-pro-react";

const Scheduler = () => {
    const [config, setConfig] = useState({
        startDate: "2024-12-01",
        days: 31,
        scale: "Day",
        timeHeaders: [
            { groupBy: "Month" },
            { groupBy: "Day", format: "d" }
        ],
        resources: [
            { name: "Resource 1", id: "R1" },
            { name: "Resource 2", id: "R2" },
            { name: "Resource 3", id: "R3" },
        ]
    });

    return (
        <div>
            <DayPilotScheduler {...config} />
        </div>
    );
}

export default Scheduler;

How to access the DayPilot.Scheduler API?

In addition to automatic change detection available in React you can also use the direct API methods to control the React Scheduler behavior.

In order to get access to the methods, you need a reference to DayPilot.Scheduler object. The Scheduler object is accessible using control property of the DayPilotScheduler React component class.

The following example stores the DayPilot.Scheduler object as this.scheduler property of the Scheduler component:

import React, { useState } from 'react';
import { DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const [scheduler, setScheduler] = useState();

    return (
        <div>
            <DayPilotScheduler
                controlRef={setScheduler}
            />
        </div>
    );
}

export default Scheduler;

Now you can invoke the Scheduler methods directly. This example displays a "Welcome!" message using the message() method of the Scheduler when you click the button:

import React, { useState } from 'react';
import { DayPilotScheduler } from "daypilot-pro-react";

const Scheduler = () => {
    const [scheduler, setScheduler] = useState();

    return (
        <div>
            <button onClick={e => scheduler?.message('Welcome!')}>Welcome</button>
            <DayPilotScheduler
                controlRef={setScheduler}
            />
        </div>
    );
}

export default Scheduler;