DayPilot.Calendar.scaleManualLimitBeyond

Controls whether a moved event may extend past the end of a manual timeline.

Available in DayPilot Pro for JavaScript since 2026.4.7150.

Declaration

DayPilot.Calendar.scaleManualLimitBeyond

Default Value

true

Behavior

With the default true, manual-timeline moving is limited by the displayed timeline end. Set false to allow the event's end to extend beyond that boundary. This option applies to event moving with scale "Manual"; it does not generate extra timeline cells or change the displayed range.

Selection, resizing and application validation remain separate controls. Use onEventMoving when a move must also satisfy an application-specific date limit.

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: "Day",
  scale: "Manual",
  heightSpec: "Full",
  timeline: [
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ],
  scaleManualLimitBeyond: 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: "Day",
  scale: "Manual",
  heightSpec: "Full",
  timeline: [
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ],
  scaleManualLimitBeyond: false
};

React

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

<DayPilotCalendar
  startDate="2028-04-03"
  viewType="Day"
  scale="Manual"
  heightSpec="Full"
  timeline={[
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ]}
  scaleManualLimitBeyond={false}
/>

Vue

<script setup lang="ts">
import {DayPilot, DayPilotCalendar} from "daypilot-pro-vue";
const timeline: NonNullable<DayPilot.CalendarConfig["timeline"]> = [
    {start: "2028-04-03T08:00:00", end: "2028-04-03T09:00:00", height: 40},
    {start: "2028-04-03T10:00:00", end: "2028-04-03T11:30:00", height: 90},
    {start: "2028-04-03T11:30:00", end: "2028-04-03T12:00:00", height: 30}
  ];
</script>

<template>
  <DayPilotCalendar
    startDate="2028-04-03"
    viewType="Day"
    scale="Manual"
    heightSpec="Full"
    :timeline="timeline"
    :scaleManualLimitBeyond="false"
  />
</template>

See Also

Nonlinear Timeline · DayPilot.Calendar Class