DayPilot Pro for JavaScript 7.9

Release date: September 30, 2014 (build 7.9.1163)

Gantt Chart

javascript gantt chart


  • Task types (tasks, task groups, milestones)
  • Task group modes: auto (start and end calculated from children), manual (fixed start and end)
  • Percent complete indicator (tasks, task groups)
  • Full CSS styling
  • Task links (Start to start, start to finish, finish to start, finish to finish)
  • Drag and drop link creating
  • Drag and drop row moving (including tree hierarchy support)
  • Link customization (color, style, width, CSS class)
  • Multiple row header columns
  • jQuery plugin
  • AngularJS plugin

Read more about the Gantt chart.

Gantt Task Hierarchy

javascript gantt chart task hierarchy

Read more about Gantt task hierarchy.

Gantt Task Types


html5 gantt task type regular

Task Group

html5 gantt task type group


html5 gantt task type milestone

A task is marked as a group automatically if it has children.

Milestone is a special type of task that has no duration - it can be used to mark a certain date/time point.

Read more about Gantt task types.

Gantt CSS Styling

All elements can be styled using CSS.

See a list of CSS classs used by the Gantt chart.

Gantt Themes

javascript gantt css theme designer

You can use the online Gantt CSS theme designer to create your own theme.

Event Overlap Prevention (Scheduler)

javascript scheduler event overlap

Real-time client-side feedback (special CSS class is applied when the target position is not allowed).

Read more about event overlapping.

Progressive Row Rendering (Scheduler)

Heavy optimization of row rendering.

  • .progressiveRowRendering (boolean) - enables progressive rendering; default value is true
  • .progressiveRowRenderingPreload (number) - number of rows to be preloaded in each direction (up, down); default value is 25

Drag and Drop Row Moving (Scheduler)

javascript scheduler drag and drop row moving

Read more about row moving.

jQuery Plugin Options (Scheduler)

Support for "events" and "scrollTo".

Concurrent Event Grouping (Scheduler)

javascript scheduler event grouping

The concurrent events can be grouped into a single box. 

Read more about concurrent event groups.

Cell Sweeping Customization (Scheduler)

The cell sweeping has been already enabled in the previous releases. 

  • Now you can turn it off using .cellSweeping property
  • You can configure the number of cell that remain rendered (beyond the visible viewport) using .cellSweepingCacheSize property.

Row Header Scrolling (Scheduler)

javascript scheduler row header scrolling

You can enable a horizontal scrollbar for row headers using .rowHeaderScrolling property.

  • The value specified using .rowHeaderWidth will be used for the total width.
  • Column width auto-fit is still supported.

Date-Only Event End Support (Scheduler)

The new .eventEndSpec property lets you specify the event as date only (it will be interpreted as the end of that day).

Default behavior

The end date will be interpreted as an exact time point.

dp.eventEndSpec = "DateTime"; // default = [ { id: 1, start: "2015-01-01", // equals to "2015-01-01T00:00:00" end: "2015-01-02", // equals to "2015-01-01T00:00:00" resource: "A" } ];

End specified as Date only

