JavaScript Scheduler

javascript-scheduler.png

DayPilot JavaScript/HTML5 scheduler widget allows creating a timeline view for multiple resources. Includes a jQuery plugin.

Demo Download

JavaScript Scheduler Tutorials

  • AJAX Scheduler for JavaScript
    Drag and drop, loading events from the server, hover event details, sample PHP backend.
  • HTML5 Hotel Room Booking
    Sample PHP web application for handling hotel reservations. Drag and drop support, room and reservations status, editing using a modal dialog. MySQL and SQLite support.
  • HTML5 Scheduler
    Resources loaded from the server and grouped by category, custom time headers, automatic cell width, drag and drop, sample PHP backend.
  • HTML5 Scheduler with Dynamic Event Loading
    Events are loaded from the server during scrolling. Allows handling large data sets. PHP backend.
  • HTML5 Timesheet
    Scheduler switched to the timesheet mode, displaying days on the Y axis and hours of day on X axis. PHP backend.
  • HTML5 Scheduler and Modal Dialog
    Using DayPilot.Modal helper with the Scheduler to display a modal dialog for creating and editing events. PHP backend.
  • HTML5 Scheduler for Touch Devices (iPad, iPhone, Android)
    Customizing the Scheduler behavior on touch devices (icons event moving, resizing, editing, context menu, info bubble; touch gestures). PHP backend. 
  • HTML5 Tennis Court Reservation
    Using the Scheduler to display a reservation grid for multiple tennis courts. End users can create new reservations and staff can manage them. PHP backend.
  • HTML5 Doctor Appointment Scheduling
    Scheduler displaying a timeline with shift and appointment details for multiple doctors. PHP backend.
  • HTML5 Scheduler PDF Export
    Client-side export of the Scheduler to a PDF document. Export one month per page. Pure client-side solution.

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.

Angular 2 Scheduler Tutorials

See Also

Drag and Drop

javascript-scheduler-drag-and-drop.png

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

javascript-scheduler-rapid-prototyping.png

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 code.daypilot.org to save time.

Read more about the rapid scheduler prototyping.

Scheduler Themes

javascript-scheduler-windows-8-theme.png

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

javascript-scheduler-common-ui-tasks.png

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

javascript-scheduler-large-data-sets.png

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-message.png

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-i18n.png

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-footprint.png

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

jquery.png

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" }
    ]
  });
</script>

Resources

javascript-scheduler-resources.png

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.png

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

javascript-scheduler-touch-html5.png

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

Cell Customization

javascript-scheduler-grid-cell-customization.png

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.png

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.

Event Bulk Loading

See also Loading events.

dp.events.list = [
{
  start: "2013-03-25T00:00:00",
  end: "2013-03-27T00:00:00",
  id: "1",
  resource: "A",
  text: "Event 1"
},
{
  start: "2013-03-26T12:00:00",
  end: "2013-03-27T00:00:00",
  id: "2",
  resource: "B",
  text: "Event 2"
}
];
dp.update();

Adding an Event to the Scheduler

See also Client-side event API.

var e = new DayPilot.Event({
  start: new DayPilot.Date("2013-03-25T00:00:00"),
  end: new DayPilot.Date("2013-03-27T00:00:00"),
  id: DayPilot.guid(),
  resource: "A",
  text: "Event"
});

dp.events.add(e);

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java