# DayPilot JavaScript Sandbox

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

## Calendar

- [JavaScript Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/index.md) - Canonical HTML: /sandbox/calendar/index.html. Customize the component using [Calendar UI Builder](https://builder.daypilot.org/calendar) and download a ready-to-run project. Read more about the [JavaScript event calendar](https://javascript.daypilot.org/calendar/).
- [Transparent CSS Theme (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/themetransparent.md) - Canonical HTML: /sandbox/calendar/themetransparent.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [White CSS Theme (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/themewhite.md) - Canonical HTML: /sandbox/calendar/themewhite.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [Green CSS Theme (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/themegreen.md) - Canonical HTML: /sandbox/calendar/themegreen.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [Blue CSS Theme (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/themeblue.md) - Canonical HTML: /sandbox/calendar/themeblue.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [Navigator (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/navigator.md) - Canonical HTML: /sandbox/calendar/navigator.html. Read more about integrating the [date navigator](https://doc.daypilot.org/calendar/navigator/) [doc.daypilot.org].
- [Date Picker (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/datepicker.md) - Canonical HTML: /sandbox/calendar/datepicker.html. You can use the date picker component to attach a drop-down calendar to a custom element. This demo shows how to use it to change the date of the main calendar.
- [Next/Previous (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/nextprevious.md) - Canonical HTML: /sandbox/calendar/nextprevious.html. Read more about the [next/previous buttons](https://doc.daypilot.org/calendar/next-and-previous-buttons/) [doc.daypilot.org].
- [All-Day Events (JavaScript Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/allday.md) - Canonical HTML: /sandbox/calendar/allday.html. You can enable support for all-day events that will be displayed in the top header row of the Calendar component. Read more about the [all-day events](https://doc.daypilot.org/calendar/all-day-events/) [doc.daypilot.org].
- [Event Active Areas (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventareas.md) - Canonical HTML: /sandbox/calendar/eventareas.html. Hold a cursor on an event to see the active areas. The [event active areas](https://doc.daypilot.org/calendar/event-active-areas/) [doc.daypilot.org] can be used to display custom action buttons, drag handlers, icons, and other objects.
- [Event Context Menu (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventmenu.md) - Canonical HTML: /sandbox/calendar/eventmenu.html. Read more about [event context menu](https://doc.daypilot.org/calendar/event-context-menu/) [doc.daypilot.org].
- [Event Customization (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventcustomization.md) - Canonical HTML: /sandbox/calendar/eventcustomization.html. Read more about [event customization](https://doc.daypilot.org/calendar/event-customization/) [doc.daypilot.org].
- [Event Deleting (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventdeleting.md) - Canonical HTML: /sandbox/calendar/eventdeleting.html. Read more about [event deleting](https://doc.daypilot.org/calendar/event-deleting/) [doc.daypilot.org].
- [Event Filtering (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventfiltering.md) - Canonical HTML: /sandbox/calendar/eventfiltering.html. Read more about [event filtering](https://doc.daypilot.org/calendar/event-filtering/).
- [JavaScript Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventmovingtwocalendars.md) - Canonical HTML: /sandbox/calendar/eventmovingtwocalendars.html. When dragOutAllowed is true, you can drag an event to another Calendar instance.
- [Event Moving Customization (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventmovingcustomization.md) - Canonical HTML: /sandbox/calendar/eventmovingcustomization.html. You can customize the event moving using onEventMoving event handler.
- [Event Overlaps (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventoverlaps.md) - Canonical HTML: /sandbox/calendar/eventoverlaps.html. Read more about [calendar event overlaps](https://doc.daypilot.org/calendar/event-overlaps/).
- [Event Resizing Customization (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventresizingcustomization.md) - Canonical HTML: /sandbox/calendar/eventresizingcustomization.html. You can [customize the event resizing](https://doc.daypilot.org/calendar/event-resizing-customization/) using the onEventResizing event handler.
- [Event Selecting (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventselecting.md) - Canonical HTML: /sandbox/calendar/eventselecting.html. Multiple events can be selected using Ctrl + click. Read more about [event selecting](https://doc.daypilot.org/calendar/event-selecting/) [doc.daypilot.org].
- [External Drag and Drop (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/external.md) - Canonical HTML: /sandbox/calendar/external.html. External item can be dragged to the event calendar. Read more about [external drag and drop](https://doc.daypilot.org/calendar/external-drag-and-drop/) [doc.daypilot.org].
- [JavaScript Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/eventsprogressive.md) - Canonical HTML: /sandbox/calendar/eventsprogressive.html. Customize the component using [Calendar UI Builder](https://builder.daypilot.org/calendar) and download a ready-to-run project. Read more about the [JavaScript event calendar](https://javascript.daypilot.org/calendar/).
- [JavaScript Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/queue.md) - Canonical HTML: /sandbox/calendar/queue.html. Customize the component using [Calendar UI Builder](https://builder.daypilot.org/calendar) and download a ready-to-run project. Read more about the [JavaScript event calendar](https://javascript.daypilot.org/calendar/).
- [Resources View: Hours Time Scale (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/scalehours.md) - Canonical HTML: /sandbox/calendar/scalehours.html. This demo shows the current week on the vertical axis, one hour per cell. Read more about the [calendar scale](https://doc.daypilot.org/calendar/scale/) [doc.daypilot.org].
- [Resources View: Days Time Scale (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/scaledays.md) - Canonical HTML: /sandbox/calendar/scaledays.html. This demo shows the current month on the vertical axis, one day per cell. Read more about the [calendar scale](https://doc.daypilot.org/calendar/scale/) [doc.daypilot.org].
- [Resources View: Weeks Time Scale (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/scaleweeks.md) - Canonical HTML: /sandbox/calendar/scaleweeks.html. This demo shows 10 weeks on the vertical axis, one week per cell. Read more about the [calendar scale](https://doc.daypilot.org/calendar/scale/) [doc.daypilot.org].
- [Resources View: Custom Time Scale (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/scalecustom.md) - Canonical HTML: /sandbox/calendar/scalecustom.html. This demo shows the current month on the vertical axis, one half-day per cell. Read more about the [calendar scale](https://doc.daypilot.org/calendar/scale/) [doc.daypilot.org].
- [Column Filtering (JavaScript Resource Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/columnfiltering.md) - Canonical HTML: /sandbox/calendar/columnfiltering.html. Columns are filtered by name in real time. The filter is only applied to the bottom level columns. Read more about [column filtering](https://doc.daypilot.org/calendar/column-filtering/).
- [Custom Column Width (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/columnwidth.md) - Canonical HTML: /sandbox/calendar/columnwidth.html. In the [resource calendar](https://doc.daypilot.org/calendar/resources-view/) mode, you can use [custom column widths](https://doc.daypilot.org/calendar/custom-column-widths/) [doc.daypilot.org].
- [Column Moving (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/columnmoving.md) - Canonical HTML: /sandbox/calendar/columnmoving.html. In the [resource calendar](https://doc.daypilot.org/calendar/resources-view/) mode, you can enable drag and drop [calendar column moving](https://doc.daypilot.org/calendar/column-moving/) [doc.daypilot.org].
- [Column Resizing (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/columnresizing.md) - Canonical HTML: /sandbox/calendar/columnresizing.html. In the [resource calendar](https://doc.daypilot.org/calendar/resources-view/) mode, you can enable drag and drop [calendar column resizing](https://doc.daypilot.org/calendar/column-resizing/) [doc.daypilot.org].
- [50 columns (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/50columns.md) - Canonical HTML: /sandbox/calendar/50columns.html. Read more about [fixed column width](https://doc.daypilot.org/calendar/fixed-column-width/) [doc.daypilot.org].
- [100% Height (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/100pctheight.md) - Canonical HTML: /sandbox/calendar/100pctheight.html. Read more about the [100% height](https://doc.daypilot.org/calendar/100-pct-height/) [doc.daypilot.org].
- [Crosshair (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/crosshair.md) - Canonical HTML: /sandbox/calendar/crosshair.html. Two [crosshair](https://doc.daypilot.org/calendar/crosshair/) modes are supported: "Header" (headers only) and "Full" (full crosshair).
- [Disabled Cells (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/cellsdisabled.md) - Canonical HTML: /sandbox/calendar/cellsdisabled.html. Read more about [disabled cells](https://javascript.daypilot.org/calendar/disabled-cells/).
- [JavaScript Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/snaptogrid.md) - Canonical HTML: /sandbox/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/).
- [Time Range Selecting (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/timerangeselecting.md) - Canonical HTML: /sandbox/calendar/timerangeselecting.html. onTimeRangeSelecting event handler is used to customize time range selecting.
- [JavaScript Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/zoom.md) - Canonical HTML: /sandbox/calendar/zoom.html. Read more about the [calendar zoom](https://doc.daypilot.org/calendar/zoom/).
- [Localization (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/localization.md) - Canonical HTML: /sandbox/calendar/localization.html. Read more about the [event calendar localization](https://doc.daypilot.org/calendar/localization/) [doc.daypilot.org].
- [RTL (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/rtl.md) - Canonical HTML: /sandbox/calendar/rtl.html. Read more about the [RTL event calendar](https://doc.daypilot.org/calendar/rtl/) [doc.daypilot.org].
- [Overnight Shifts (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/overnight.md) - Canonical HTML: /sandbox/calendar/overnight.html. The visible day range is set to 8:00 am - 8:00 am using dayBeginsHour and dayEndsHour. Read more about [overnight scheduling](https://doc.daypilot.org/calendar/overnight-scheduling/) [doc.daypilot.org].
- [Lunch Break (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/lunchbreak.md) - Canonical HTML: /sandbox/calendar/lunchbreak.html. Read more about [cell customization](https://doc.daypilot.org/calendar/cell-customization/) [doc.daypilot.org].
- [Time Header (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/timeheadercellduration.md) - Canonical HTML: /sandbox/calendar/timeheadercellduration.html. Read more about the [time header cell duration](https://doc.daypilot.org/calendar/time-header-cell-duration/).
- [Excel Export (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/exportexcel.md) - Canonical HTML: /sandbox/calendar/exportexcel.html. Read more about [client-side Excel export](https://doc.daypilot.org/calendar/client-side-excel-export/).
- [JPEG Export (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/exportjpeg.md) - Canonical HTML: /sandbox/calendar/exportjpeg.html. Read more about the [JavaScript event calendar](http://javascript.daypilot.org/calendar/).
- [SVG Export (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/exportsvg.md) - Canonical HTML: /sandbox/calendar/exportsvg.html. Read more about the [JavaScript event calendar](http://javascript.daypilot.org/calendar/).
- [Angular Event Calendar Component | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/angular.md) - Canonical HTML: /sandbox/calendar/angular.html. Read more about the [Angular event calendar component](https://doc.daypilot.org/calendar/angular/).
- [React Event Calendar Component | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/react.md) - Canonical HTML: /sandbox/calendar/react.html. Read more about the [React event calendar component](https://doc.daypilot.org/calendar/react/).
- [Vue Event Calendar Component | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/vue.md) - Canonical HTML: /sandbox/calendar/vue.html. Read more about the [Vue event calendar component](https://doc.daypilot.org/calendar/vue-js/).
- [Day View (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/day.md) - Canonical HTML: /sandbox/calendar/day.html. Read more about the calendar [day view](https://doc.daypilot.org/calendar/day-view/) [doc.daypilot.org].
- [Week View (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/week.md) - Canonical HTML: /sandbox/calendar/week.html. Read more about the calendar [week view](https://doc.daypilot.org/calendar/week-view/) [doc.daypilot.org].
- [Year View (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/year.md) - Canonical HTML: /sandbox/calendar/year.html. The Calendar component can display a [year view](https://doc.daypilot.org/calendar/year/) where each column represents a month and each cell represents a day.
- [Resources View (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/resources.md) - Canonical HTML: /sandbox/calendar/resources.html. The resources view lets you customize the columns and display resources (people, machines, tools, cars) on the horizontal axis. Read more about the calendar [resources view](https://doc.daypilot.org/calendar/resources-view/) [doc.daypilot.org].
- [Column Hierarchy (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/hierarchy.md) - Canonical HTML: /sandbox/calendar/hierarchy.html. You can arrange columns in a hierarchy and group them by days or resource groups. Read more about the calendar [column header hierarchy](https://doc.daypilot.org/calendar/column-header-hierarchy/) [doc.daypilot.org].
- [Days-Resources View (JavaScript Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/calendar/daysresources.md) - Canonical HTML: /sandbox/calendar/daysresources.html. You can arrange columns in a hierarchy and group them by days or resource groups. Read more about the calendar [column header hierarchy](https://doc.daypilot.org/calendar/column-header-hierarchy/) [doc.daypilot.org].

## Month

- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/index.md) - Canonical HTML: /sandbox/month/index.html. Customize the component using [Monthly Calendar UI Builder](https://builder.daypilot.org/month) and download a ready-to-run project. Read more about the [JavaScript monthly calendar](https://javascript.daypilot.org/month/).
- [Transparent CSS Theme (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/themetransparent.md) - Canonical HTML: /sandbox/month/themetransparent.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [White CSS Theme (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/themewhite.md) - Canonical HTML: /sandbox/month/themewhite.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [Green CSS Theme (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/themegreen.md) - Canonical HTML: /sandbox/month/themegreen.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [Traditional CSS Theme (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/themeblue.md) - Canonical HTML: /sandbox/month/themeblue.html. You can create a theme using the online DayPilot Theme Designer: [http://themes.daypilot.org/](http://themes.daypilot.org/)
- [Navigator (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/navigator.md) - Canonical HTML: /sandbox/month/navigator.html. Read more about integrating the [date navigator](https://doc.daypilot.org/month/navigator/) [doc.daypilot.org].
- [Date Picker (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/datepicker.md) - Canonical HTML: /sandbox/month/datepicker.html. [Change](/sandbox/month/datepicker.html)
- [Next/Previous (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/nextprevious.md) - Canonical HTML: /sandbox/month/nextprevious.html. Read more about the [next/previous buttons](https://doc.daypilot.org/month/next-and-previous-buttons/) [doc.daypilot.org].
- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventareas.md) - Canonical HTML: /sandbox/month/eventareas.html. Hold a cursor on an event to see the active areas. The [event active areas](https://doc.daypilot.org/month/event-active-areas/) [doc.daypilot.org] can be used to display custom action buttons, drag handlers, icons, and other objects.
- [Event Context Menu (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventmenu.md) - Canonical HTML: /sandbox/month/eventmenu.html. Read more about [event context menu](https://doc.daypilot.org/month/event-context-menu/) [doc.daypilot.org].
- [Event Deleting (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventdeleting.md) - Canonical HTML: /sandbox/month/eventdeleting.html. Read more about [event deleting](https://doc.daypilot.org/month/event-deleting/) [doc.daypilot.org].
- [Event Filtering (JavaScript Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventfiltering.md) - Canonical HTML: /sandbox/month/eventfiltering.html. Read more about [event filtering](https://doc.daypilot.org/month/event-filtering/).
- [Event Customization (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventcustomization.md) - Canonical HTML: /sandbox/month/eventcustomization.html. Read more about [event customization](https://doc.daypilot.org/month/event-customization/) [doc.daypilot.org].
- [Moving Event to a Position inside a Day(Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventposition.md) - Canonical HTML: /sandbox/month/eventposition.html. Read more about moving events to a [specific position inside a cell](https://doc.daypilot.org/month/event-position/) [doc.daypilot.org].
- [Event Selecting (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventselecting.md) - Canonical HTML: /sandbox/month/eventselecting.html. Multiple events can be selected using Ctrl + click. Read more about [event selecting](https://doc.daypilot.org/month/event-selecting/) [doc.daypilot.org].
- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventstartend.md) - Canonical HTML: /sandbox/month/eventstartend.html. Read more about the [JavaScript monthly calendar](http://javascript.daypilot.org/month/).
- [Event End Spec (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventendspec.md) - Canonical HTML: /sandbox/month/eventendspec.html. You can specify the event end date as date-only using .eventEndSpec = "Date".
- [External Drag and Drop (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/external.md) - Canonical HTML: /sandbox/month/external.html. Read more about the [JavaScript monthly calendar](http://javascript.daypilot.org/month/).
- [Max Events (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/eventsmax.md) - Canonical HTML: /sandbox/month/eventsmax.html. Each day displays up to 3 events. Additional events are accessible using a custom link at the bottom of the day cell.
- [Cell Icons (JavaScript Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/cellicons.md) - Canonical HTML: /sandbox/month/cellicons.html. This example shows how to display icons in the cells of the monthly calendar. The icons are clickable and can be used to trigger custom actions. Read more about the [cell icons](https://doc.daypilot.org/month/cell-icons/).
- [Disabled Cells (JavaScript Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/cellsdisabled.md) - Canonical HTML: /sandbox/month/cellsdisabled.html. This example disables drag and drop operations for days in the past. Read more about the [disabled cells](https://doc.daypilot.org/month/disabled-cells/).
- [Highlighting Today (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/today.md) - Canonical HTML: /sandbox/month/today.html. Read more about [day cell customization](https://doc.daypilot.org/month/cell-customization/) [doc.daypilot.org].
- [Excel Export (JavaScript Monthly Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/exportexcel.md) - Canonical HTML: /sandbox/month/exportexcel.html. Read more about [client-side Excel export](https://doc.daypilot.org/month/client-side-excel-export/).
- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/exportjpeg.md) - Canonical HTML: /sandbox/month/exportjpeg.html. Read more about the [client-side JPEG export](https://doc.daypilot.org/month/client-side-export/).
- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/exportsvg.md) - Canonical HTML: /sandbox/month/exportsvg.html. Read more about the [client-side SVG export](https://doc.daypilot.org/month/client-side-export/).
- [Angular Monthly Event Calendar Component | DayPilot Pro for JavaScript Sandbox](/sandbox/month/angular.md) - Canonical HTML: /sandbox/month/angular.html. Read more about the [Angular monthly calendar component](https://doc.daypilot.org/month/angular/).
- [React Monthly Event Calendar Component | DayPilot Pro for JavaScript Sandbox](/sandbox/month/react.md) - Canonical HTML: /sandbox/month/react.html. Read more about the [React monthly calendar component](https://doc.daypilot.org/month/react/).
- [Vue Monthly Event Calendar Component | DayPilot Pro for JavaScript Sandbox](/sandbox/month/vue.md) - Canonical HTML: /sandbox/month/vue.html. Read more about the [Vue monthly calendar component](https://doc.daypilot.org/month/vue-js/).
- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/100pctheight.md) - Canonical HTML: /sandbox/month/100pctheight.html. The height is set to 100% of the parent element. Read more about the setting the monthly event calendar control [height to 100%](https://doc.daypilot.org/month/100-pct-height/) [doc.daypilot.org].
- [Monthly Event Calendar | DayPilot Pro for JavaScript Sandbox](/sandbox/month/weeks.md) - Canonical HTML: /sandbox/month/weeks.html. Read more about the [weeks view](https://doc.daypilot.org/month/weeks-view/) [doc.daypilot.org].
- [Localization (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/localization.md) - Canonical HTML: /sandbox/month/localization.html. Read more about the [monthly event calendar localization](https://doc.daypilot.org/month/localization/) [doc.daypilot.org].
- [RTL (Monthly Event Calendar) | DayPilot Pro for JavaScript Sandbox](/sandbox/month/rtl.md) - Canonical HTML: /sandbox/month/rtl.html. Read more about the monthly calendar [right-to-left (RTL) mode](https://doc.daypilot.org/month/rtl/).

## Scheduler

- [JavaScript Scheduler | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/index.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/themetransparent.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/themewhite.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/themegreen.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/themeblue.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/themediagonal.md) - Canonical HTML: /sandbox/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 Header Active Areas (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/timeheaderactiveareas.md) - Canonical HTML: /sandbox/scheduler/timeheaderactiveareas.html. The first time header row displays an "info" icon on the right side (click the icon to see the time header cell details). The second row is split into custom 10-day sections using active areas with different colors. Read more about [time header active areas](https://doc.daypilot.org/scheduler/time-header-active-areas/).
- [Time Headers (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/timeheaders.md) - Canonical HTML: /sandbox/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 Bubble (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/timeheaderbubble.md) - Canonical HTML: /sandbox/scheduler/timeheaderbubble.html. Hover over a time header to see a bubble with the date. The contents of the [time header bubble](https://doc.daypilot.org/scheduler/time-header-bubble/) can be defined statically or generated dynamically in the onLoad handler.
- [Hide Weekends (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/hide.md) - Canonical HTML: /sandbox/scheduler/hide.html. In this Scheduler example, weekends are hidden. Read more about the [hiding non-business hours](https://doc.daypilot.org/scheduler/hiding-non-business-hours/) [doc.daypilot.org].
- [Hiding Non-Business Hours (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/hidingnonbusiness.md) - Canonical HTML: /sandbox/scheduler/hidingnonbusiness.html. It is possible to hide non-business hours from the Scheduler timeline. The definition of non-business hours is automatically resolved, either at the hour level (e.g., 9 AM - 6 PM) or the day level (e.g., work week), depending on the chosen scale. Read more about [hiding non-business hours](https://doc.daypilot.org/scheduler/hiding-non-business-hours/).
- [Separators (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/separators.md) - Canonical HTML: /sandbox/scheduler/separators.html. Separators are vertical lines that can be displayed at the specified date/time position. Read more about the [separators](https://doc.daypilot.org/scheduler/separators/) [doc.daypilot.org].
- [Time Scale: Minutes (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/scaleminutes.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/scalehours.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/scaledays.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/scaleweeks.md) - Canonical HTML: /sandbox/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].
- [Time Scale: Months (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/scalemonths.md) - Canonical HTML: /sandbox/scheduler/scalemonths.html. This Scheduler grid shows one month per cell. Read more about the [scheduler scale](https://doc.daypilot.org/scheduler/scale/) [doc.daypilot.org].
- [Time Scale: Years (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/scaleyears.md) - Canonical HTML: /sandbox/scheduler/scaleyears.html. This Scheduler configuration uses a grid that shows one year per cell. Read more about the [scheduler scale](https://doc.daypilot.org/scheduler/scale/) [doc.daypilot.org].
- [Time Scale: Custom (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/scalecustom.md) - Canonical HTML: /sandbox/scheduler/scalecustom.html. This example uses a custom timeline defined using individual cells. Note that the timeline is not linear - the first month displays one day per cell, while the last three cells show a month each. Read more about the [scheduler timeline](https://doc.daypilot.org/scheduler/timeline/) customization [doc.daypilot.org].
- [Angular Scheduler Component | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/angular.md) - Canonical HTML: /sandbox/scheduler/angular.html. Read more about the [Angular Scheduler](https://doc.daypilot.org/scheduler/angular/) component [doc.daypilot.org].
- [React Scheduler Component | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/react.md) - Canonical HTML: /sandbox/scheduler/react.html. Read more about the [React Scheduler](https://doc.daypilot.org/scheduler/react/) component [doc.daypilot.org].
- [Vue.js Scheduler Component | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/vuejs.md) - Canonical HTML: /sandbox/scheduler/vuejs.html. Read more about the [Vue.js Scheduler](https://doc.daypilot.org/scheduler/vue-js/) component [doc.daypilot.org].
- [Gantt Chart (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/gantt.md) - Canonical HTML: /sandbox/scheduler/gantt.html. In the Gantt Chart mode, the Scheduler creates a special row for each event. The row header columns can be used to display additional information about the event. There is also a special [Gantt Chart component](/sandbox/gantt/index.html) with advanced features.
- [Timesheet (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/timesheet.md) - Canonical HTML: /sandbox/scheduler/timesheet.html. The timesheet view displays days on the Y-axis and the 24 hours of a day on the X-axis. Read more about the [timesheet](https://doc.daypilot.org/scheduler/timesheet/) [doc.daypilot.org].
- [Year View (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/year.md) - Canonical HTML: /sandbox/scheduler/year.html. The Scheduler component can display a [year view](https://doc.daypilot.org/scheduler/year/) where each row represents a month and each cell represents a day.
- [Resource Tree (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/tree.md) - Canonical HTML: /sandbox/scheduler/tree.html. The resources displayed as rows in the Scheduler can be organized in a hierarchy. Read more about the [resource tree](https://doc.daypilot.org/scheduler/resource-tree/) [doc.daypilot.org].
- [Row Height (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/roweventheight.md) - Canonical HTML: /sandbox/scheduler/roweventheight.html. This demo uses a custom event height for a specified row: Events in "Room B" have a height of 50 pixels. Read more about the [row height](https://doc.daypilot.org/scheduler/row-height/).
- [Dynamic Tree Loading (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/treedynamic.md) - Canonical HTML: /sandbox/scheduler/treedynamic.html. The tree node children are loaded dynamically using the onLoadNode event handler. Read more about [dynamic resource tree loading](https://doc.daypilot.org/scheduler/dynamic-resource-tree-loading/) [doc.daypilot.org].
- [External Drag and Drop of Rows (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/externalrow.md) - Canonical HTML: /sandbox/scheduler/externalrow.html. You can [drag resources from an external list](https://doc.daypilot.org/scheduler/external-drag-and-drop-of-rows/) to the Scheduler and back.
- [Frozen Rows (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowsfrozen.md) - Canonical HTML: /sandbox/scheduler/rowsfrozen.html. The Scheduler can freeze selected rows at the top and/or bottom of the viewport. Read more about [frozen rows](https://doc.daypilot.org/scheduler/frozen-rows/).
- [Progressive Row Rendering (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowprogressive.md) - Canonical HTML: /sandbox/scheduler/rowprogressive.html. This scheduler displays 300 resources, each with 3 children. The row headers are rendered progressively during scrolling (progressiveRowRendering: true). Read more about [progressive row rendering](https://doc.daypilot.org/scheduler/progressive-row-rendering/).
- [Resource Utilization (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/resourceutilization.md) - Canonical HTML: /sandbox/scheduler/resourceutilization.html. The grid cells display peak resource utilization calculated from a custom "percentage" event field. Read more about calculating [resource utilization](https://doc.daypilot.org/scheduler/resource-utilization/) [doc.daypilot.org].
- [Row Creating (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowcreating.md) - Canonical HTML: /sandbox/scheduler/rowcreating.html. You can add a new resource using the special row at the bottom. Read more about [row creating](https://doc.daypilot.org/scheduler/row-creating/) [doc.daypilot.org].
- [Row Editing (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowediting.md) - Canonical HTML: /sandbox/scheduler/rowediting.html. Edit the row text by clicking on the header. Read more about [row editing](https://doc.daypilot.org/scheduler/row-editing/) [doc.daypilot.org].
- [Row Filtering (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowfiltering.md) - Canonical HTML: /sandbox/scheduler/rowfiltering.html. You can filter the Scheduler rows using specified criteria in real time. This demo filters rows using the resource name. Read more about [row filtering](https://doc.daypilot.org/scheduler/row-filtering/).
- [Row Header Active Areas (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowheaderactiveareas.md) - Canonical HTML: /sandbox/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 displays a context menu on click. Read more about the [row header active areas](https://doc.daypilot.org/scheduler/row-header-active-areas/).
- [Row Header Columns (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowheadercolumns.md) - Canonical HTML: /sandbox/scheduler/rowheadercolumns.html. You can specify multiple row header columns that will display additional details about a row. Read more about [row header columns](https://doc.daypilot.org/scheduler/row-header-columns/) [doc.daypilot.org].
- [Row Header Hiding (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowheaderhiding.md) - Canonical HTML: /sandbox/scheduler/rowheaderhiding.html. You can hide and show the Scheduler row header using a built-in icon. Read more [row header hiding](https://doc.daypilot.org/scheduler/row-header-hiding/).
- [Row Header Scrollbar (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowheaderscrolling.md) - Canonical HTML: /sandbox/scheduler/rowheaderscrolling.html. When displaying many columns in the row header, you can specify a maximum row header width and enable a horizontal scrollbar. Read more the [horizontal scrollbar for row headers](https://doc.daypilot.org/scheduler/row-header-scrolling/).
- [Row Moving (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowmoving.md) - Canonical HTML: /sandbox/scheduler/rowmoving.html. The Scheduler supports moving rows in a tree hierarchy using drag and drop. Read more about [row moving](https://doc.daypilot.org/scheduler/row-moving/) [doc.daypilot.org].
- [Moving Rows Between Two Schedulers (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowmovingtwoschedulers.md) - Canonical HTML: /sandbox/scheduler/rowmovingtwoschedulers.html. You can [drag rows between two Scheduler components](https://doc.daypilot.org/scheduler/row-moving-between-schedulers/).
- [Row Selecting (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowselecting.md) - Canonical HTML: /sandbox/scheduler/rowselecting.html. Select a row row by clicking on the header. Select multiple rows using Ctrl + click or Shift + click. Read more about [row selecting](https://doc.daypilot.org/scheduler/row-selecting/) [doc.daypilot.org].
- [Row Header Columns (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rowsorting.md) - Canonical HTML: /sandbox/scheduler/rowsorting.html. You can sort the Scheduler rows using data from a selected column. Read more about [row sorting](https://doc.daypilot.org/scheduler/row-sorting/) [doc.daypilot.org].
- [Split Resources (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/split.md) - Canonical HTML: /sandbox/scheduler/split.html. You can specify sub-resources for a row, and split it into multiple rows vertically. Read more about [split resources](https://doc.daypilot.org/scheduler/split-resources/).
- [Sticky Parents (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/stickyparents.md) - Canonical HTML: /sandbox/scheduler/stickyparents.html. The Scheduler can make parent resource rows sticky and keep them visible at the top while scrolling. Read more about [sticky parents](https://doc.daypilot.org/scheduler/sticky-parents/).
- [Asynchronous Validation (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/asyncvalidation.md) - Canonical HTML: /sandbox/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/).
- [Group Concurrent Events (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/groupconcurrent.md) - Canonical HTML: /sandbox/scheduler/groupconcurrent.html. Read more about the [grouping concurrent events](https://doc.daypilot.org/scheduler/concurrent-event-groups/).
- [Dynamic Event Loading (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/dynamic.md) - Canonical HTML: /sandbox/scheduler/dynamic.html. Read more about [dynamic event loading](https://doc.daypilot.org/scheduler/dynamic-event-loading/) [doc.daypilot.org].
- [Event Active Areas (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventareas.md) - Canonical HTML: /sandbox/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 Containers (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventcontainers.md) - Canonical HTML: /sandbox/scheduler/eventcontainers.html. Event containers force events with the same container id to be rendered at the same vertical position within a row. Read more about [event containers](https://doc.daypilot.org/scheduler/event-containers/) [doc.daypilot.org].
- [Event Context Menu (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventmenu.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/eventcopying.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/eventcustomization.md) - Canonical HTML: /sandbox/scheduler/eventcustomization.html. Read more about [event customization](https://doc.daypilot.org/scheduler/event-customization/) [doc.daypilot.org].
- [Event Deleting (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventdeleting.md) - Canonical HTML: /sandbox/scheduler/eventdeleting.html. Read more about [event deleting](https://doc.daypilot.org/scheduler/event-deleting/) [doc.daypilot.org].
- [Event Filtering (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventfiltering.md) - Canonical HTML: /sandbox/scheduler/eventfiltering.html. Read more about [event filtering](https://doc.daypilot.org/scheduler/event-filtering/).
- [Event Height (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventheight.md) - Canonical HTML: /sandbox/scheduler/eventheight.html. Click on the event box to toggle its height.
- [Event Icons (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventicons.md) - Canonical HTML: /sandbox/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 Inline Editing (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventinlineediting.md) - Canonical HTML: /sandbox/scheduler/eventinlineediting.html. You can edit existing events inline (on click). You can also create new events inline (on a cell click or selecting multiple cells). Read more about [inline event editing](https://doc.daypilot.org/scheduler/inline-event-editing/).
- [Event Links (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventlinks.md) - Canonical HTML: /sandbox/scheduler/eventlinks.html. You can use links between Scheduler events to show dependencies. Links can be loaded from an API endpoint or created dynamically using drag and drop. Read more about the [event links](https://doc.daypilot.org/scheduler/event-links/).
- [Event Loading (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventloading.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/eventmoving.md) - Canonical HTML: /sandbox/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/).
- [Drag and Drop Event Moving over Non-Business Hours (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventmovingnonbusiness.md) - Canonical HTML: /sandbox/scheduler/eventmovingnonbusiness.html. Non-business and hidden cells are skipped during drag and drop event moving.
- [Event Moving between Two Schedulers (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventmovingtwoschedulers.md) - Canonical HTML: /sandbox/scheduler/eventmovingtwoschedulers.html. You can move events between two synchronized schedulers.
- [Event Multi-Moving (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventmultimoving.md) - Canonical HTML: /sandbox/scheduler/eventmultimoving.html. You can select multiple events (use Ctrl+click) and move all of them at once. Read more about [event multimoving](https://doc.daypilot.org/scheduler/event-multi-moving/) [doc.daypilot.org].
- [Event Multi-Resizing (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventmultiresizing.md) - Canonical HTML: /sandbox/scheduler/eventmultiresizing.html. You can select multiple events (use Ctrl+click) and resize all of them in time at once. Read more about [event multi-resizing](https://doc.daypilot.org/scheduler/event-multi-resizing/) [doc.daypilot.org].
- [Event Multi-Selecting (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventmultiselecting.md) - Canonical HTML: /sandbox/scheduler/eventmultiselecting.html. Select multiple events using Shift + mouse drag. Use Ctrl + click to add/remove events from selection. Read more about [selecting multiple events](https://doc.daypilot.org/scheduler/event-multi-selecting/).
- [Prevent Event Overlap (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventoverlapping.md) - Canonical HTML: /sandbox/scheduler/eventoverlapping.html. You can forbid [event overlapping](https://doc.daypilot.org/scheduler/event-overlapping/).
- [Event Phases (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventphases.md) - Canonical HTML: /sandbox/scheduler/eventphases.html. Read more about [event phases](https://doc.daypilot.org/scheduler/event-phases/).
- [Event Searching (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventsearching.md) - Canonical HTML: /sandbox/scheduler/eventsearching.html. The found event is focused and [selected](https://doc.daypilot.org/scheduler/event-selecting/) using the Scheduler API.
- [Event Selecting (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventselecting.md) - Canonical HTML: /sandbox/scheduler/eventselecting.html. Read more about [event selecting](https://doc.daypilot.org/scheduler/event-selecting/) [doc.daypilot.org].
- [Event Stacking Line Height (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventstackinglineheight.md) - Canonical HTML: /sandbox/scheduler/eventstackinglineheight.html. dp.eventStackingLineHeight is set to 30. This means each line of concurrent events will take 30% of its height.
- [Event Versions (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventversions.md) - Canonical HTML: /sandbox/scheduler/eventversions.html. Read more about the [event versions](https://doc.daypilot.org/scheduler/event-versions/).
- [External Drag and Drop (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/external.md) - Canonical HTML: /sandbox/scheduler/external.html. Read more about [external drag and drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/) [doc.daypilot.org].
- [Joint Events (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventsjoint.md) - Canonical HTML: /sandbox/scheduler/eventsjoint.html. [Joint events](https://doc.daypilot.org/scheduler/joint-events/) will be moved and resized together.
- [Milestones (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/milestones.md) - Canonical HTML: /sandbox/scheduler/milestones.html. Read more about [milestones](https://doc.daypilot.org/scheduler/milestones/).
- [Task Percent Complete (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventcomplete.md) - Canonical HTML: /sandbox/scheduler/eventcomplete.html. Read more about the [percent complete](https://doc.daypilot.org/scheduler/percent-complete/) indicator [doc.daypilot.org].
- [Queue of Unscheduled Tasks (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/queue.md) - Canonical HTML: /sandbox/scheduler/queue.html. Read more about [external drag and drop](https://doc.daypilot.org/scheduler/external-drag-and-drop/) [doc.daypilot.org].
- [Real-Time Drag and Drop Indicators (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/eventrealtime.md) - Canonical HTML: /sandbox/scheduler/eventrealtime.html
- [Cell Customization (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/cellcustomization.md) - Canonical HTML: /sandbox/scheduler/cellcustomization.html. You can write custom HTML to grid cells. You can also modify cell properties, such as background color, CSS class and IsBusiness status. Read more about [cell customization](https://doc.daypilot.org/scheduler/cell-customization/) [doc.daypilot.org].
- [Cell Width (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/cellwidth.md) - Canonical HTML: /sandbox/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.
- [Auto Cell Width (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/autocellwidth.md) - Canonical HTML: /sandbox/scheduler/autocellwidth.html. The cell width is calculated automatically to match the Scheduler width (cellWidth: "Auto"). This option prevents the horizontal scrollbar from appearing. Read more about the [auto cell width](https://doc.daypilot.org/scheduler/auto-cell-width/).
- [Crosshair (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/crosshair.md) - Canonical HTML: /sandbox/scheduler/crosshair.html. Read more about the [crosshair](https://doc.daypilot.org/scheduler/crosshair/) [doc.daypilot.org].
- [Disabled Cells (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/cellsdisabled.md) - Canonical HTML: /sandbox/scheduler/cellsdisabled.html. The dark cells are disabled and blocked for drag-and-drop operations. Read more about [disabled cells](https://doc.daypilot.org/scheduler/disabled-cells/).
- [Highlighting Unavailable Cells (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/unavailable.md) - Canonical HTML: /sandbox/scheduler/unavailable.html. Read more about [highlighting unavailable cells](https://doc.daypilot.org/scheduler/highlighting-unavailable-cells/) [doc.daypilot.org].
- [Weekend Highlighting (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/highlighting.md) - Canonical HTML: /sandbox/scheduler/highlighting.html. Read more about [cell customization](https://doc.daypilot.org/scheduler/cell-customization/) [doc.daypilot.org].
- [Infinite Scrolling (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/infinite.md) - Canonical HTML: /sandbox/scheduler/infinite.html. Read more about [infinite scrolling](https://doc.daypilot.org/scheduler/infinite-scrolling/).
- [Keyboard Navigation (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/keyboard.md) - Canonical HTML: /sandbox/scheduler/keyboard.html. Use arrows, Shift + arrows, <enter>. Read more about the [Scheduler keyboard access](https://doc.daypilot.org/scheduler/keyboard/).
- [Multi-Range Selecting (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/multirange.md) - Canonical HTML: /sandbox/scheduler/multirange.html. You can select multiple time ranges while holding Ctrl. Read more about [time range multi-selecting](https://doc.daypilot.org/scheduler/time-range-multi-selecting/).
- [Scrolling (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/scrolling.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/snaptogrid.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/timerangeselecting.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/navigator.md) - Canonical HTML: /sandbox/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 Pro for JavaScript Sandbox](/sandbox/scheduler/nextprevious.md) - Canonical HTML: /sandbox/scheduler/nextprevious.html. Read more about [next/previous buttons](https://doc.daypilot.org/scheduler/next-and-previous-buttons/) [doc.daypilot.org].
- [Excel Export (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/exportexcel.md) - Canonical HTML: /sandbox/scheduler/exportexcel.html. Read more about [client-side Excel export](https://doc.daypilot.org/scheduler/client-side-excel-export/).
- [JPEG Image Export (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/exportjpg.md) - Canonical HTML: /sandbox/scheduler/exportjpg.html. Read more about [client-side JPEG export](https://doc.daypilot.org/scheduler/client-side-jpeg-export/).
- [PNG Image Export (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/exportpng.md) - Canonical HTML: /sandbox/scheduler/exportpng.html. Read more about [client-side PNG export](https://doc.daypilot.org/scheduler/client-side-png-export/).
- [SVG Image Export (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/exportsvg.md) - Canonical HTML: /sandbox/scheduler/exportsvg.html. Read more about [client-side SVG export](https://doc.daypilot.org/scheduler/client-side-svg-export/).
- [Printing (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/exportprint.md) - Canonical HTML: /sandbox/scheduler/exportprint.html. Read more about [scheduler printing](https://doc.daypilot.org/scheduler/printing/).
- [Localization (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/localization.md) - Canonical HTML: /sandbox/scheduler/localization.html. Read more about the [scheduler localization](https://doc.daypilot.org/scheduler/localization/) [doc.daypilot.org].
- [JavaScript Scheduler | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/rtl.md) - Canonical HTML: /sandbox/scheduler/rtl.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/).
- [Message Bar (JavaScript Scheduler) | DayPilot Pro for JavaScript Sandbox](/sandbox/scheduler/messagebar.md) - Canonical HTML: /sandbox/scheduler/messagebar.html. Read more about the [message bar](https://doc.daypilot.org/scheduler/message-bar/) [doc.daypilot.org].

## Gantt

- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/index.md) - Canonical HTML: /sandbox/gantt/index.html. Customize the component using [Gantt Chart UI Builder](https://builder.daypilot.org/gantt) and download a ready-to-run project. Read more about the [JavaScript Gantt Chart](https://javascript.daypilot.org/gantt/).
- [Row Editing (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/rowediting.md) - Canonical HTML: /sandbox/gantt/rowediting.html. Read more about the [JavaScript Gantt Chart](https://javascript.daypilot.org/gantt/).
- [Task Filtering (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/rowfiltering.md) - Canonical HTML: /sandbox/gantt/rowfiltering.html. Read more about Gantt Chart [row/task filtering](https://doc.daypilot.org/gantt/row-filtering/).
- [Row Selecting (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/rowselecting.md) - Canonical HTML: /sandbox/gantt/rowselecting.html. Read more about [Gantt chart row selecting](https://doc.daypilot.org/gantt/row-selecting/).
- [Task Moving between Gantt Charts | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskmovingtwoganttcharts.md) - Canonical HTML: /sandbox/gantt/taskmovingtwoganttcharts.html. You can drag tasks (rows) between two Gantt Chart components. Read more about [row moving between Gantt Charts](https://doc.daypilot.org/gantt/row-moving-between-gantt-charts/).
- [External Drag and Drop (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/external.md) - Canonical HTML: /sandbox/gantt/external.html. You can [drag tasks from an external list](https://doc.daypilot.org/gantt/external-drag-and-drop-of-tasks/) to the Gantt chart.
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskbubble.md) - Canonical HTML: /sandbox/gantt/taskbubble.html. Read more about the [Gantt chart task bubbles](https://doc.daypilot.org/gantt/task-bubble/).
- [Moving Child Tasks (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskmovingchildren.md) - Canonical HTML: /sandbox/gantt/taskmovingchildren.html. The Gantt chart can [move task groups](https://doc.daypilot.org/gantt/group-moving/) along the time axis, including the child tasks. This option is enabled by default. You can disable it by setting [moveGroupChildren](https://api.daypilot.org/daypilot-gantt-movegroupchildren/) to false.
- [Task Creating (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskcreating.md) - Canonical HTML: /sandbox/gantt/taskcreating.html. You can create a new task using the last row. Read more about [task creating](https://doc.daypilot.org/gantt/task-creating/).
- [Moving Multiple Tasks at Once (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskmultimoving.md) - Canonical HTML: /sandbox/gantt/taskmultimoving.html. All selected tasks can be moved together when you drag one of them. You can select multiple tasks by holding down the Ctrl key and clicking on the tasks. Read more about [task multi-moving](https://doc.daypilot.org/gantt/task-multi-moving/).
- [Selecting Multiple Tasks (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskmultiselecting.md) - Canonical HTML: /sandbox/gantt/taskmultiselecting.html. You can select multiple tasks by holding down the Ctrl key and clicking on the tasks. Read more about [task multi-selecting](https://doc.daypilot.org/gantt/task-multi-selecting/).
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskresizing.md) - Canonical HTML: /sandbox/gantt/taskresizing.html. Read more about [Gantt chart task resizing](https://doc.daypilot.org/gantt/task-resizing/).
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/taskversions.md) - Canonical HTML: /sandbox/gantt/taskversions.html. Read more about the [Gantt task versions](https://doc.daypilot.org/gantt/task-versions/).
- [Progressive Task Rendering (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/progressive.md) - Canonical HTML: /sandbox/gantt/progressive.html. This Gantt chart displays 10,000 tasks. Read more about [progressive task rendering](https://doc.daypilot.org/gantt/progressive-task-rendering/).
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/exportexcel.md) - Canonical HTML: /sandbox/gantt/exportexcel.html. Read more about the [Gantt chart client-side image export](https://doc.daypilot.org/gantt/client-side-image-export/).
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/exportpng.md) - Canonical HTML: /sandbox/gantt/exportpng.html. Read more about the [Gantt chart client-side image export](https://doc.daypilot.org/gantt/client-side-image-export/).
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/exportsvg.md) - Canonical HTML: /sandbox/gantt/exportsvg.html. Read more about the [Gantt chart client-side image export](https://doc.daypilot.org/gantt/client-side-image-export/).
- [JavaScript Gantt Chart | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/links.md) - Canonical HTML: /sandbox/gantt/links.html. Read more about [Gantt chart task links](https://doc.daypilot.org/gantt/links/).
- [Auto Cell Width (JavaScript Gantt Chart) | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/autocellwidth.md) - Canonical HTML: /sandbox/gantt/autocellwidth.html. Read more about the [auto cell width](https://doc.daypilot.org/gantt/auto-cell-width/).
- [Angular Gantt Chart Component | DayPilot Pro for JavaScript Sandbox](/sandbox/gantt/angular.md) - Canonical HTML: /sandbox/gantt/angular.html. Read more about the [Angular Gantt chart component](https://doc.daypilot.org/gantt/angular/).

## Kanban

- [JavaScript Kanban | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/index.md) - Canonical HTML: /sandbox/kanban/index.html. Customize the component using [Kanban UI Builder](https://builder.daypilot.org/kanban) and download a ready-to-run project. Read more about [JavaScript Kanban](https://doc.daypilot.org/kanban/) [doc.daypilot.org].
- [Kanban Column Active Areas | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/columnactiveareas.md) - Canonical HTML: /sandbox/kanban/columnactiveareas.html. Read more about Kanban [column active areas](https://doc.daypilot.org/kanban/column-active-areas/) [doc.daypilot.org].
- [JavaScript Kanban Column Moving | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/columnmoving.md) - Canonical HTML: /sandbox/kanban/columnmoving.html. Read more about Kanban [column moving](https://doc.daypilot.org/kanban/column-moving/) [doc.daypilot.org].
- [Kanban Fixed Column Width | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/columnfixedwidth.md) - Canonical HTML: /sandbox/kanban/columnfixedwidth.html. You can switch to fixed column width using .columnWidthSpec = "Fixed".
- [Kanban Card Active Areas | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardactiveareas.md) - Canonical HTML: /sandbox/kanban/cardactiveareas.html. Read more about Kanban [card active areas](https://doc.daypilot.org/kanban/card-active-areas/) [doc.daypilot.org].
- [Kanban Card Auto Height | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardautoheight.md) - Canonical HTML: /sandbox/kanban/cardautoheight.html. Read more about Kanban [card auto height](https://doc.daypilot.org/kanban/card-auto-height/) [doc.daypilot.org].
- [Card Bubble (JavaScript Kanban) | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardbubble.md) - Canonical HTML: /sandbox/kanban/cardbubble.html. Hover over a card to see the bubble with the description. The content of the [card bubble](https://doc.daypilot.org/kanban/card-bubble/) can be defined statically or dynamically generated in the `onLoad` event handler.
- [Card Context Menu (JavaScript Kanban) | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardcontextmenu.md) - Canonical HTML: /sandbox/kanban/cardcontextmenu.html. Read more about [Kanban card context menu](https://doc.daypilot.org/kanban/card-context-menu/) [doc.daypilot.org].
- [Kanban Card Creating | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardcreating.md) - Canonical HTML: /sandbox/kanban/cardcreating.html. Read more about Kanban [card creating](https://doc.daypilot.org/kanban/card-creating/) [doc.daypilot.org].
- [Kanban Card CSS | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardcss.md) - Canonical HTML: /sandbox/kanban/cardcss.html. Read more about Kanban [card CSS](https://doc.daypilot.org/kanban/card-css/) [doc.daypilot.org].
- [Kanban Card Deleting | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/carddeleting.md) - Canonical HTML: /sandbox/kanban/carddeleting.html. Read more about Kanban [card deleting](https://doc.daypilot.org/kanban/card-deleting/) [doc.daypilot.org].
- [Kanban Card Moving | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardmoving.md) - Canonical HTML: /sandbox/kanban/cardmoving.html. Read more about Kanban [card moving](https://doc.daypilot.org/kanban/card-moving/) [doc.daypilot.org].
- [Kanban Card Moving | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/cardmovingcustomization.md) - Canonical HTML: /sandbox/kanban/cardmovingcustomization.html. This example displays a label with the target position during card moving. It prevents column skipping. Read more about Kanban [card moving customization](https://doc.daypilot.org/kanban/card-moving-customization/) [doc.daypilot.org].
- [External Drag and Drop (JavaScript Kanban) | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/external.md) - Canonical HTML: /sandbox/kanban/external.html. Read more about [external drag and drop](https://doc.daypilot.org/kanban/external-drag-and-drop/) [doc.daypilot.org].
- [JavaScript Kanban Swimlanes | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/swimlanes.md) - Canonical HTML: /sandbox/kanban/swimlanes.html. Read more about Kanban [swim lanes](https://doc.daypilot.org/kanban/swim-lanes/) [doc.daypilot.org].
- [Kanban Swimlane Moving | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/swimlanemoving.md) - Canonical HTML: /sandbox/kanban/swimlanemoving.html. Read more about Kanban [swim lane moving](https://doc.daypilot.org/kanban/swim-lane-moving/) [doc.daypilot.org].
- [Kanban Swimlane Collapsing | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/swimlanecollapsing.md) - Canonical HTML: /sandbox/kanban/swimlanecollapsing.html. Read more about Kanban [swim lane collapsing](https://doc.daypilot.org/kanban/swim-lane-collapsing/) [doc.daypilot.org].
- [JavaScript Kanban | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/rowheadercolumns.md) - Canonical HTML: /sandbox/kanban/rowheadercolumns.html. You can specify row header columns using the rowHeaderColumns property.
- [Angular Kanban Component | DayPilot Pro for JavaScript Sandbox](/sandbox/kanban/angular.md) - Canonical HTML: /sandbox/kanban/angular.html. Read more about the [Angular Kanban component](https://doc.daypilot.org/kanban/angular/).