DayPilot Lite for React

DayPilot Lite for JavaScript is a library of JavaScript/HTML5 scheduling components that can display calendar/scheduler UI:
* day, week, month
* resource calendar (resources as columns)
* horizontal timeline (resources as rows)
* custom number of days as columns

This is the DayPilot Lite for React package.

What's New

Release History

UI Builder

Customize the scheduling components using an online UI Builder application and download a ready-to-run React project.

Online Demo



Online Demo

Features

* Calendar/scheduler views: day, week, work week, month, resource calendar
* Horizontal timeline view
* Event creation using drag and drop
* Drag and drop event moving and resizing
* Integrated delete icon
* Rendering JSX in Scheduler events
* Rendering JSX in Scheduler grid cells
* Event duration bar with customizable color
* Date picker with free/busy days highlighting, free-hand range selection, day cell customization
* CSS themes (use theme builder to create your own theme)
* Event customization (text, HTML, colors, icons...)
* Cell customization (background, images, text, HTML...)
* Column header customization (background, images, text, HTML...)
* Built-in XSS protection
* Localization support
* Calendar RTL support
* TypeScript definitions

Tutorials

$3

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.

$3


React Weekly Calendar Tutorial (Open-Source)
React application that displays a weekly event calendar using an open-source DayPilot React calendar component. Includes a date picker for changing the visible week. The calendar/scheduler appearance is customized using CSS.

*

$3


React Resource Calendar with Editable Columns (Open-Source)
How to use the open-source React resource calendar component to create a scheduling application for multiple groups of resources (locations, people, tools). Add a date picker and next/previous buttons that let users change the visible date.

*

$3


React Calendar with Day/Week/Month Views (Open-Source)
This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

*

$3


React Monthly Calendar (Open-Source)
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.

*

$3


Next.js Calendar with Day/Week/Month Views (Open-Source)
How to create an integrated day, week, and month calendar view with a shared data source in Next.js.

*

$3


Next.js Resource-Scheduling Calendar (Open-Source)
This Next.js app uses a resource-scheduling calendar UI to let you manage tasks for multiple resources side by side. Each column displays a 24-hour timeline for a different resource.

*

$3


Next.js Weekly Calendar Tutorial (Open-Source)
How to create a weekly calendar web application using a Next.js project with JavaScript source code for download.

*

$3


Next.js Monthly Calendar Tutorial (Open-Source)
Learn how to build a customized monthly calendar UI in Next.js 15 using the open-source DayPilot scheduling library.

*

$3


React Calendar with Date Picker (Open-Source)
How to use a popup date picker to select a date displayed by the React Calendar component.

*

$3


React Scheduler: TypeScript Project (Open-Source)
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

*

$3


React Scheduler: Next/Previous Buttons (Open-Source)
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

*

$3


React Scheduler: Rendering JSX in Events (Open-Source)
How to render custom JSX in events displayed by the React Scheduler component.

*

$3


React JSX Components in Scheduler Grid Cells (Open-Source)
How to render custom React JSX component in the Scheduler grid cells.


*

Example

``javascript
import React, { useState, useEffect } from 'react';
import { DayPilot, DayPilotCalendar } from "@daypilot/daypilot-lite-react";

function Calendar() {
const [calendar, setCalendar] = useState(null);
const [events, setEvents] = useState([]);

useEffect(() => {
setEvents([
{
id: 1,
text: "Event 1",
start: "2026-09-07T10:30:00",
end: "2026-09-07T13:00:00"
},
{
id: 2,
text: "Event 2",
start: "2026-09-08T09:30:00",
end: "2026-09-08T11:30:00",
barColor: "#6aa84f"
},
]);
}, []);

const onEventClick = async args => {
if (!calendar) return; // Ensure calendar is set

const modal = await DayPilot.Modal.prompt("Update event text:", args.e.text());
if (!modal.result) { return; }
const e = args.e;
e.data.text = modal.result;
calendar.events.update(e);
};

return (
viewType={"Week"}
startDate={"2026-09-07"}
timeRangeSelectedHandling={"Enabled"}
events={events}
onEventClick={onEventClick}
controlRef={setCalendar}
/>
);
}

export default Calendar;
``

Documentation

* React scheduler with horizontal timeline
* React weekly calendar
* React monthly calendar
* React date picker

CSS Themes

The Theme Designer lets you create and download your own CSS theme using an online visual tool.

License

Apache License 2.0