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 Scheduler
1. Built-In 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
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.