DayPilot.Calendar.showNonBusinessForceHours

Applies business-hour boundaries to generated day-scale cells, so each retained date can represent only its working interval.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.showNonBusinessForceHours

Default Value

false

Behavior

With scale set to "Day", true changes each generated cell's start and end to businessBeginsHour and businessEndsHour. Use an increasing, same-day hour range, such as 8–18. The cell keeps its configured pixel height.

The option applies even when showNonBusiness is true. Combine it with showNonBusiness: false and businessWeekends set to false to omit weekends as well. Other scales and explicit manual timelines are unaffected. An inclusion callback receives the adjusted dates and can change them.

These examples configure an existing DayPilot Pro Calendar. Keep its event data and other options.

JavaScript

const calendar = new DayPilot.Calendar("dp", {
  startDate: "2028-04-03",
  viewType: "Resources",
  days: 7,
  columns: [{id: "A", name: "Cedar room"}],
  scale: "Day",
  businessBeginsHour: 8,
  businessEndsHour: 18,
  showNonBusiness: false,
  showNonBusinessForceHours: true
});
calendar.init();

Angular

Add the configuration to an existing Calendar component.

<daypilot-calendar [config]="config"></daypilot-calendar>

import {DayPilot} from "daypilot-pro-angular";

config: DayPilot.CalendarConfig = {
  startDate: "2028-04-03",
  viewType: "Resources",
  days: 7,
  columns: [{id: "A", name: "Cedar room"}],
  scale: "Day",
  businessBeginsHour: 8,
  businessEndsHour: 18,
  showNonBusiness: false,
  showNonBusinessForceHours: true
};

React

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

<DayPilotCalendar
  startDate="2028-04-03"
  viewType="Resources"
  days={7}
  columns={[{id: "A", name: "Cedar room"}]}
  scale="Day"
  businessBeginsHour={8}
  businessEndsHour={18}
  showNonBusiness={false}
  showNonBusinessForceHours={true}
/>

Vue

<script setup lang="ts">
import {DayPilot, DayPilotCalendar} from "daypilot-pro-vue";
const columns: NonNullable<DayPilot.CalendarConfig["columns"]> = [{id: "A", name: "Cedar room"}];
</script>

<template>
  <DayPilotCalendar
    startDate="2028-04-03"
    viewType="Resources"
    :days="7"
    :columns="columns"
    scale="Day"
    :businessBeginsHour="8"
    :businessEndsHour="18"
    :showNonBusiness="false"
    :showNonBusinessForceHours="true"
  />
</template>

See Also

Hiding Non-Business Time · DayPilot.Calendar Class