JavaScript Scheduler

javascript scheduler component html5

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

Drag and Drop

javascript scheduler 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

javascript scheduler 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 styling 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

javascript scheduler windows css theme

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

javascript scheduler 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

Read more about common UI tasks.

Large Data Sets

javascript scheduler large data set

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

javascript scheduler user experience message

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

javascript scheduler localization

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

javascript scheduler small footpring

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

javascript scheduler 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

Read more about resources.

Flexible Timeline

javascript scheduler scale non linear

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

html5 scheduler for touch devices ipad iphone android

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

Cell Customization

javascript scheduler grid 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

javascript scheduler 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.

More Features

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.

php shift planning tutorial javascript html5 mysql

More tutorials:

See all JavaScript scheduler tutorials at code.daypilot.org.

Angular Scheduler Tutorials

See all Angular Scheduler tutorials at code.daypilot.org.

React Scheduler Tutorials

See all React Scheduler tutorials at code.daypilot.org.

Vue Scheduler Tutorials

See all Vue Scheduler tutorials at code.daypilot.org.

See Also