DayPilot.Calendar.showNonBusiness

Controls whether generated timeline cells outside business time remain on the Calendar vertical axis.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.showNonBusiness

Default Value

true

Behavior

The default true keeps non-business time visible. Set false to omit non-business cells. With minute or hour cells, business time is determined by businessBeginsHour, businessEndsHour and businessWeekends. With scale: "Day", whole weekend rows are omitted when businessWeekends is false; weekdays retain their full day unless showNonBusinessForceHours is enabled.

Filtering changes the axis shared by all columns. It does not delete events; events wholly inside omitted intervals have no visible height. An explicit onIncludeTimeCell handler controls inclusion instead of automatic filtering. Manual timeline arrays are used as supplied.

Use eventMoveSkipNonBusiness to choose working-time duration during moving independently of whether non-business time is visible.

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: "Hour",
  businessBeginsHour: 8,
  businessEndsHour: 18,
  businessWeekends: false,
  showNonBusiness: false
});
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: "Hour",
  businessBeginsHour: 8,
  businessEndsHour: 18,
  businessWeekends: false,
  showNonBusiness: false
};

React

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

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

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="Hour"
    :businessBeginsHour="8"
    :businessEndsHour="18"
    :businessWeekends="false"
    :showNonBusiness="false"
  />
</template>

See Also

Hiding Non-Business Time · DayPilot.Calendar Class