# DayPilot Lite for JavaScript
[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views.
## 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 JavaScript or TypeScript 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
* Horizontal timeline view
* Display a custom number of days (e.g. 4 days)
* Resource calendar for scheduling multiple resources side by side (rooms, employees, tools, etc.)
* Integrated helper for day/week/month switching (with date picker synchronization)
* Event creation using drag and drop
* Drag and drop event moving and resizing
* Integrated delete icon
* Event duration bar with customizable color
* Context menu
* Built-in modal dialog for editing event details
* Custom icons inside events with extended functionality (context menu, custom event handler)
* 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...)
* Built-in XSS protection
* Localization support
* TypeScript definitions
* [Angular](https://www.npmjs.com/package/@daypilot/daypilot-lite-angular), [React](https://www.npmjs.com/package/@daypilot/daypilot-lite-react), and [Vue](https://www.npmjs.com/package/@daypilot/daypilot-lite-vue) packages available
## Tutorials
### JavaScript Scheduler with Horizontal Timeline
[](https://code.daypilot.org/73425/javascript-scheduler-with-horizontal-timeline-open-source)
[JavaScript Scheduler with Horizontal Timeline (Open-Source)](https://code.daypilot.org/73425/javascript-scheduler-with-horizontal-timeline-open-source)
Use the open-source JavaScript Scheduler to build a horizontal timeline for multiple resources: adjust the appearance, add custom controls, configure the timeline, show a context menu, and switch the visible month.
***
### JavaScript Event Calendar Tutorial
[](https://code.daypilot.org/17910/html5-event-calendar-open-source)
[HTML5/JavaScript Event Calendar (Open-Source)](https://code.daypilot.org/17910/html5-event-calendar-open-source)
Event calendar introduction - week view, loading data, drag and drop, CSS themes, sample PHP REST backend.
***
### JavaScript Resource Calendar Tutorial
[](https://code.daypilot.org/87709/javascript-resource-calendar-tutorial-php-mysql)
[JavaScript Resource Calendar Tutorial - PHP/MySQL (Open-Source)](https://code.daypilot.org/87709/javascript-resource-calendar-tutorial-php-mysql)
The resource calendar displays custom resources (people, rooms, tools) as columns. This tutorial shows how to load resource data from a PHP/MySQL backend and show custom calendar columns.
***
### HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)
[](https://code.daypilot.org/27988/html5-calendar-with-day-week-month-views-javascript-php)
[Open-Source HTML5/JavaScript Calendar with Day/Week/Month Views (PHP, MySQL)](https://code.daypilot.org/27988/html5-calendar-with-day-week-month-views-javascript-php)
HTML5/JavaScript event calendar with day, week, and month views and integrated date navigator. Includes a sample PHP backend with MySQL database.
***
### ASP.NET Core Weekly Calendar
[](https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core)
[ASP.NET Core Weekly Calendar (Open-Source)](https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core)
Simple ASP.NET Core web application that displays event data in a weekly calendar. Uses Entity Framework Core for data access.
***
### ASP.NET Core Monthly Calendar
[](https://code.daypilot.org/95109/html5-monthly-calendar-and-asp-net-core)
[ASP.NET Core Monthly Calendar (Open-Source)](https://code.daypilot.org/31735/javascript-weekly-calendar-asp-net-core)
ASP.NET Core web application that displays scheduled events in a monthly calendar. Visual Studio project for download.
***
### ASP.NET Core Maintenance Scheduling App
[](https://code.daypilot.org/92491/asp-net-core-maintenance-scheduling)
[ASP.NET Core Maintenance Scheduling (Open-Source)](https://code.daypilot.org/92491/asp-net-core-maintenance-scheduling)
How to create a visual, color-coded, and easily adjustable maintenance plan in ASP.NET Core using DayPilot.
***
### ASP.NET Core Resource-Scheduling Calendar
[](https://code.daypilot.org/20604/asp-net-core-resource-calendar-open-source)
[ASP.NET Core Resource-Scheduling Calendar (Open-Source)](https://code.daypilot.org/20604/asp-net-core-resource-calendar-open-source)
How to create a resource-scheduling calendar in ASP.NET Core that displays resources as columns. Add more UI features, such as free/busy highlighting, next/previous date-changing buttons and a modal dialog for editing event details.
***
### Spring Boot Weekly Calendar
[](https://code.daypilot.org/41760/using-javascript-html5-event-calendar-in-spring-boot-java)
[Weekly Event Calendar in Spring Boot/Java (Open-Source)](https://code.daypilot.org/41760/using-javascript-html5-event-calendar-in-spring-boot-java)
Create a Spring Boot scheduling application with a weekly HTML5/JavaScript calendar component.
***
### Spring Boot Monthly Calendar
[](https://code.daypilot.org/58614/using-javascript-html5-monthly-calendar-in-spring-boot-java)
[Monthly Calendar in Spring Boot/Java (Open-Source)](https://code.daypilot.org/58614/using-javascript-html5-monthly-calendar-in-spring-boot-java)
Spring Boot web application that displays a monthly calendar with drag and drop support. Implemented using JavaScript monthly calendar control from DayPilot package.
***
### Spring Boot Resource-Scheduling Calendar
[](https://code.daypilot.org/89304/spring-boot-resource-scheduling-calendar-open-source)
[Spring Boot Resource-Scheduling Calendar (Open-Source)](https://code.daypilot.org/89304/spring-boot-resource-scheduling-calendar-open-source)
Spring Boot application that uses a visual resource-scheduling calendar to display plans for multiple resources side by side.
## Example
HTML:
```html
```
JavaScript:
```javascript
import {DayPilot} from "@daypilot/daypilot-lite-javascript";
// initialize the calendar component
const calendar = new DayPilot.Calendar("calendar", {
viewType: "Week",
startDate: "2025-09-18",
headerDateFormat: "d/M/yyyy",
onEventMoved: args => {
console.log("Event was moved:", args.e);
}
});
calendar.init();
// load calendar events
const events = [
{
start: "2025-03-18T11:00:00",
end: "2025-03-18T14:00:00",
id: 1,
text: "Event 1",
barColor: "#f37021"
},
{
start: "2025-03-19T11:00:00",
end: "2025-03-19T14:00:00",
id: 2,
text: "Event 2",
barColor: "#cc004c"
}
];
calendar.update({events});
```
## Documentation
* [Weekly calendar](https://doc.daypilot.org/calendar/week-view/)
* [Monthly calendar](https://doc.daypilot.org/month/)
* [Resource calendar](https://doc.daypilot.org/calendar/resources-view/)
* [Date picker](https://doc.daypilot.org/navigator/)
## 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