Event Deleting

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

JavaScript

Built-In Delete Icon

The monthly calendar component includes a built-in support for a "delete" icon that displays on hover.

The "delete" icon is disabled by default. You can enable it using eventDeleteHandling property.

The calendar will fire onEventDelete and onEventDeleted events on click.

<div id="dp"></div>
<script type="text/javascript">
  const dp = new DayPilot.Month("dp", {
    eventDeleteHandling: "Enabled",
    // ...
  });
  dp.init();
</script>

Demo:

• Monthly calendar event deleting demo

Context Menu

You can add a context menu to the monthly calendar events that will let users delete the event using a special menu item:

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

Custom Delete Icon (Active Area)

You can use event active areas to insert a custom icon at a custom location inside events.

Active areas are only available in the Pro version.

<div id="dp"></div>
<script type="text/javascript">
  const dp = new DayPilot.Month("dp", {
    onBeforeEventRender = function(args) {
      args.e.areas = [
        {
          onClick: args => { dp.events.remove(args.source); },
          top: 3,
          right: 2,
          bottom: 9,
          width: 17,
          visibility: "Hover",
          cssClass": "event_action_delete",
        }
      ];
    },
    // ..
  });
  dp.;
  // ...
  dp.init();
</script>

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

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

  setDataSourceAndBind();
  DayPilotMonth1.Update();
}

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

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

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