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

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(args.data.start).getDatePart();
  var endDay = new DayPilot.Date(args.data.end).getDatePart();

  args.data.areas = [];
  for (var d = startDay; d <= endDay; d = d.addDays(1)) {
    var isWeekend = d.getDayOfWeek() == 0 || d.getDayOfWeek() == 6;
    if (isWeekend) {
      continue;
    }
    var area = {
      start: d.addHours(9),
      end: d.addHours(17),
      top: 0,
      height: 5,
      backColor: "red"
    };
    args.data.areas.push(area);
  }
};

See also:
https://doc.daypilot.org/scheduler/event-active-areas/

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

dp.durationBarVisible = false;

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.

http://javascript.daypilot.org/sandbox/

Thanks Dan for the update as well as the response!

Richard