Event Resizing

Scheduler events can be resized using drag and drop.

See Also

• Event Resizing Customization

• Event Resizing Validation

• Event Multi-Resizing

JavaScript

Drag and drop event resizing is enabled by default (eventResizeHandling = "Update")

See also

• DayPilot.Scheduler.onEventResize

• DayPilot.Scheduler.onEventResized

You can customize the resizing behavior using onEventResizing event handler.

Example

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onEventResized = function (args) {
    dp.message("Resized: " + args.e.text());

    // your own AJAX call to the server to notify it about the change
  };
  // ...
  dp.init();
</script>

API: onEventResized.

After a local resize, onEventResized sends the updated event to the application endpoint. The examples report a failed save but leave the resized event visible; production persistence may need retry or rollback handling.

The framework examples use DayPilot Pro. For installation, see the Angular, React or Vue Scheduler guide.

Angular

The asynchronous persistence handler is part of config and receives the updated event in args.e.

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"}],
    onEventResized: async args => {
      try { await DayPilot.Http.put("/api/events/" + encodeURIComponent(args.e.id()), args.e.data); }
      catch { await DayPilot.Modal.alert("Saving failed. The local change is still visible."); }
    }
  };

}

React

Supply the function as the onEventResized prop on DayPilotScheduler.

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"}]}
      onEventResized={async args => {
        try { await DayPilot.Http.put("/api/events/" + encodeURIComponent(args.e.id()), args.e.data); }
        catch { await DayPilot.Modal.alert("Saving failed. The local change is still visible."); }
      }}
    />
  </div>;
}

Vue

Bind :onEventResized to the function declared in <script setup>.

<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 onEventResized = async args => {
  try { await DayPilot.Http.put("/api/events/" + encodeURIComponent(args.e.id()), args.e.data); }
  catch { await DayPilot.Modal.alert("Saving failed. The local change is still visible."); }
};

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  EventResizeHandling = "CallBack"
  OnEventResize="DayPilotScheduler1_EventResize" 
/>

protected void DayPilotScheduler1_EventResize(object sender, DayPilot.Web.Ui.Events.EventResizeEventArgs e)
{
  // update the database
  DbUpdateEvent(e.Id, e.NewStart, e.NewEnd);

  // reload events and refresh the scheduler on the client side
  DayPilotScheduler1.DataSource = LoadData();  // your method
  DayPilotScheduler1.DataBind();
  DayPilotScheduler1.UpdateWithMessage("Event resized.");
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  EventResizeHandling = EventResizeHandlingType.CallBack
})

protected override void OnEventResize(EventResizeArgs e)
{
  new EventManager(Controller).EventResize(e.Id, e.NewStart, e.NewEnd);
  Update();
}

protected override void OnFinish()
{
  // only load the data if an update was requested by an Update() call
  if (UpdateType == CallBackUpdateType.None)
  {
    return;
  }

  Events = new EventManager(Controller).FilteredData(StartDate, EndDate).AsEnumerable();  // your method for loading data

  DataStartField = "start";
  DataEndField = "end";
  DataTextField = "text";
  DataIdField = "id";
  DataResourceField = "resource";
}