Update Events without Reloading

API: events.find, events.update.

Find the loaded event by ID, change its label with text() and pass it to events.update() to redraw it. The examples rename Planning without replacing or fetching the full collection.

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

Angular

The button method obtains the Scheduler API through @ViewChild and this.scheduler.control.

import {Component, ViewChild} from "@angular/core";
import {DayPilot, DayPilotModule, DayPilotSchedulerComponent} from "daypilot-pro-angular";

@Component({
  selector: "app-scheduler-example",
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="action0()">Rename Planning</button>
    <daypilot-scheduler [config]="config" #scheduler></daypilot-scheduler>
  `
})
export class SchedulerExampleComponent {
  @ViewChild("scheduler") scheduler!: DayPilotSchedulerComponent;
  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"}]
  };
  async action0() {
    const dp = this.scheduler.control;
    const event = dp.events.find(1);
    if (event) { event.text("Confirmed planning"); dp.events.update(event); }
  }
}

React

Use controlRef to retain the Scheduler API in useRef, then query and update the event from the click handler.

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

export default function SchedulerExample() {
  const scheduler = useRef(null);
  async function action0() {
    const dp = scheduler.current;
    const event = dp.events.find(1);
    if (event) { event.text("Confirmed planning"); dp.events.update(event); }
  }
  return <div>
    <button onClick={action0}>Rename Planning</button>
    <DayPilotScheduler
      controlRef={control => { scheduler.current = control; }}
      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"}]}
    />
  </div>;
}

Vue

The Scheduler's template ref provides scheduler.value.control for the button function.

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

const scheduler = ref(null);
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"}];
async function action0() {
  const dp = scheduler.value.control;
  const event = dp.events.find(1);
  if (event) { event.text("Confirmed planning"); dp.events.update(event); }
}
</script>

<template>
  <div>
    <button @click="action0">Rename Planning</button>
    <DayPilotScheduler ref="scheduler"
      :startDate="startDate"
      :days="days"
      :scale="scale"
      :timeHeaders="timeHeaders"
      :resources="resources"
      :events="events"
    />
  </div>
</template>

JavaScript

It is possible to modify events using the client-side events API.

The events will be updated immediately.

var e = dps.events.find('123');
e.text('New Event Name'); // update the event text
dps.events.update(e);

var e = dps.events.find('124');
e.text('New Event Name'); // update the event text
dps.events.update(e);

ASP.NET WebForms

Event Moving and Resizing

If you use EventResizeHandling=Notify and EventMoveHandling=Notify the Scheduler will update the events immediately on the client side and the server will be notified after the change. Standard OnEventResize and OnEventMove event will be fired.

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  EventMoveHandling="Notify" 
  OnEventMove="DayPilotScheduler1_EventMove" 
  EventResizeHandling="Notify"
  OnEventResize="DayPilotScheduler1_EventResize"
  />

Process the event in the code behind.

protected void DayPilotScheduler1_EventMove(object sender, DayPilot.Web.Ui.Events.EventMoveEventArgs e)
{
  // update the database here
  UpdateWithMessage("Event was moved.");
}

Custom Event Changes

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...  
  OnNotify="DayPilotScheduler1_Notify" 
  OnEventUpdate="DayPilotScheduler1_EventUpdate"
  OnEventAdd="DayPilotScheduler1_EventAdd" 
  OnEventRemove="DayPilotScheduler1_EventRemove"
  />

You can also submit custom changes done using JavaScript:

var e = dps.events.find('123');
e.text('New Event Name'); // update the event text
dps.events.update(e).notify();

As soon as you call .notify() it will fire EventUpdate event on the server side:

protected void DayPilotScheduler1_EventUpdate(object sender, EventUpdateEventArgs e)
{
  // do the database changes here
}

You can submit multiple changes at once:

var e = dps.events.find('123');
e.text('New Event Name'); // update the event text
dps.events.update(e).queue();

var e = dps.events.find('124');
e.text('New Event Name'); // update the event text
dps.events.update(e).queue();

dps.queue.notify();

All the submitted events are available in e.Queue in OnNotify.

protected void DayPilotScheduler1_Notify(object sender, DayPilot.Web.Ui.Events.Scheduler.NotifyEventArgs e)
{
  foreach(DayPilotEventArgs ea in e.Queue)
  {
      if (ea is EventAddEventArgs)
      {
          EventAddEventArgs em = (EventAddEventArgs)ea;
          DayPilotScheduler1_EventAdd(sender, em);

      }
      else if (ea is EventMoveEventArgs)
      {
          EventMoveEventArgs em = (EventMoveEventArgs) ea;
          DayPilotScheduler1_EventMove(sender, em);

      }
      else if (ea is EventRemoveEventArgs)
      {
          EventRemoveEventArgs em = (EventRemoveEventArgs) ea;
          DayPilotScheduler1_EventRemove(sender, em);
      }
      else if (ea is EventUpdateEventArgs)
      {
          DayPilotScheduler1_EventUpdate(sender, (EventUpdateEventArgs) ea);
      }
  }

  string msg = String.Format("Queue saved ({0} actions).", e.Queue.Count);
  DayPilotScheduler1.UpdateWithMessage(msg);
}

ASP.NET MVC

Event Moving and Resizing

If you use EventResizeHandling=Notify and EventMoveHandling=Notify the Scheduler will update the events immediately on the client side and the server will be notified after the change. Standard OnEventResize and OnEventMove event will be fired.

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

Don't call Update() in these event handlers if you don't want to refresh all events.

protected override void OnEventMove(EventMoveArgs e)
{
  new EventManager(Controller).EventMove(e.Id, e.NewStart, e.NewEnd, e.NewResource);
  // no Update() or UpdateWithMessage() call
}

Custom Event Changes

You can also submit custom changes done using JavaScript:

var e = dps.events.find('123');
e.text('New Event Name'); // update the event text
dps.events.update(e).notify();

Availability

Availability of this feature in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java