Highlighting Business Hours using CSS

Business hours cells are marked with *_cell_business class

html5-scheduler-business-hours-css.png

Customizing the Business Hours

You can set the daily business hours using BusinessBeginsHour and BusinessEndsHour properties.

JavaScript example

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.businessBeginsHour = 8;
  dp.businessEndsHour = 20;
  dp.init();
</script>

Weekends are non-business by default. You can change it using BusinessWeekends property.

JavaScript example:

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  // ...
  dp.businessWeekends = true;
  dp.init();
</script>

You can also set the business status for each grid cell individually using onBeforeCellRender event handler:

<div id="dp"></div>

<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  // ...
dp.onBeforeCellRender = function(args) { if (args.cell.resource === "A") { var hour = args.cell.start.getHours(); if (10 <= hour && hour < 15) { args.cell.business = true; } else { args.cell.business = false; } } };
  dp.init();
</script>

Hiding Non-Business Hours

You can hide non-business hours using ShowNonBusiness property. See also hiding non-business hours.