@daypilot/daypilot-lite-react
Version:
DayPilot Lite for React
199 lines (132 loc) • 9.01 kB
Markdown
# 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
[](https://javascript.daypilot.org/demo/lite/scheduler/)
[](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
* 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
* TypeScript definitions
## Tutorials
### React Scheduler with Horizontal Timeline
[](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
[](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
[](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
[](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
[](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
[](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
[](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
[](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
[](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
[](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.
## 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: "2025-09-07T10:30:00",
end: "2025-09-07T13:00:00"
},
{
id: 2,
text: "Event 2",
start: "2025-09-08T09:30:00",
end: "2025-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={"2025-09-07"}
timeRangeSelectedHandling={"Enabled"}
events={events}
onEventClick={onEventClick}
controlRef={setCalendar}
/>
);
}
export default Calendar;
```
## Documentation
* [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