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

JavaScript

Built-In Delete Icon

javascript calendar event deleting

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

Delete confirmation, server-side AJAX notification

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

  dp.onEventDelete = function(args) {
    if (!confirm("Do you really want to delete this event?")) {
      args.preventDefault();
    }
  };

  dp.onEventDeleted = function(args) {

    // AJAX call to the server, this example uses jQuery
    $.post("/event/delete/" + args.e.id(), function(result) {
      dp.message("Event deleted: " + args.e.text());
    });

  };
  // ...
  dp.init();
</script>

Context Menu

javascript event calendar delete context menu

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

Active Area

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

ASP.NET WebForms

Built-In Delete Icon

asp.net calendar event deleting

.aspx

<DayPilot:DayPilotCalendar
  ...
  EventDeleteHandling="CallBack"
  OnEventDelete="DayPilotCalendar1_EventDelete"
  ...
/>

aspx.cs

protected void DayPilotCalendar1_EventDelete(object sender, DayPilot.Web.Ui.Events.EventDeleteEventArgs e)
{
  deleteAndBind(e.Value);
}

Context Menu

asp.net event calendar deleting 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 Calendar:

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

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

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

  setDataSourceAndBind();
  DayPilotCalendar1.Update();
}

Active Area

You can also use active areas.

protected void DayPiloCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_delete").JavaScript("dpc.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. An integrated delete [x] icons is also available.

Built-In Event Delete Icon

event calendar for asp.net mvc event deleting

Enable it using EventDeleteHandling property:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
   // ...
   EventDeleteHandling = EventDeleteHandlingType.CallBack
   // ...
})

Add the handler to the backend controller class:

public ActionResult Backend()
{
	return new Dpc().CallBack(this);
}

public class Dpc : DayPilotCalendar
{
	protected override void OnEventDelete(EventDeleteArgs e)
	{
		new EventManager(Controller).EventDelete(e.Id);
		Update();
	}
}

You can handle the EventDelete event on the client side:

@Html.DayPilotCalendar("dpc", new DayPilotCalendarConfig
{
   // ...
   EventDeleteHandling = EventDeleteHandlingType.JavaScript,
   EventDeleteJavaScript = "if (confirm('Are you sure?')) { dpc.eventDeleteCallBack(e); }"
   // ...
})

Tutorial

Context Menu

event calendar for asp.net mvc context menu delete

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.DayPilotCalendar("dpc", new DayPilotCalendarConfig {
...
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("dpc.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.

Displaying Confirmation Dialog Box before Deleting Events

@Html.DayPilotScheduler("dps", new DayPilotCalendarConfig
{
   // ...
   EventDeleteHandling = EventDeleteHandlingType.JavaScript,
   EventDeleteJavaScript = "if (confirm('Are you sure?')) { dps.eventDeleteCallBack(e); }"
   // ...
})