JavaScript Scheduler

JavaScript Scheduler Component

The JavaScript Scheduler is a visual UI component that shows a timeline view for multiple resources. The time is displayed on the horizontal (X) axis and resources are displayed as rows (on the vertical axis).

The behavior of the Scheduler component can be customized using a rich JavaScript API.

You can customize the appearance of the JavaScript Scheduler using CSS. There are several CSS themes included in the download package. You can also design your own

To quickly explore the basic configuration options you can use the online UI Builder configurator. It will let you see the configuration changes in a live preview. You can also generate and download a project with the selected configuration. This way you can start your proof-of-concept implementation in minutes.

DayPilot Scheduler supports popular frameworks, such as Angular, React, and Vue.

Download Live Demo

Drag and Drop

The scheduler includes out-of-the-box support for drag and drop operations:

Create events
Move events
Resize events
Drag events from an external list (unscheduled events)
Drag items from desktop
Drag items into events
Drag items from events
Select multiple events using Shift + drag
Push existing events at the target location
Swap events using drag and drop
The Scheduler viewport scrolls automatically during drag and drop

Read more about drag and drop scheduler support.

Rapid Prototyping

Create the first prototype in a few minutes.

UI Builder: Generate and download a pre-configured project for JavaScript, Angular, React or Vue.
Theme Designer: Create a CSS theme that matches your site/app.
Single JavaScript file required.
Only 6 lines of code necessary for the basic setup.
No external stylesheet required: The default CSS theme included.
Start with sample projects from code.daypilot.org to save time.

Read more about the rapid scheduler prototyping.

Scheduler Themes

The scheduler supports full CSS styling. You can change the look using one of the included themes:

Theme 8
Blue
White
Green
Transparent
Traditional

You can create a custom theme using the online WYSIWYG CSS theme designer.

Common UI Tasks

The scheduler has built-in UI support for common tasks:

Create events
Move events
Resize events
Edit events
Delete events
Select events (Ctrl + click, Shift + click, Shift + drag)
Add action using a context menu
Show details on event hover
Copy and paste
Create, select, move, resize multiple events at once
Drag events from list of unscheduled events

Large Data Sets

The scheduler is designed to handle thousands of events:

Progressive event rendering
On-demand event loading using AJAX
Dynamic resource tree nodes

Read more about displaying large data sets using the scheduler.

User Experience

The scheduler lets you build great user experience using the built-in UI elements:

Integrated message bar
Event status icons
Inline event action hints
Crosshair highlighting the current position

Scheduler Internationalization

The scheduler supports customization of all texts, custom date and time formats, 12/24 hour clock. Built-in support for 34 locales.

Small Footprint

DayPilot doesn't require any third party JavaScript library which reduces the total footprint.

Minified and gzipped JavaScript size: 268 kB
Minified JavaScript size: 876 kB

You can reduce the footprint to 133 kB (minified, gzipped) by including only the files required for the Scheduler component.

Read more about the scheduler small footprint.

Resources

You can customize the Y axis of the scheduler that displays the resource list:

Arrange resources in groups and subgroups (resource tree)
Dynamic node children loading
Additional resource header columns

Frozen Rows

Selected Scheduler rows can be frozen either at the top or the bottom of the Scheduler grid. These frozen rows won't scroll with the rest of the content, remaining stationary instead.

Frozen rows can help in user interface design, as they can present content that needs to remain fixed. Here are some common use cases:

Unassigned events: Use a frozen row at the top of the Scheduler to display events scheduled at specific times that are not yet assigned to any particular resource (person, location, machine).
Summary: You can use frozen rows to display summary information for each column, such as totals, utilization charts, number of occupied and available slots, or warnings.
Key Dates/Times: If your grid represents a long timeline, you can use a frozen row to highlight key dates or times, such as deadlines or milestones, ensuring these crucial points are always visible.
Reference: You can pin a key resource row at the top to display reference data.
UI Controls: You can use a frozen row to enable actions related to date/time column (such as selecting time columns using drag and drop).

Dependency Links

You can use links to connect events/tasks in the Scheduler.

Links can highlight related events (see the shift scheduling tutorial), show task dependencies or point to the next workflow step (see the production workflow scheduling tutorial).
You can specify custom line style, color, width or add a CSS class.
Users can can create links using drag and drop.
Link paths can be curved or right-angled.

Flexible Timeline

You can select one of the pre-defined timeline scale units or create a custom timeline:

Minutes
Hours
Days
Weeks
Months
Quarters
Years

You can customize the time header rows, groups and the date/time format.

HTML
CSS class
dimensions
background color
duration bar color
duration bar background
event actions (moving, resizing, clicking, etc.)
event bubble (hover detail box)