Client-Side Event API

You can add, remove, and update events on the client side.

Overview

The JavaScript event API supports adding, finding, updating and removing individual events. findRecurrent() and the Notify workflow below belong to the integrated server editions; the JavaScript Scheduler receives expanded recurrence occurrences.

• events.add(e, data)
• events.find(id)
• events.findRecurrent(masterId, time)
• events.remove(e, data)
• events.update(e, data)

See also

• Update Events without Reloading
• Notify Event Model
• Notify Event Handler
• Notify Queue

JavaScript

Adding Events

Events can be added to the Scheduler using events.add() method.

var e = new DayPilot.Event({
  start:new DayPilot.Date(), 
  end:(new DayPilot.Date()).addHours(5), 
  id: DayPilot.guid(), 
  text: "New Event", resource:'E'
});
dps.events.add(e);

Updating Events

Events can be updated using events.update() method. The object representing the event can be acquired using events.find().

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

Removing Events

Events can be removed using events.remove() method. The object representing the event can be acquired using events.find().

var e = dps.events.find('123');
dps.events.remove(e);

API: events.find, events.update.

The buttons below rename Planning without reloading the collection. events.find() returns a DayPilot.Event; call its text() setter and then events.update() to redraw it.

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

Angular

Use @ViewChild to obtain the Scheduler component. The click handler accesses its API through 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("Planning approved"); dp.events.update(event); }
  }
}

React

The controlRef callback stores the Scheduler API in useRef. The button handler reads scheduler.current when clicked.

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("Planning approved"); 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

Attach ref="scheduler" to the component and access scheduler.value.control from the button's @click handler.

<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("Planning approved"); 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>

var e = new DayPilot.Event({
  start:new DayPilot.Date(), 
  end:(new DayPilot.Date()).addHours(5), 
  id: DayPilot.guid(), 
  text: "New Event", resource:'E'
});
dps.events.add(e).notify();

protected void DayPilotScheduler1_EventAdd(object sender, EventAddEventArgs e)
{
  // create the event in the database using custom method
  createEvent(e.Event.Value, e.Event.Start, e.Event.End, e.Event.Resource, e.Event.Text);  // your method for updating the database

  // display a message to the user
  DayPilotScheduler1.UpdateWithMessage("Added.");
}

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

protected void DayPilotScheduler1_EventUpdate(object sender, EventUpdateEventArgs e)
{
  createEvent(e.Event.Value, e.Event.Start, e.Event.End, e.Event.Resource, e.Event.Text); // your method for updating the database

  // display a message to the user
  DayPilotScheduler1.UpdateWithMessage("Updated.");
}

var e = dps.events.find('123');
dps.events.remove(e).notify();

protected void DayPilotScheduler1_EventRemove(object sender, EventRemoveEventArgs e)
{
  removeEvent(e.Event.Value);  // your method for updating the database

  // display a message to the user
  DayPilotScheduler1.UpdateWithMessage("Deleted.");
}