Event Deleting

Event deleting can be implemented using one of the following ways (or their combination):

• built-in delete icon

• context menu

• custom active area icon

JavaScript Scheduler

1. Built-In Delete Icon

The JavaScript Scheduler component includes a built-in delete icon.

• The delete icon is not enabled by default. To enable it, use eventDeleteHandling: "Update". See also the eventDeleteHandling property in the API documentation.

• Clicking the icon will fire the onEventDelete event. In this event handler, you can cancel the default action by calling args.preventDefault().

• After the default action, the Scheduler will fire the onEventDeleted event handler.

onEventDelete: async args => {
  args.preventDefault();
  const modal = await DayPilot.Modal.confirm("Delete this event?");
  if (!modal.canceled) { args.control.events.remove(args.e); }
}

2. Context Menu

The following example defines a context menu with a "Delete" item that removes the event from the Scheduler using the events.remove() method.

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp");
  dp.contextMenu = new DayPilot.Menu({
    items: [
      {text:"Delete", onClick: args => { const e = args.source; dp.events.remove(e); } }
    ]
  });
  // ...
  dp.init();
</script>

3. Active Area

This example will add an active area that will delete the event on click/tap.

• The icon will be permanently visible on touch devices. On other devices, it will be visible on hover. (visibility: "TouchVisible")

• It uses the CSS from the default theme (scheduler_default) to display the delete icon. (cssClass: "scheduler_default_event_delete")

• Adding action: "None" ensures that the click/tap event will not bubble to the event box.

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp");
  // ...
  dp.onBeforeEventRender = args => {
    args.data.areas = [
      {
        right: 5,
        top: 5,
        width: 17,
        height: 17,
        cssClass: "scheduler_default_event_delete",
        action: "None",
        visibility: "TouchVisible",
        onClick: args => { dp.events.remove(args.source); }
      }
    ];
  };
  dp.init();
</script>

API: eventDeleteHandling, onEventDelete.

The examples ask for confirmation before deleting an event. The handler calls args.preventDefault() before awaiting the dialog, then removes the event only when the user confirms.

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"}],
    eventDeleteHandling: "Update",
    onEventDelete: async args => {
      args.preventDefault();
      const modal = await DayPilot.Modal.confirm("Delete this reservation?");
      if (!modal.canceled) { args.control.events.remove(args.e); }
    }
  };

}

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"}]}
      eventDeleteHandling={"Update"}
      onEventDelete={async args => {
        args.preventDefault();
        const modal = await DayPilot.Modal.confirm("Delete this reservation?");
        if (!modal.canceled) { args.control.events.remove(args.e); }
      }}
    />
  </div>;
}

Vue

Pass the asynchronous handler through :onEventDelete; the DayPilot arguments provide the event and its owning control.

<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 eventDeleteHandling = "Update";
const onEventDelete = async args => {
  args.preventDefault();
  const modal = await DayPilot.Modal.confirm("Delete this reservation?");
  if (!modal.canceled) { args.control.events.remove(args.e); }
};

</script>

<template>
  <div>

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

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  EventDeleteHandling="CallBack" 
/>

protected void DayPilotScheduler1_EventDelete(object sender, EventDeleteEventArgs e)
{
  DeleteEvent(e.Id);
  setDataSourceAndBind();
  DayPilotScheduler1.UpdateWithMessage("Event deleted.");
}

<DayPilot:DayPilotMenu ID="DayPilotMenu1" runat="server" CssClassPrefix="menu_default">
  <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="editEvent(e.value());" />
  <DayPilot:MenuItem Text="Delete" Action="Callback" Command="Delete" />
</DayPilot:DayPilotMenu>

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ...
  ContextMenuID="DayPilotMenu1" 
/>

protected void DayPilotScheduler1_EventMenuClick(object sender, DayPilot.Web.Ui.Events.EventMenuClickEventArgs e)
{
  // delete the event in the database

  setDataSourceAndBind();
  DayPilotScheduler1.Update();
}

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.eventDeleteCallBack(e);"));
}

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.eventDeleteCallBack(e);").Visible());
}

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
  ...
  EventDeleteHandling = EventDeleteHandlingType.CallBack,
})

protected override void OnEventDelete(EventDeleteArgs e)
{
  new EventManager(Controller).EventDelete(e.Id);
  UpdateWithMessage("Event deleted.");
}

@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  CssClassPrefix = "menu_default",
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "editEvent(e.value());"},
    new DayPilot.Web.Mvc.MenuItem { Text = "Delete", Action = MenuItemAction.CallBack, Command = "Delete"}
  }
})

@Html.DayPilotScheduler("dps", new DayPilotSchedulerConfig {
...
ContextMenu = "menu",

protected override void OnEventMenuClick(EventMenuClickArgs e)
{
  switch (e.Command)
  {
    case "Delete":
      new EventManager(Controller).EventDelete(e.Id);
      Update();
      break;
  }
}

protected override void OnBeforeEventRender(BeforeEventRenderArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dps.eventDeleteCallBack(e);"));
}