You can let the users delete the event using a built-in delete icon, using a context menu or using an active area icon.

ASP.NET WebForms

In the legacy CssOnly=false mode an integrated delete [x] icons is also available.

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:DayPilotMonth 
  ID="DayPilotMonth1" 
  runat="server" 
  ...
  ContextMenuID="DayPilotMenu1" 
/>

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

protected void DayPilotMonth1_EventMenuClick(object sender, EventMenuClickEventArgs e)
{
  // delete the event in the database

  setDataSourceAndBind();
  DayPilotMonth1.Update();
}

Active Area

You can also use active areas.

protected void DayPilotMonth1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dpm.commandCallBack('delete', {id:e.value() });"));
}

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.

ASP.NET MVC

You can let the users delete the event using a context menu or using an active area icon. In the legacy CssOnly=false mode an integrated delete [x] icons is available.

Context Menu

You need to define the menu:

@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  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 Calendar:

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig {
  ...
  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;
  }
}

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("dpm.commandCallBack('delete', {id:e.id() });"));
}

protected override void OnCommand(CommandArgs e)
{
  switch (e.Command)
  {
      case "delete":
          string id = (string) e.Data["id"];
          new EventManager(Controller).EventDelete(id);
          Update(CallBackUpdateType.EventsOnly);
          break;
  }
}

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.

JavaScript

Built-In Delete Icon

Demo:

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.eventDeleteHandling = "Enabled";
  dp.init();
</script>

Context Menu

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.contextMenu = new DayPilot.Menu({items: [
    {text:"Delete", onclick: function() { var e = this.source; dp.events.remove(e); } }
  ]});
  // ...
  dp.init();
</script>

Custom Delete Icon (Active Area)

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Month("dp");
  dp.onBeforeEventRender = function(args) {
    args.e.areas = [{"action":"JavaScript","js":"(function(e) { dp.events.remove(e); })","bottom":9,"w":17,"v":"Hover","css":"event_action_delete","top":3,"right":2}];
  };
  // ...
  dp.init();
</script>