JavaScript Scheduler


DayPilot JavaScript/HTML5 scheduler component displayes a timeline view for multiple resources. Supports AngularReactVue.jsjQuery and AngularJS 1.x.

Demo Download

JavaScript Scheduler 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:

  • Windows 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.