# DayPilot JavaScript Sandbox Lite

> Agent-readable catalog for /sandbox/lite/. Markdown links contain extracted source and navigation context; canonical HTML URLs are noted alongside.

## Calendar

- [Open-Source JavaScript Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/index.md) - Canonical HTML: /sandbox/lite/calendar/index.html. Note: Customize the component using [Calendar UI Builder](https://builder.daypilot.org/calendar?edition=lite) and download a ready-to-run project. Read more about the [JavaScript event calendar](https://javascript.daypilot.org/calendar/).
- [Green CSS Theme (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/themegreen.md) - Canonical HTML: /sandbox/lite/calendar/themegreen.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Transparent CSS Theme (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/themetransparent.md) - Canonical HTML: /sandbox/lite/calendar/themetransparent.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [White CSS Theme (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/themewhite.md) - Canonical HTML: /sandbox/lite/calendar/themewhite.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Blue CSS Theme (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/themeblue.md) - Canonical HTML: /sandbox/lite/calendar/themeblue.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Day View (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/day.md) - Canonical HTML: /sandbox/lite/calendar/day.html. Note: Read more about the calendar [day view](https://doc.daypilot.org/calendar/day-view/) [doc.daypilot.org].
- [Days View (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/days.md) - Canonical HTML: /sandbox/lite/calendar/days.html. Note: Read more about the calendar [days view](https://doc.daypilot.org/calendar/days-view/) [doc.daypilot.org].
- [Week View (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/week.md) - Canonical HTML: /sandbox/lite/calendar/week.html. Note: Read more about the calendar [week view](https://doc.daypilot.org/calendar/week-view/) [doc.daypilot.org].
- [Resources View (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/resources.md) - Canonical HTML: /sandbox/lite/calendar/resources.html. Note: Read more about the [resource calendar](https://doc.daypilot.org/calendar/resources-view/) [doc.daypilot.org].
- [Resource Header Customization (Open-Source Resource Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/resourceimages.md) - Canonical HTML: /sandbox/lite/calendar/resourceimages.html. The column headers display an image representing the corresponding resource. The images are defined in the columns array and they are added to the header using an active area added in the onBeforeHeaderRender event handler. Read more about [column header active areas](https://doc.daypilot.org/calendar/column-header-active-areas/) [doc.daypilot.org].
- [Resource Header Customization (Open-Source Resource Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/resourceicons.md) - Canonical HTML: /sandbox/lite/calendar/resourceicons.html. The resource header displays an "edit" icon using an active area added in the onBeforeHeaderRender event handler. Read more about [column header active areas](https://doc.daypilot.org/calendar/column-header-active-areas/) [doc.daypilot.org].
- [Cell Duration (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/cellduration.md) - Canonical HTML: /sandbox/lite/calendar/cellduration.html. Note: You can set the cell duration using the cellDuration property.
- [Calendar Height (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/height.md) - Canonical HTML: /sandbox/lite/calendar/height.html. Note: Read more about the [Calendar height](https://doc.daypilot.org/calendar/height/).
- [Highlighting Today (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/today.md) - Canonical HTML: /sandbox/lite/calendar/today.html. Note: This demo uses the [onBeforeCellRender](https://api.daypilot.org/daypilot-calendar-onbeforecellrender/) event to highlight today's cells with a light yellow color. Read more about Calendar [cell customization](https://doc.daypilot.org/calendar/cell-customization/).
- [Lunch Break (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/lunch.md) - Canonical HTML: /sandbox/lite/calendar/lunch.html. Note: This demo uses the [onBeforeCellRender](https://api.daypilot.org/daypilot-calendar-onbeforecellrender/) event to mark the lunch break as non-business time. Read more about Calendar [cell customization](https://doc.daypilot.org/calendar/cell-customization/).
- [Text in Cells (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/textincells.md) - Canonical HTML: /sandbox/lite/calendar/textincells.html. Note: This demo uses the [onBeforeCellRender](https://api.daypilot.org/daypilot-calendar-onbeforecellrender/) event to add "Unavailable" text to the selected day and add a custom CSS class to the cells. Read more about Calendar [cell customization](https://doc.daypilot.org/calendar/cell-customization/).
- [Snap to Grid (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/snaptogrid.md) - Canonical HTML: /sandbox/lite/calendar/snaptogrid.html. You can disable the snap-to-grid feature to allow for more precise event positioning during drag-and-drop operations (such as moving, resizing, and time range selection). This feature is enabled by default. Read more about the [snap-to-grid](https://doc.daypilot.org/calendar/snap-to-grid/).
- [Navigator (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/navigator.md) - Canonical HTML: /sandbox/lite/calendar/navigator.html. Note: Read more about integrating the [date navigator](https://doc.daypilot.org/calendar/navigator/) [doc.daypilot.org].
- [Date Picker (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/datepicker.md) - Canonical HTML: /sandbox/lite/calendar/datepicker.html. [Change](/sandbox/lite/calendar/datepicker.html)
- [Next/Previous (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/nextprevious.md) - Canonical HTML: /sandbox/lite/calendar/nextprevious.html. Note: Read more about the [next/previous buttons](https://doc.daypilot.org/calendar/next-and-previous-buttons/) [doc.daypilot.org].
- [Event Active Areas (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventareas.md) - Canonical HTML: /sandbox/lite/calendar/eventareas.html. Note: Event active areas can be used to display custom action buttons, drag handles, icons, and other objects. Read more about the [event active areas](https://doc.daypilot.org/calendar/event-active-areas/) [doc.daypilot.org]
- [Event Context Menu (JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventmenu.md) - Canonical HTML: /sandbox/lite/calendar/eventmenu.html. Note: Read more about [event context menu](https://doc.daypilot.org/calendar/event-context-menu/) [doc.daypilot.org].
- [Event Customization (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventcustomization.md) - Canonical HTML: /sandbox/lite/calendar/eventcustomization.html. You can customize the event appearance (text/HTML, background and font color, CSS class, duration bar...) using the onBeforeEventRender event handler. Read more about [event customization](https://doc.daypilot.org/calendar/event-customization/) [doc.daypilot.org].
- [Event Icons (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventicons.md) - Canonical HTML: /sandbox/lite/calendar/eventicons.html. You can add images/icons at the specified position inside an event using the onBeforeEventRender event handler. Read more about [event customization](https://doc.daypilot.org/calendar/event-customization/) [doc.daypilot.org].
- [Event Deleting (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventdeleting.md) - Canonical HTML: /sandbox/lite/calendar/eventdeleting.html. Read more about [event deleting](https://doc.daypilot.org/calendar/event-deleting/).
- [Event Types (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventtypes.md) - Canonical HTML: /sandbox/lite/calendar/eventtypes.html. You can specify custom event types and define their appearance using the onBeforeEventRender event handler. Read more about [event customization](https://doc.daypilot.org/calendar/event-customization/) [doc.daypilot.org].
- [Exact Event Duration (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/eventexactduration.md) - Canonical HTML: /sandbox/lite/calendar/eventexactduration.html. By default, event boxes are aligned to the Calendar grid. You can change this behavior by setting the useEventBoxes property to "Never". Read more about the [exact event duration](https://doc.daypilot.org/calendar/exact-event-duration/).
- [Localization (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/localization.md) - Canonical HTML: /sandbox/lite/calendar/localization.html. Note: Read more about the [event calendar localization](https://doc.daypilot.org/calendar/localization/) [doc.daypilot.org].
- [RTL (Open-Source JavaScript Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/rtl.md) - Canonical HTML: /sandbox/lite/calendar/rtl.html. Note: Customize the component using [Calendar UI Builder](https://builder.daypilot.org/calendar?edition=lite) and download a ready-to-run project. Read more about the [JavaScript event calendar](https://javascript.daypilot.org/calendar/).
- [Open-Source Angular Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/angular.md) - Canonical HTML: /sandbox/lite/calendar/angular.html. Note: Read more about the [Angular event calendar](https://doc.daypilot.org/calendar/angular/) component.
- [Open-Source React Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/react.md) - Canonical HTML: /sandbox/lite/calendar/react.html. Note: Read more about the [React event calendar](https://doc.daypilot.org/calendar/react/) component.
- [Open-Source Vue Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/calendar/vue.md) - Canonical HTML: /sandbox/lite/calendar/vue.html. Note: Read more about the [Vue event calendar](https://doc.daypilot.org/calendar/vue-js/) component.

## Month

- [Open-Source JavaScript Monthly Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/index.md) - Canonical HTML: /sandbox/lite/month/index.html. Note: Customize the component using [Monthly Calendar UI Builder](https://builder.daypilot.org/month?edition=lite) and download a ready-to-run project. Read more about the [JavaScript monthly calendar](https://javascript.daypilot.org/month/).
- [Green CSS Theme (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/themegreen.md) - Canonical HTML: /sandbox/lite/month/themegreen.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Transparent CSS Theme (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/themetransparent.md) - Canonical HTML: /sandbox/lite/month/themetransparent.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [White CSS Theme (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/themewhite.md) - Canonical HTML: /sandbox/lite/month/themewhite.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Blue CSS Theme (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/themeblue.md) - Canonical HTML: /sandbox/lite/month/themeblue.html. Note: You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Navigator (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/navigator.md) - Canonical HTML: /sandbox/lite/month/navigator.html. Note: Read more about integrating the [date navigator](https://doc.daypilot.org/month/navigator/) [doc.daypilot.org].
- [Date Picker (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/datepicker.md) - Canonical HTML: /sandbox/lite/month/datepicker.html. [Change](/sandbox/lite/month/datepicker.html)
- [Next/Previous (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/nextprevious.md) - Canonical HTML: /sandbox/lite/month/nextprevious.html. Note: Read more about the [next/previous buttons](https://doc.daypilot.org/month/next-and-previous-buttons/) [doc.daypilot.org].
- [Event Active Areas (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/eventareas.md) - Canonical HTML: /sandbox/lite/month/eventareas.html. Note: Event active areas can be used to display custom action buttons, drag handles, icons, and other objects. Read more about the [event active areas](https://doc.daypilot.org/month/event-active-areas/) [doc.daypilot.org]
- [Event Context Menu (Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/eventmenu.md) - Canonical HTML: /sandbox/lite/month/eventmenu.html. Note: Right click an event to activate a context menu. Read more about [event context menu](https://doc.daypilot.org/month/event-context-menu/) [doc.daypilot.org].
- [Event Customization (Open-Source JavaScript Monthly Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/eventcustomization.md) - Canonical HTML: /sandbox/lite/month/eventcustomization.html. Read more about [event customization](https://doc.daypilot.org/month/event-customization/).
- [Event Deleting (Open-Source JavaScript Monthly Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/eventdeleting.md) - Canonical HTML: /sandbox/lite/month/eventdeleting.html. You can delete an event by clicking an "x" icon the shows on hover. Read more about the [event deleting](https://doc.daypilot.org/month/event-deleting/) in the monthly calendar.
- [Cell Customization (Open-Source JavaScript Monthly Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/cellcustomization.md) - Canonical HTML: /sandbox/lite/month/cellcustomization.html. Note: You can [customize the day cells](https://doc.daypilot.org/month/cell-customization/) (background color, header text, CSS, HTML, business status) in the monthly calendar.
- [Open-Source Angular Monthly Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/angular.md) - Canonical HTML: /sandbox/lite/month/angular.html. Note: Read more about the [Angular monthly event calendar](https://doc.daypilot.org/month/angular/) component.
- [Open-Source React Monthly Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/react.md) - Canonical HTML: /sandbox/lite/month/react.html. Note: Read more about the [React monthly event calendar](https://doc.daypilot.org/month/react/) component.
- [Open-Source Vue Monthly Event Calendar | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/vue.md) - Canonical HTML: /sandbox/lite/month/vue.html. Note: Read more about the [Vue monthly event calendar](https://doc.daypilot.org/month/vue-js/) component.
- [Localization (Open-Source JavaScript Monthly Event Calendar) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/month/localization.md) - Canonical HTML: /sandbox/lite/month/localization.html. Note: Read more about the [monthly event calendar localization](https://doc.daypilot.org/month/localization/) [doc.daypilot.org].

## Scheduler

- [JavaScript Scheduler | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/index.md) - Canonical HTML: /sandbox/lite/scheduler/index.html. Customize the component using [Scheduler UI Builder](https://builder.daypilot.org/scheduler) and download a ready-to-run project. Read more about the [JavaScript scheduler](https://javascript.daypilot.org/scheduler/).
- [Transparent CSS Theme (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/themetransparent.md) - Canonical HTML: /sandbox/lite/scheduler/themetransparent.html. You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [White CSS Theme (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/themewhite.md) - Canonical HTML: /sandbox/lite/scheduler/themewhite.html. You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Green CSS Theme (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/themegreen.md) - Canonical HTML: /sandbox/lite/scheduler/themegreen.html. You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Blue CSS Theme (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/themeblue.md) - Canonical HTML: /sandbox/lite/scheduler/themeblue.html. You can create a theme using the online DayPilot Theme Designer: [https://themes.daypilot.org/](https://themes.daypilot.org/)
- [Diagonal CSS Theme (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/themediagonal.md) - Canonical HTML: /sandbox/lite/scheduler/themediagonal.html. See a tutorial: [JavaScript Scheduler: Use Diagonally Split Cells for Check-In/Check-Out](https://code.daypilot.org/13951/javascript-scheduler-use-diagonally-split-cells-for-check-in)
- [Time Headers (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/timeheaders.md) - Canonical HTML: /sandbox/lite/scheduler/timeheaders.html. The Scheduler can display multiple time header rows, each with a defined resolution and date format. Read more about the [time header rows](https://doc.daypilot.org/scheduler/time-header-rows/) [doc.daypilot.org].
- [Time Header Customization (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/timeheadercustomization.md) - Canonical HTML: /sandbox/lite/scheduler/timeheadercustomization.html. You can customize the time header cells (HTML, colors, CSS, areas) using the onBeforeTimeHeaderRender event. Read more about the [time header customization](https://doc.daypilot.org/scheduler/time-header-customization/) [doc.daypilot.org].
- [Time Scale: Minutes (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/scaleminutes.md) - Canonical HTML: /sandbox/lite/scheduler/scaleminutes.html. This Scheduler shows 15-minute time slots. Read more about the [scheduler scale](https://doc.daypilot.org/scheduler/scale/) [doc.daypilot.org].
- [Time Scale: Hours (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/scalehours.md) - Canonical HTML: /sandbox/lite/scheduler/scalehours.html. This Scheduler shows one hour per cell. Read more about the [scheduler scale](https://doc.daypilot.org/scheduler/scale/) [doc.daypilot.org].
- [Time Scale: Days (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/scaledays.md) - Canonical HTML: /sandbox/lite/scheduler/scaledays.html. This example shows one day per cell in the Scheduler grid. Read more about the [scheduler scale](https://doc.daypilot.org/scheduler/scale/) [doc.daypilot.org].
- [Time Scale: Weeks (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/scaleweeks.md) - Canonical HTML: /sandbox/lite/scheduler/scaleweeks.html. This Scheduler configuration uses a grid that shows one week per cell. Read more about the [scheduler scale](https://doc.daypilot.org/scheduler/scale/) [doc.daypilot.org].
- [Angular Scheduler Component | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/angular.md) - Canonical HTML: /sandbox/lite/scheduler/angular.html. Read more about the [Angular Scheduler](https://doc.daypilot.org/scheduler/angular/) component [doc.daypilot.org].
- [Vue.js Scheduler Component | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/vuejs.md) - Canonical HTML: /sandbox/lite/scheduler/vuejs.html. Read more about the [Vue.js Scheduler](https://doc.daypilot.org/scheduler/vue-js/) component [doc.daypilot.org].
- [React Scheduler Component | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/react.md) - Canonical HTML: /sandbox/lite/scheduler/react.html. Read more about the [React Scheduler](https://doc.daypilot.org/scheduler/react/) component [doc.daypilot.org].
- [Progressive Row Rendering (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/rowprogressive.md) - Canonical HTML: /sandbox/lite/scheduler/rowprogressive.html. This scheduler displays 1000 resources. The row headers are rendered progressively during scrolling (progressiveRowRendering: true). Read more about [progressive row rendering](https://doc.daypilot.org/scheduler/progressive-row-rendering/).
- [Row Header Active Areas (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/rowheaderactiveareas.md) - Canonical HTML: /sandbox/lite/scheduler/rowheaderactiveareas.html. You can add custom icons and action buttons to the Scheduler row headers using active areas. This demo shows an icon on hover that opens an edit dialog on click. Read more about the [row header active areas](https://doc.daypilot.org/scheduler/row-header-active-areas/).
- [Asynchronous Validation (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/asyncvalidation.md) - Canonical HTML: /sandbox/lite/scheduler/asyncvalidation.html. Event resizing and moving is validated on drop using an asynchronous HTTP call. Read more about [event moving validation](https://doc.daypilot.org/scheduler/event-moving-validation/) and [event resizing validation](https://doc.daypilot.org/scheduler/event-resizing-validation/).
- [Event Active Areas (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventareas.md) - Canonical HTML: /sandbox/lite/scheduler/eventareas.html. Move the cursor over an event to see the active areas. Read more about [event active areas](https://doc.daypilot.org/scheduler/event-active-areas/) [doc.daypilot.org].
- [Event Context Menu (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventmenu.md) - Canonical HTML: /sandbox/lite/scheduler/eventmenu.html. Activate the context menu by right-clicking an event. Read more about the [event context menu](https://doc.daypilot.org/scheduler/event-context-menu/) [doc.daypilot.org].
- [Event Copying (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventcopying.md) - Canonical HTML: /sandbox/lite/scheduler/eventcopying.html. You can copy events by holding Ctrl while dragging and dropping, or by using the icon on the right side of the event. Read more about [copying events](https://doc.daypilot.org/scheduler/event-copying/).
- [Event Customization (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventcustomization.md) - Canonical HTML: /sandbox/lite/scheduler/eventcustomization.html. Read more about [event customization](https://doc.daypilot.org/scheduler/event-customization/) [doc.daypilot.org].
- [Event Deleting (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventdeleting.md) - Canonical HTML: /sandbox/lite/scheduler/eventdeleting.html. Read more about [event deleting](https://doc.daypilot.org/scheduler/event-deleting/) [doc.daypilot.org].
- [Event End Date/Time (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventendspec.md) - Canonical HTML: /sandbox/lite/scheduler/eventendspec.html. The event start and end can be specified as date-only values. The end date will be treated as the end of the day (23:59:59) in this case. You can enable this behavior by setting the eventEndSpec property to Date. Read more about the [event end date/time](https://doc.daypilot.org/scheduler/event-end-date-time/).
- [Event Icons (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventicons.md) - Canonical HTML: /sandbox/lite/scheduler/eventicons.html. This demo uses SVG symbol icons which are displayed using event active areas. Read more about [event icons](https://doc.daypilot.org/scheduler/event-icons/).
- [Event Loading (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventloading.md) - Canonical HTML: /sandbox/lite/scheduler/eventloading.html. This demo loads the events directly from the specified URL using the events.load() method. Read more about [loading events](https://doc.daypilot.org/scheduler/event-loading/) [doc.daypilot.org].
- [Drag and Drop Event Moving (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/eventmoving.md) - Canonical HTML: /sandbox/lite/scheduler/eventmoving.html. A user confirmation is requested when moving an event (see onEventMove, onEventMoved event handlers). Read more about [event moving](https://doc.daypilot.org/scheduler/event-moving/).
- [JavaScript Scheduler | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/cellcustomization.md) - Canonical HTML: /sandbox/lite/scheduler/cellcustomization.html. You can customize the cells using the onBeforeCellRender event. Read more about [cell customization](https://javascript.daypilot.org/scheduler/cell-customization/).
- [Cell Width (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/cellwidth.md) - Canonical HTML: /sandbox/lite/scheduler/cellwidth.html. In this demo, you can change the [cell width](https://doc.daypilot.org/scheduler/cell-width/) dynamically using a range input control.
- [Scrolling (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/scrolling.md) - Canonical HTML: /sandbox/lite/scheduler/scrolling.html. You can use the Scheduler API to scroll programmatically. Read more about the [JavaScript scheduler](https://javascript.daypilot.org/scheduler/).
- [Snap to Grid (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/snaptogrid.md) - Canonical HTML: /sandbox/lite/scheduler/snaptogrid.html. This demo uses [snapToGrid](https://doc.daypilot.org/scheduler/snap-to-grid/) = false and [useEventBoxes](https://doc.daypilot.org/scheduler/exact-event-duration/) = "Never".
- [Time Range Selecting (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/timerangeselecting.md) - Canonical HTML: /sandbox/lite/scheduler/timerangeselecting.html. This page uses a custom rule for event creating (maximum of 3 days can be selected), implemented using the onTimeRangeSelecting event. Read more about the [time range selecting](https://doc.daypilot.org/scheduler/time-range-selecting/).
- [Navigator (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/navigator.md) - Canonical HTML: /sandbox/lite/scheduler/navigator.html. Read more about integrating the [date navigator](https://doc.daypilot.org/scheduler/navigator/) [doc.daypilot.org].
- [Next/Previous Navigation (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/nextprevious.md) - Canonical HTML: /sandbox/lite/scheduler/nextprevious.html. Read more about [next/previous buttons](https://doc.daypilot.org/scheduler/next-and-previous-buttons/) [doc.daypilot.org].
- [Localization (JavaScript Scheduler) | DayPilot Lite for JavaScript Sandbox](/sandbox/lite/scheduler/localization.md) - Canonical HTML: /sandbox/lite/scheduler/localization.html. Read more about the [scheduler localization](https://doc.daypilot.org/scheduler/localization/) [doc.daypilot.org].