search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

How-To: Alter Duration Over Date Range (Scheduler)

Asked by Richard
6 years ago.


Please take the attached pictures into account. The one image illustrates the DayPilot scheduler control and the other the desired outcome.

Is it possible, to change the duration of an event that spans over multiple days, that is only shows the busy time? In other words, if we were to take the following event:

Start: 2016-09-01 -> End: 2016-09-05 -> Hours: 08:00:00

The above event states that someone is busy for 8 hours a day, starting on the 1st and ending on the 5th.

Is something like this possible? And if so, how would one accomplish this?

Thanks again!

Answer posted by Dan Letecky [DayPilot]
6 years ago.

It's possible to highlight the busy hours inside an event using custom active areas.

Example that highlights 9am - 5pm (on workdays) inside an event:

dp.onBeforeEventRender = function(args) {
  var startDay = new DayPilot.Date(;
  var endDay = new DayPilot.Date(; = [];
  for (var d = startDay; d <= endDay; d = d.addDays(1)) {
    var isWeekend = d.getDayOfWeek() == 0 || d.getDayOfWeek() == 6;
    if (isWeekend) {
    var area = {
      start: d.addHours(9),
      end: d.addHours(17),
      top: 0,
      height: 5,
      backColor: "red"

See also:

You may also want to turn off the default duration bar:

dp.durationBarVisible = false;
Comment posted by Dan Letecky [DayPilot]
6 years ago.

And an update:

The next release (8.3) will include an option not to count the non-business cells into the event duration when moving it using drag and drop. It will automatically adjust the start and end so that the total duration (in business hours) remains the same.

However, this works on a cell level - a cell has to be marked as either business or non-business. In you screenshot I can see that you display one day per cell and only a part of that cell is business. You would have to split the day into three cells so that this could work. It also doesn't affect how the events are displayed.

This is already implemented in the sandbox and you can enable it using eventMoveSkipNonBusiness = true.

Comment posted by Richard
6 years ago.

Thanks Dan for the update as well as the response!


This question is more than 3 months old and has been closed. Please create a new question if you have anything to add.