Inline Event Editing

The JavaScript Scheduler component supports editing events using an input box that is displayed inline, at the event location.

You can map the event click event to trigger the inline editing mode or you can activate it programmatically using the events.edit() method.

JavaScript

To map the click event to inline editing, set the eventClickHandling property to "Edit".

To save the new text value of the event to the database, use the onEventEdit or onEventEdited event handlers:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp", {
    eventClickHandling: "Edit",
    onEventEdited: async (args) => {
      const id = args.e.id();
      const params = {
        text: args.newText
      };
      const {data} = await DayPilot.Modal.post(`/api/event/${id}`, params);
      dp.message("Event text changed to " + args.newText);
    },
    // ...
  });
  dp.init();
</script>

The following Scheduler configuration example lets you implement a "create-and-edit" feature.

When you select a time range (e.g., by clicking a cell) it will immediately create a blank event there and activates the inline editing using the events.edit() method:

{
  onTimeRangeSelected: (args) => {
    dp.events.add({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: "",
        tags: {justCreated: true}
    });
    dp.clearSelection();
    dp.events.edit(e);
  },
  onEventEdit: (args) => {
    if (args.e.tag("justCreated")) {
        if (args.canceled || args.newText === "") {
            dp.events.remove(args.e);
        }
        args.e.data.tags.justCreated = false;
    }
  },
  // ...
}

Note that args.canceled is available in onEventEdit and onEventEdited since version 8.1.1914.

See also:

• DayPilot.Scheduler.eventClickHandling

• DayPilot.Scheduler.onEventEdit

• DayPilot.Scheduler.onEventEdited

Demo:

• Inline Editing of Scheduler Events (Demo)

<DayPilot:DayPilotScheduler runat="server" id="DayPilotScheduler1"
  ...
  EventClickHandling="Edit"
  EventEditHandling="CallBack"
  OnEventEdit="DayPilotScheduler1_EventEdit"
/>

protected void DayPilotScheduler1_EventEdit(object sender, DayPilot.Web.Ui.Events.EventEditEventArgs e)
{
  UpdateEventText(e.Id, e.NewTest);  // your method
  DayPilotScheduler1.DataSource = LoadData();  // your method
  DayPilotScheduler1.DataBind();
  DayPilotScheduler1.Update();
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  BackendUrl = ResolveUrl("~/Scheduler/Backend"),
  ...
  EventClickHandling = EventClickHandlingType.Edit,
  EventEditHandling = EventEditHandlingType.CallBack
})

protected override void OnEventEdit(EventEditArgs e)
{
  new EventManager(Controller).UpdateText(e.Id, e.NewText);
  UpdateWithMessage("Event updated.");
}