Event Resizing Validation

 You can validate the target size using the onEventResizing event handler that is fired during resizing in real-time (see also event resizing customization). The real-time validation needs to be performed synchronously on the client side.

This example rejects a target interval that overlaps any part of a weekend. Multi-day intervals are allowed when they contain only weekdays.

onEventResizing: (args) => {
    const { start, end } = args;

    const isWeekend = (date) => {
        const dayOfWeek = date.getDayOfWeek();
        return dayOfWeek === 0 || dayOfWeek === 6;  // Sunday or Saturday
    };

    let currentDate = start.getDatePart();
    let overlapsWeekend = false;

    while (currentDate < end) {
        if (isWeekend(currentDate)) {
            overlapsWeekend = true;
            break;
        }
        currentDate = currentDate.addDays(1);
    }

    if (overlapsWeekend) {
        args.allowed = false;
    }
},

After resizing, you can validate the target size using the onEventResize event handler and cancel it if it doesn’t meet the rules.

This validation can be asynchronous, and you can call external services (e.g., a server-side API endpoint) to perform the validation.

onEventResize: async (args) => {
    args.async = true;
    const params = {
      id: args.e.id(),
      newStart: args.newStart,
      newEnd: args.newEnd,
      resource: args.e.resource()
    };
    try {
const {data} = await DayPilot.Http.post("/api/checkResizeTarget", params);

    if (data.error) {
        dp.message(data.message);
        args.preventDefault();
    }
    
} catch {
  args.preventDefault();
  await DayPilot.Modal.alert("The change could not be saved or validated.");
} finally { args.loaded(); }
},

API: onEventResizing.

The framework examples reject any resized interval that occupies part of a weekend. Their exclusive end boundary means that ending at Saturday midnight is allowed when the preceding interval contains only weekdays.

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-01",
    days: 30,
    scale: "Day",
    timeHeaders: [{groupBy: "Month"}, {groupBy: "Day", format: "d"}],
    resources: [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}],
    events: [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}],
    onEventResizing: args => {
      for (let day = args.start.getDatePart(); day < args.end; day = day.addDays(1)) {
        if (day.getDayOfWeek() === 0 || day.getDayOfWeek() === 6) { args.allowed = false; break; }
      }
    }
  };

}

React

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

export default function SchedulerExample() {

  return <div>

    <DayPilotScheduler
      startDate={"2026-11-01"}
      days={30}
      scale={"Day"}
      timeHeaders={[{groupBy: "Month"}, {groupBy: "Day", format: "d"}]}
      resources={[{id: "A", name: "Room A"}, {id: "B", name: "Room B"}]}
      events={[{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}]}
      onEventResizing={args => {
        for (let day = args.start.getDatePart(); day < args.end; day = day.addDays(1)) {
          if (day.getDayOfWeek() === 0 || day.getDayOfWeek() === 6) { args.allowed = false; break; }
        }
      }}
    />
  </div>;
}

Vue

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

const startDate = "2026-11-01";
const days = 30;
const scale = "Day";
const timeHeaders = [{groupBy: "Month"}, {groupBy: "Day", format: "d"}];
const resources = [{id: "A", name: "Room A"}, {id: "B", name: "Room B"}];
const events = [{id: 1, text: "Planning", resource: "A", start: "2026-11-03", end: "2026-11-06"}, {id: 2, text: "Delivery", resource: "B", start: "2026-11-08", end: "2026-11-11"}];
const onEventResizing = args => {
  for (let day = args.start.getDatePart(); day < args.end; day = day.addDays(1)) {
    if (day.getDayOfWeek() === 0 || day.getDayOfWeek() === 6) { args.allowed = false; break; }
  }
};

</script>

<template>
  <div>

    <DayPilotScheduler
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
      :onEventResizing="onEventResizing"
    />
  </div>
</template>