DayPilot Knowledge Base

AJAX Calendar/Scheduling Controls
DayPilot Pro (AJAX Calendar Control)
» DayPilot AJAX Calendar
DayPilot Pro (AJAX Monthly Calendar Control)
» DayPilot AJAX Monthly Calendar
DayPilot Pro (AJAX Scheduler Control)
» DayPilot AJAX Scheduler
DayPilot » Knowledge Base » How to show event-specific context menu

How to show event-specific context menu

Last revision: Aug 16, 2010

Assigning Different Menus to Events

It is possible to assign a different menu to each event using the BeforeEventRender event handler.

You need to create a special DayPilotMenu control for each menu type you want to use:

    <daypilot:daypilotmenu id="DayPilotMenu1" runat="server" ClientObjectName="">
        <DayPilot:MenuItem Text="Open" Action="JavaScript" JavaScript="window.location.href='Edit.aspx?id=' + e.value();" ></DayPilot:MenuItem>
        <DayPilot:MenuItem Text="Send" Action="JavaScript" JavaScript="alert('Sending event (id {0})');" ></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 Text="Delete (JavaScript using callback)" Action="JavaScript" Command='Delete' JavaScript="if (confirm('Do you really want to delete event ' + e.text() + ' ?')) ctl00_ContentPlaceHolder1_DayPilotCalendar1.eventMenuClickCallBack(e, command);"></DayPilot:MenuItem>
    </daypilot:daypilotmenu>

    <daypilot:daypilotmenu id="Daypilotmenu2" runat="server" ClientObjectName="specialmenu" ShowMenuTitle="False">
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('Opening event (id {0})');"
            Text="Open" />
        <DayPilot:MenuItem Action="JavaScript" JavaScript="alert('Sending event (id {0})');"
            Text="Send" />
        <DayPilot:MenuItem Action="NavigateUrl" Text="-" />
        <DayPilot:MenuItem Action="JavaScript" Command='Delete' JavaScript="if (confirm('Do you really want to delete event ' + e.text() + ' ?')) ctl00_ContentPlaceHolder1_DayPilotCalendar1.eventMenuClickCallBack(e, command);"
            Text="Delete (JavaScript using callback)" />
    </DayPilot:DayPilotMenu>

You can assign a global (per-control) context menu using ContextMenuID property:

ContextMenuID="DayPilotMenu1" 

You can assign a custom (per-event) context menu in BeforeEventRender event handler:

    protected void DayPilotCalendar1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
    {
        if (e.Value ==  "4")
        {
            e.InnerHTML = "This event has a special context menu";
            e.DurationBarColor = "red";
            e.ContextMenuClientName = "specialmenu";
        }
    }

See also Demo/Calendar/ContextMenu.aspx in the DayPilot package.

Modifying the Menu Structure

Related

How to implement Copy & Paste in the Calendar
How to open an event edit dialog from a context menu (Calendar)
How to show a confirmation dialog before deleting an event (Calendar)
How to detect time offset of mouse clicks inside an event