Highlighting Business Hours using CSS

Business hours cells are marked with *_cell_business class

javascript scheduler component business hours css

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 the showNonBusiness property. See also hiding non-business hours.

Tutorials