# DayPilot Lite for React

[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) 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](https://javascript.daypilot.org/daypilot-lite-history/)

## UI Builder

Customize the scheduling components using an online [UI Builder](https://builder.daypilot.org/) application and **download** a ready-to-run React project.

## Online Demo

[![JavaScript Scheduler Demo](https://static.daypilot.org/npm/202512/react-scheduler-timeline-open-source.png)](https://javascript.daypilot.org/demo/lite/scheduler/)

[![JavaScript Event Calendar Demo](https://static.daypilot.org/npm/202512/react-html5-calendar-drag-drop-open-source.png)](https://javascript.daypilot.org/demo/lite/calendar/)

[Online Demo](https://javascript.daypilot.org/demo/lite/)

## 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

### React Scheduler with Horizontal Timeline

[![React Scheduler with Horizontal Timeline](https://static.daypilot.org/npm/202507/react-scheduler-with-horizontal-timeline-open-source-tutorial.png)](https://code.daypilot.org/79813/react-scheduler-with-horizontal-timeline-open-source)
[React Scheduler with Horizontal Timeline (Open-Source)](https://code.daypilot.org/79813/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.

### React Weekly Calendar Tutorial

[![React Weekly Calendar](https://static.daypilot.org/npm/202308/react-weekly-calendar-component-open-source.png)](https://code.daypilot.org/42221/react-weekly-calendar-tutorial)

[React Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/42221/react-weekly-calendar-tutorial)  
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.

***

### React Resource Calendar with Editable Columns

[![React Resource Calendar](https://static.daypilot.org/npm/202411/react-resource-calendar-witih-editable-columns.png)](https://code.daypilot.org/62447/react-resource-calendar-open-source)

[React Resource Calendar with Editable Columns (Open-Source)](https://code.daypilot.org/62447/react-resource-calendar-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.

***

### React Calendar with Day/Week/Month Views

[![React Calendar with Day/Week/Month Views](https://static.daypilot.org/npm/202406/react-calendar-with-day-week-month-views-open-source.png)](https://code.daypilot.org/27556/react-day-week-month-calendar)

[React Calendar with Day/Week/Month Views (Open-Source)](https://code.daypilot.org/27556/react-day-week-month-calendar)  
This tutorial shows how to create a complex calendar component that displays integrated daily, weekly and monthly calendars in React.

***

### React Monthly Calendar

[![React Monthly Calendar](https://static.daypilot.org/npm/202406/react-monthly-calendar-open-source.png)](https://code.daypilot.org/26289/react-monthly-calendar-tutorial)

[React Monthly Calendar (Open-Source)](https://code.daypilot.org/26289/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.

***

### Next.js Calendar with Day/Week/Month Views
[![Next.js Calendar with Day/Week/Month Views](https://static.daypilot.org/npm/202505/next.js-calendar-with-day-week-month-views-open-source.png)](https://code.daypilot.org/62886/next-js-calendar-day-week-month-open-source)

[Next.js Calendar with Day/Week/Month Views (Open-Source)](https://code.daypilot.org/62886/next-js-calendar-day-week-month-open-source)  
How to create an integrated day, week, and month calendar view with a shared data source in Next.js.

***

### Next.js Resource-Scheduling Calendar
[![Next.js Resource-Scheduling Calendar](https://static.daypilot.org/npm/202505/next.js-resource-scheduling-calendar-open-source.png)](https://code.daypilot.org/13080/next-js-resource-scheduling-calendar-open-source)

[Next.js Resource-Scheduling Calendar (Open-Source)](https://code.daypilot.org/13080/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.

***

### Next.js Weekly Calendar Tutorial

[![Next.js Weekly Calendar](https://static.daypilot.org/npm/202403/next.js-weekly-calendar-open-source.png)](https://code.daypilot.org/45330/next-js-weekly-calendar-open-source)

[Next.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/45330/next-js-weekly-calendar-open-source)  
How to create a weekly calendar web application using a Next.js project with JavaScript source code for download.

***

### Next.js Monthly Calendar Tutorial

[![Next.js Monthly Calendar](https://static.daypilot.org/npm/202411/next.js-monthly-calendar-component-open-source.png)](https://code.daypilot.org/37709/next-js-monthly-calendar-open-source)

[Next.js Monthly Calendar Tutorial (Open-Source)](https://code.daypilot.org/37709/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 Calendar with Date Picker

[![React Calendar with Date Picker](https://static.daypilot.org/npm/202207/react-calendar-with-date-picker.png)](https://code.daypilot.org/10750/react-calendar-with-date-picker-open-source)

[React Calendar with Date Picker (Open-Source)](https://code.daypilot.org/10750/react-calendar-with-date-picker-open-source)  
How to use a popup date picker to select a date displayed by the React Calendar component.

***

### React Scheduler: TypeScript Project

[![React Scheduler: TypeScript Project](https://static.daypilot.org/npm/202510/react-scheduler-typescript-project.png)](https://code.daypilot.org/34946/react-scheduler-typescript-project)

[React Scheduler: TypeScript Project (Open-Source)](https://code.daypilot.org/34946/react-scheduler-typescript-project)  
This tutorial shows how to use the React Scheduler component to create a reservation application in React, using TypeScript language.

***

### React Scheduler: Next/Previous Buttons

[![React Scheduler: Next/Previous Buttons](https://static.daypilot.org/npm/202510/react-scheduler-and-next-previous-buttons.png)](https://code.daypilot.org/64293/react-scheduler-next-previous-buttons)

[React Scheduler: Next/Previous Buttons (Open-Source)](https://code.daypilot.org/64293/react-scheduler-next-previous-buttons)  
Add "next" and "previous" buttons to your React application and let users switch the month displayed by the Scheduler component.

***

### React Scheduler: Rendering JSX in Events

[![React Scheduler: Rendering JSX in Events](https://static.daypilot.org/npm/202510/react-scheduler-jsx-in-events.png)](https://code.daypilot.org/50584/react-scheduler-rendering-jsx-in-events)

[React Scheduler: Rendering JSX in Events (Open-Source)](https://code.daypilot.org/50584/react-scheduler-rendering-jsx-in-events)  
How to render custom JSX in events displayed by the React Scheduler component.

***

### React JSX Components in Scheduler Grid Cells

[![React JSX Components in Scheduler Grid Cells](https://static.daypilot.org/npm/202510/react-scheduler-jsx-in-grid-cells.png)](https://code.daypilot.org/43458/react-jsx-components-in-scheduler-grid-cells)

[React JSX Components in Scheduler Grid Cells (Open-Source)](https://code.daypilot.org/43458/react-jsx-components-in-scheduler-grid-cells)  
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 (
        <DayPilotCalendar
            viewType={"Week"}
            startDate={"2026-09-07"}
            timeRangeSelectedHandling={"Enabled"}
            events={events}
            onEventClick={onEventClick}
            controlRef={setCalendar}
        />
    );
}

export default Calendar;
```

## Documentation

* [React scheduler with horizontal timeline](https://doc.daypilot.org/scheduler/react/)
* [React weekly calendar](https://doc.daypilot.org/calendar/react/)
* [React monthly calendar](https://doc.daypilot.org/month/react/)
* [React date picker](https://doc.daypilot.org/navigator/react/)

## CSS Themes

The [Theme Designer](https://themes.daypilot.org/) lets you create and download your own CSS theme using an online visual tool.

## License

Apache License 2.0