Event Editing

Options:

• Inline editing
• Using a modal dialog (see below)

You can also open the modal dialog from the event context menu.

JavaScript

Modal Dialog

See also the following tutorials on using the DayPilot modal dialog with the Scheduler to edit events:

• HTML5 Scheduler and Modal Dialog (jQuery, PHP)
• JavaScript Scheduler: How to Edit Multiple Fields using a Modal Dialog

Quick example:

<div id="dp"></div>

<script type="text/javascript">
    var dp = new DayPilot.Scheduler("dp");

    // ...
    
    dp.onEventClick = function(args) {
        var form = [
          { name: "Text", id: "text" }
        ];
        
        var data = args.e.data;
        
        DayPilot.Modal.form(form, data).then(function(modal) {
            if (modal.canceled) {
                return;
            }
            args.e.text(modal.result.text);
            dp.events.update(args.e);
        });
    };
                    
    dp.init();

</script>

Simple Prompt

dp.onEventClick = async args => {
  const modal = await DayPilot.Modal.prompt("Event name:", args.e.text());
  if (modal.canceled) { return; }
  args.e.text(modal.result);
  dp.events.update(args.e);
};

API: onEventClick.

Click a reservation to edit its name. After an accepted, nonempty result, the handler calls the event's text() setter and events.update(). Cancellation leaves the event unchanged.

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"}],
    onEventClick: async args => {
      const modal = await DayPilot.Modal.prompt("Reservation name:", args.e.text());
      if (modal.canceled || !modal.result) { return; }
      args.e.text(modal.result);
      args.control.events.update(args.e);
    }
  };

}

Tutorial

• Angular Scheduler: Modal Dialog for Event Editing

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"}]}
      onEventClick={async args => {
        const modal = await DayPilot.Modal.prompt("Reservation name:", args.e.text());
        if (modal.canceled || !modal.result) { return; }
        args.e.text(modal.result);
        args.control.events.update(args.e);
      }}
    />
  </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 onEventClick = async args => {
  const modal = await DayPilot.Modal.prompt("Reservation name:", args.e.text());
  if (modal.canceled || !modal.result) { return; }
  args.e.text(modal.result);
  args.control.events.update(args.e);
};

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  ClientObjectName="dps1"
  EventClickHandling="JavaScript"
  EventClickJavaScript="editEvent(e.id())"
/>

<script type="text/javascript">
  function editEvent(id) {
    var modal = new DayPilot.Modal();
    modal.top = 60;
    modal.width = 300;
    modal.opacity = 70;
    modal.border = "10px solid #d0d0d0";
    modal.closed = function() { 
      if(this.result == "OK") { 
        dps.commandCallBack('refresh'); 
      }
      dps.clearSelection();
   };
    modal.height = 250;
    modal.zIndex = 100;
    modal.showUrl("Edit.aspx?id=" + id);
  } 
</script>

protected void DayPilotScheduler1_Command(object sender, DayPilot.Web.Ui.Events.CommandEventArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      DayPilotScheduler1.DataSource = loadData(); // your method
      DayPilotScheduler1.DataBind();
      DayPilotScheduler1.Update();
      break;
  }
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.JavaScript,
  EventClickJavaScript = "editEvent(e.id())"
})

<script type="text/javascript">
  function editEvent(id) {
    var modal = new DayPilot.Modal();
    modal.top = 60;
    modal.width = 300;
    modal.opacity = 70;
    modal.border = "10px solid #d0d0d0";
    modal.closed = function() { 
      if(this.result == "OK") { 
        dps.commandCallBack('refresh'); 
      }
      dps.clearSelection();
   };
    modal.height = 250;
    modal.zIndex = 100;
    modal.showUrl("Edit/" + id);
  } 
</script>

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
    case "refresh":
      UpdateWithMessage("Refreshed");
      break;
  }
}

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 data-loading method

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