javascript monthly event calendar context menu

JavaScript

You can specify the event context menu using contextMenu property:

<div id="dp"></div>

<script type="text/javascript">
    const dp = new DayPilot.Month("dp");
    dp.contextMenu = new DayPilot.Menu({
        items: [
          {text:"Show event ID", onClick: args => {alert("Event value: " + args.source.id());} },
          {text:"Show event text", onClick: args => {alert("Event text: " + args.source.text());} },
          {text:"Show event start", onClick: args => {alert("Event start: " + args.source.start());} },
          {text:"Delete", onClick: args => { dp.events.remove(args.source); } }
    ]});    

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

ASP.NET WebForms

.aspx

<DayPilot:DayPilotMonth 
  ID="DayPilotMonth1" 
  runat="server" 
  DataEndField="end" 
  DataStartField="start"
  DataTextField="name" 
  DataValueField="id" 
  ContextMenuID="DayPilotMenu1" 
  OnEventMenuClick="DayPilotMonth1_EventMenuClick"
  ClientObjectName="dpm" 
  ...
  />

<DayPilot:DayPilotMenu ID="DayPilotMenu1" runat="server" CssClassPrefix="menu_default">
  <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="alert('Opening event (id ' + e.value() + ')');">
  </DayPilot:MenuItem>
  <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id ' + e.value() + ')');">
  </DayPilot:MenuItem>
  <DayPilot:MenuItem Text="-" Action="NavigateUrl"></DayPilot:MenuItem>
  <DayPilot:MenuItem Text="Delete (CallBack)" Action="Callback" Command="Delete"></DayPilot:MenuItem>
  <DayPilot:MenuItem Action="PostBack" Command="Delete" Text="Delete (PostBack)" />
  <DayPilot:MenuItem Action="NavigateUrl" NavigateUrl="javascript:alert('Going somewhere else (id {0})');"
      Text="NavigateUrl test" />
</DayPilot:DayPilotMenu>

.aspx.cs

protected void DayPilotMonth1_EventMenuClick(object sender, EventMenuClickEventArgs e)
{
  if (e.Command == "Delete")
  {
    // delete event
    // ...
    
    DayPilotMonth1.DataSource = getData(DayPilotMonth1.VisibleStart, DayPilotMonth1.VisibleEnd);  // custom data-loading method
    DayPilotMonth1.DataBind();
    DayPilotMonth1.Update();
  }
}

ASP.NET MVC

 
@Html.DayPilotMenu("menu", new DayPilotMenuConfig {
  Items = new DayPilot.Web.Mvc.MenuItemCollection
  {
    new DayPilot.Web.Mvc.MenuItem { Text = "Open", Action = MenuItemAction.JavaScript, JavaScript = "alert(e.value());"},
    new DayPilot.Web.Mvc.MenuItem { Text = "Delete", Action = MenuItemAction.CallBack, Command = "Delete"}
  }
})

@Html.DayPilotMonth("dpm", new DayPilotMonthConfig() {

  ...
  ContextMenu = "menu",
  ...

})