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

1. Built-In Delete Icon

Available also in the open-source version (since 2018.1.228).

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("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 delete the event on the server side
    // ...
    dp.message("Deleted");
  };
  dp.init();
</script>

2. Context Menu

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

3. Active Area

<div id="dp"></div>
<script type="text/javascript">
  var dp = new DayPilot.Scheduler("dp");
  dp.onBeforeEventRender = function(args) {
    args.e.areas = [
      {
        top: 3,
        right: 2
        bottom: 9,
        width: 17,
        onClick: function(args) { dp.events.remove(args.source); },
        visibility: "Hover",
        css: "event_action_delete"
      }
    ];
  };
  // ...
  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.