Hiding Non-Business Hours

It is possible to hide cells outside of business hours (specified using businessBeginsHour and businessEndsHour) using showNonBusiness property.

You can also hide selected time columns or generate a custom timeline.

JavaScript

See also DayPilot.Scheduler.onIncludeTimeCell and hiding time columns.

Hiding the predefined non-business hours:

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

<script>
  var dp = new DayPilot.Scheduler("dp");
  dp.businessBeginsHour = 9;
  dp.businessEndsHour = 18;
  dp.showNonBusiness = false;
  // ...
  dp.init();

</script>

Column hiding customization:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onIncludeTimeCell = function(args) {
    if (args.cell.start.getDayOfWeek() === 0 || args.cell.start.getDayOfWeek() === 6) { // hide Saturdays, Sundays
      args.cell.visible = false;
    }
  };
  // ...
  dp.init();
</script>

Demo

• JavaScript Scheduler: Hiding Non-Business Hours Demo

Tutorial

• JavaScript Scheduler: Skip Non-Business Cells during Drag and Drop

API: businessBeginsHour, businessEndsHour, showNonBusiness.

The examples show only weekday hours from 9 AM to 6 PM using showNonBusiness: false. Hidden hours disappear from the shared timeline for every resource.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

import {Component} from "@angular/core";
import {DayPilot, DayPilotModule} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    
    <daypilot-scheduler [config]="config"></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  config: DayPilot.SchedulerConfig = {
    startDate: "2026-11-03",
    days: 7,
    scale: "Hour",
    timeHeaders: [{groupBy: "Day"}, {groupBy: "Hour"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}],
    businessBeginsHour: 9,
    businessEndsHour: 18,
    showNonBusiness: false
  };

}

React

import React from "react";
import {DayPilot, DayPilotScheduler} from "daypilot-pro-react";

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-03"}
      days={7}
      scale={"Hour"}
      timeHeaders={[{groupBy: "Day"}, {groupBy: "Hour"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}]}
      businessBeginsHour={9}
      businessEndsHour={18}
      showNonBusiness={false}
    />
  </div>;
}

Vue

<script setup>
import {DayPilot, DayPilotScheduler} from "daypilot-pro-vue";

const startDate = "2026-11-03";
const days = 7;
const scale = "Hour";
const timeHeaders = [{groupBy: "Day"}, {groupBy: "Hour"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03T09:00:00", end: "2026-11-03T12:00:00"}];
const businessBeginsHour = 9;
const businessEndsHour = 18;
const showNonBusiness = false;

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :businessBeginsHour="businessBeginsHour"
      :businessEndsHour="businessEndsHour"
      :showNonBusiness="showNonBusiness"
    />
  </div>
</template>

<DayPilot:DayPilotScheduler
  ...
  Scale="Day"
  ShowNonBusiness="false"
/>

<DayPilot:DayPilotScheduler
  ...
  BusinessBeginsHour="9"
  BusinessEndsHour="18"
  ShowNonBusiness="false"
  OnIncludeCell="DayPilotScheduler1_IncludeCell"
/>

protected void DayPilotScheduler1_IncludeCell(object sender, IncludeCellEventArgs e)
{
  if (e.Start.Hour == 12)
  {
      e.Visible = false;
  }
}

<DayPilot:DayPilotScheduler
  ...
  BusinessBeginsHour="9"
  BusinessEndsHour="18"
  ShowNonBusiness="false"
  OnBeforeCellRender="DayPilotScheduler1_BeforeCellRender"
/>

protected void DayPilotScheduler1_BeforeCellRender(object sender, DayPilot.Web.Ui.Events.BeforeCellRenderEventArgs e)
{
  if (e.Start.Hour == 12)
  {
    e.IsBusiness = false;
  }
}