JavaScript Scheduler


The JavaScript Scheduler is a visual HTML5 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 AngularReactVue.jsjQuery and AngularJS 1.x.

Demo Download

JavaScript Scheduler Tutorials

Featured Tutorial: 

  • PHP Shift Planning
    This tutorial shows how to build a PHP application for visual shift scheduling. You can plan shift assignments for multiple locations. JavaScript/HTML5 frontend and MySQL fatabase.


More tutorials:

See all JavaScript scheduler tutorials at

Angular Scheduler Tutorials

See all Angular scheduler tutorials at

Vue.js Scheduler Tutorials

React Scheduler Tutorials

AngularJS Scheduler Tutorials

  • AngularJS Scheduler
    Using Scheduler in an AngularJS application. Uses the built-in AngularJS plugin. PHP backend.
  • AngularJS Doctor Appointment Scheduling
    More complex AngularJS application for scheduling doctor appointments. Includes public patient interface and private scheduling interface. PHP backend.
  • AngularJS Hotel Room Booking
    AngularJS application for managing hotel room reservations. Supports drag and drop, room status, reservation status. PHP backend with SQLite and MySQL support.
  • AngularJS Timesheet
    AngularJS web application that displays a timesheet for a team of people working on multiple projects. It uses automatic AngularJS data bindings to display the timesheet records. Includes a sample project with PHP/SQLite backend.

See all AngularJS scheduler tutorials at

See Also

Scheduler UI Builder


Create a quick proof of concept using Scheduler UI Builder. You can use this visual tool to configure the Scheduler appearance and properties and generate a downloadable project.

Drag and Drop


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

  • Event moving
  • Event resizing
  • Event creating
  • Drag and drop from an external list
  • Auto-scrolling the scheduler viewport during drag and drop

Read more about drag and drop scheduler support.

Rapid Prototyping


Create the first prototype in a few minutes

  • Single JavaScript file include required.
  • Only 6 lines of code necessary for the basic setup.
  • No styling required: The default CSS theme included.
  • Quick CSS theme design - quickly create a CSS theme that matches your site/app using an online designer.
  • Start with sample projects at 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.

Read more about scheduler themes.

Common UI Tasks


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

  • Event editing
  • Event deleting
  • Event selecting
  • Event context menu
  • Event hover details
  • Event copy and paste
  • Event creating
  • Event moving
  • Event resizing
  • Drag and drop from a list of unscheduled events

Read more about common UI tasks.

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

Read more about the user experience.

Scheduler Internationalization


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

Read more about internationalization.

Small Footprint


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

  • Minified and gzipped JavaScript size: 109 KB
  • Minified JavaScript size: 482 KB

You can reduce the footprint to 54 KB (minified, gzipped) by including only the components required for the scheduler.

Read more about the scheduler small footprint.

jQuery Scheduler Plugin


DayPilot is a standalone library without any third party dependencies but it includes a jQuery scheduler plugin.

Quick example:

<div id="dp"></div>

<script type="text/javascript">
  var dp = $("#dp").daypilotScheduler({
    resources: [
     { name: "Room A", id: "A" },
     { name: "Room B", id: "B" },
     { name: "Room C", id: "C" }



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

Read more about resources.

Flexible Timeline


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

  • Minutes
  • Hours
  • Days
  • Weeks
  • Months
  • Years

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

Read more about the flexible timeline.

Mobile Support


The scheduler supports mobile devices, including iPad, iPhone, iPod Touch (iOS) and Android devices.

Cell Customization


Customize cell properties such as width, height, HTML, CSS, background color, background image.

The scheduler includes built-in support for marking non-business hours/days (weekends).

Read more about cell customization.

Event Customization


You can customize the scheduler event properties, such as:

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

Read more about event customization.