dp.eventEndSpec = "Date"; = [
  id: 1,
  start: "2015-01-01", // equals to "2015-01-01T00:00:00"
  end: "2015-01-01",// equals to "2015-01-01T00:00:00", will be interpreted as "2015-01-02T00:00:00"
  resource: "A"

AngularJS Plugin (Scheduler)

javascript scheduler angularjs

Read more about AngularJS Scheduler Plugin.

AngularJS Plugin (Calendar)

javascript event calendar angularjs

Read more about AngularJS Event Calendar Plugin.

AngularJS Plugin (Month)

javascript monthly event calendar angularjs

Read more about AngularJS Monthly Event Calendar Plugin.




  • property added (supported in the Scheduler)



  • DayPilot.Bubble.hideOnClick (true) property added



  • DayPilot.Scheduler(id, options) options parameter added


  • DayPilot.Scheduler.onRowMoving event added
  • DayPilot.Scheduler.onRowHeaderColumnResized event added
  • DayPilot.Scheduler.onBeforeGroupRender event added
  • DayPilot.Scheduler.onEventMove/args.newStart can be modified
  • DayPilot.Scheduler.onEventMove/args.newEnd can be modified
  • DayPilot.Scheduler.onEventResize/args.newStart can be modified
  • DayPilot.Scheduler.onEventResize/args.newEnd can be modified
  • DayPilot.Scheduler.onTimeRangeSelect/args.newStart can be modified
  • DayPilot.Scheduler.onTimeRangeSelect/args.newEnd can be modified
  • DayPilot.Scheduler.onBeforeHeaderRender/args.header.cssClass added
  • DayPilot.Scheduler.onEventClick/args.ctrl added
  • DayPilot.Scheduler.onEventClicked/args.ctrl added


  • method added


  • DayPilot.Scheduler.rowHeaderScrolling (false) property added
  • DayPilot.Scheduler.cellSweeping (true) property added
  • DayPilot.Scheduler.cellSweepingCacheSize (1000) property added
  • DayPilot.Scheduler.progressiveRowRendering (true) property added
  • DayPilot.Scheduler.progressiveRowRenderingPreload (25) property added
  • DayPilot.Scheduler.groupConcurrentEvents (false) property added
  • DayPilot.Scheduler.groupConcurrentEventsLimit (1) property added
  • DayPilot.Scheduler.onRowHeaderColumnResized event added
  • DayPilot.Scheduler.eventEndSpec ("DateTime") property added
  • DayPilot.Scheduler.blockOnCallBack (false) property added
  • DayPilot.Scheduler.allowEventOverlap (true) property added


  • jQuery Scheduler plugin accepts "events" and "scrollTo" options
  • AngularJS plugin added


  • [Scheduler] Crosshair performance improved (Chrome). (build 924)
  • [Scheduler] onRowMoving and action disabling. (build 926)
  • [Scheduler] Updating height after adding events. (build 932)
  • [Scheduler] Row moving position indicator CSS styling: *_rowmove_position_before, *_rowmove_position_after,*_rowmove_position_child, *_rowmove_position_forbidden. (build 933)
  • [Scheduler] Message bar hidden during drag and drop moving. (build 940)
  • [Scheduler] Use dp.rows.find("B").events.all() to find all events in a specific row. (build 941)
  • Menu: Default CSS theme adjusted to support automatic width. (build 950)
  • [Scheduler] Themes updated with drag and drop indicators, delete icon. (build 969)
  • [Calendar] Themes updated with delete icon, scrolling indicators. (build 970)
  • [Month] Themes updated with delete icon. (build 970)
  • [Bubble] hideOnClick property added (default value is true). (build 991)
  • [Scheduler] AfterRender reads custom data during init. (build 994)
  • Default themes moved to common.js and merged into a single stylesheet. (build 1012)
  • [Scheduler] args.ctrl available in onEventClick, onEventClicked. (build 1028)
  • Notified events make a proper copy of the event object (the original state). (build 1035)
  • [Month] args.header.cssClass supported in onBeforeHeaderRender. (build 1044)
  • [Scheduler] Allow changing newStart, newEnd in onEventMove. (build 1047)
  • [Scheduler] Allow changing newStart, newEnd in onEventResize. (build 1048)
  • [Scheduler] Allow changing start, end in onTimeRangeSelect. (build 1048)
  • AngularJS demo added. (build 1069)
  • [Scheduler] blockOnCallBack property (ASP.NET, MVC). (build 1070)
  • [Scheduler] onRowHeaderColumnResized event added (args.column). (build 1075)
  • [Scheduler] supported. (build 1078)
  • [Scheduler] groupConcurrentEventsLimit property (build 1080)
  • [Scheduler], (build 1081)
  • [Calendar] AngularJS support added. (build 1082)
  • [Month] AngularJS support added. (build 1082)
  • AngularJS plugin using elements instead of attributes. (build 1083)
  • [Scheduler] progressiveRowRendering, progressiveRowRenderingPreload (build 1092)
  • [Scheduler] Concurrent event group CSS (*_event_group). (build 1097)
  • [Scheduler] onBeforeGroupRender (concurrent event group box customization). (build 1098)
  • [Scheduler] cellSweeping (true), cellSweepingCacheSize (1000) (build 1102)
  • [Scheduler] RowHeaderWidthAutoFit optimizations. (build 1107)
  • [Bubble] Not displaying empty HTML received from the server. (build 1111)
  • [Scheduler] jQuery plugin supports "events" and "scrollTo" in options. (build 1113)
  • [Scheduler] Progressive row rendering demo. (build 1122)
  • [Scheduler] events.all() method added. (build 1123)
  • [Scheduler] Row header scrolling. (build 1126)
  • [Scheduler] Purging progressively rendered rows outside of view plus buffer. (build 1132)
  • [Scheduler] Checking itline limits when invoking cell bubble. (build 1132)
  • [Calendar] options parameters supported in constructor. jQuery options support "events", and "scrollToHour". (build 1137)
  • [Month] options parameters supported in constructor. jQuery options support "events". (build 1137)


  • [Scheduler] Forbidden vertical event moving fixed (broken during autoscroll). (build 934)
  • [Scheduler] Forbidden horizontal event moving fixed (broken during autoscroll). (build 935)
  • [Scheduler] Forbidden event moving fixed (broken during dragOutAllowed). (build 936)
  • [Scheduler] Error on registering the built-in stylesheet in IE8 when there are too many stylesheets (>32) - fixed. (build 937)
  • [Scheduler] Resizing shadow position fixed (restricted event moving). (build 942)
  • [Scheduler] Don't allow clientState to be set to during callback (fixed). (build 944)
  • [Scheduler] Time header click event - end date fixed. (build 946)
  • [Calendar] Touch swiping fixed. (build 948)
  • [Scheduler] Updating floating events when the control is hidden - JS error fixed. (build 963)
  • [Scheduler] onBeforeCellRender - args.cell.start, args.cell.end fixed (when onIncludeCell is applied). (build 989)
  • [Calendar] Day offset and cell start and end fixed for heightSpec="BusinessHoursNoScroll". (build 1000)
  • [Scheduler] Infinite loop in .update() fixed (when startDate includes a time part). (build 1029)
  • [Scheduler] Resource header and grid desynced after .update - fixed. (build 1030)
  • [Calendar] Setting fontColor for events in cssOnly mode fixed. (build 1031)
  • [Scheduler] Zero-duration event moving shadow fixed. (build 1045)
  • [Scheduler] Updating auto cell width after row header column resize (fixed). (build 1076)
  • [Scheduler] Checking separator div parent before deleting (fixed). (build 1090)
  • [Scheduler] Loading of events with non-matching resource id fixed. (build 1101)
  • [Scheduler] Not saving the control state to the _state hidden field anymore. (build 1102)
  • [Scheduler] Right mouse button click detection fixed (IE8). (build 1112)
  • [Scheduler] RowHeaderWidthAutoFit fixed for single column and progressive row rendering. (build 1118)
  • [Scheduler] Expand/collapse clicking fixed. (build 1119)
  • [Scheduler] Expand/collapse row header scroll position fixed. (build 1120)
  • [Scheduler] Row header updating fixed (with collapsed nodes). (build 1124)
  • [Scheduler] Days view fixed (optimized event loading). (build 1133)
  • [Month] Height fixed during .update(). (build 1137)
  • [Scheduler] Event groups and event selecting interop fixed. (build 1138)