DayPilot.Calendar.eventMoveSkipNonBusiness

Preserves an event's business-time duration when the user moves it, skipping non-business intervals while calculating its new end.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.eventMoveSkipNonBusiness

Default Value

false

Behavior

The default false preserves elapsed duration. When enabled, the Calendar preserves the source event's business duration using the target calendar's business intervals. For example, a booking from Monday 16:00 to Tuesday 10:00 contains four working hours with an 8–18 business day.

This choice is independent of showNonBusiness. It also applies to touch moving. Set moveSkipNonBusinessDisabled: true on an individual event's data to preserve elapsed duration for that event.

Business intervals follow the Calendar's business settings and cell business classification. A move with no source business duration or no usable target business interval is rejected. Explicit onEventMoving adjustments and validation still apply.

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,
  showNonBusiness: false,
  eventMoveSkipNonBusiness: 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: "Hour",
  businessBeginsHour: 8,
  businessEndsHour: 18,
  showNonBusiness: false,
  eventMoveSkipNonBusiness: 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="Hour"
  businessBeginsHour={8}
  businessEndsHour={18}
  showNonBusiness={false}
  eventMoveSkipNonBusiness={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="Hour"
    :businessBeginsHour="8"
    :businessEndsHour="18"
    :showNonBusiness="false"
    :eventMoveSkipNonBusiness="true"
  />
</template>

See Also

Hiding Non-Business Time · DayPilot.Calendar Class