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

JavaScript Scheduler

1. Built-In Delete Icon

javascript scheduler event 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.

<div id="dp"></div>
<script>
  const dp = new DayPilot.Scheduler("dp");
  dp.eventDeleteHandling = "Update";
  dp.onEventDelete = args => {
    if (!confirm("Do you really want to delete this event?") {
      args.preventDefault();
    }
  };
  dp.onEventDeleted = args => {
    // API call to delete the event on the server side
    // ...
    dp.message("Deleted");
  };
  dp.init();
</script>

2. Context Menu

javascript scheduler event delete 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>

ASP.NET WebForms

1. Built-In Delete Icon

Enable event deleting:

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

Handle EventDelete event:

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

2. Context Menu

Create a context menu:

<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>

Link it to the Scheduler:

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

The items with Action = "CallBack" will fire EventMenuClick event on the server side:

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

  setDataSourceAndBind();
  DayPilotScheduler1.Update();
}

3. Active Area

You can also use active areas.

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);"));
}

These sample classes (event_action_delete and event_action_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it.

Clicking this active area will fire EventDelete handler on the server side using a callback.

You can make the icon permanently visible by adding .Visible() call

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());
}

ASP.NET MVC

1. Built-In Delete Icon

Enable event deleting using EventDeleteHandling property:

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

Clicking the icon will fire EventDelete handler on the server side:

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

2. Context Menu

You need to define the menu (from Demo/Views/Scheduler/ContextMenu.aspx):

@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"}
  }
})

Link it to the Scheduler:

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

The items with Action = MenuItemAction.CallBack will fire OnEventMenuClick on the server side:

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

3. Active Area

You can also use active areas. Add the active area to the event using OnBeforeEventRender.

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);"));
}

These sample classes (event_action_delete and event_action_menu) are defined in Themes/areas.css (plus Themes/areas directory) so don't forget to include it.