New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Context Menu

  • today
January 2012
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
1/30/2012 - 2/3/2012
  • Day
  • Week
  • Month
  • Timeline
all day
Visual Studio Integration Conference
DevMedia conference
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
6PM
​
7PM
​
Review Ad Campaign Results
DevMedia conference
TDD Presentation
Architecture Review
ASP.NET MVC Presentation
Budget Committee Meeting
OpenAccess Presentation
.NET User Group Meeting
Evangelist Webinar
Media Planning meeting
Show 24 hours...
  • Open
  • Categorize
    • Development
    • Marketing
    • Personal
    • Work
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Group by Calendar
  • Go to today

RadScheduler offers integrated support for context menus for both Appointments and Time Slots.

Use the following properties to enable the default context menus:

  • <AppointmentContextMenuSettings EnableDefault="true" />
  • <TimeSlotContextMenuSettings EnableDefault="true" />

Custom context menus are defined in the AppointmentContextMenus and TimeSlotContextMenus collections.

Appointments can be associated with context menus using their ContexMenuID property.

The standard context menu commands are available when building custom context menus. RadScheduler will automatically process items with the following predefined values.

Appointment context menu default commands

  • Edit - Value="CommandEdit"
  • Delete - Value="CommandDelete"

Time Slot context menu default commands

  • Add appointment - Value="CommandAddAppointment"
  • Add recurring appointment - Value="CommandAddRecurringAppointment"
  • Toggle "Show 24 hours" - Value="CommandShow24Hours"
  • Go to today - Value="CommandGoToToday"

RadScheduler supports slot selection with dragging over the time slot area and the Time Slot Context Menu can be used for creating appointments occupying the selected area. You can try this out by the following procedure:

  • Drag over the time slot area to select the desired time-frame;
  • Right-click one of the selected slots and add appointment using the Time Slot Context Menu.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.ContextMenu.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script type="text/javascript" src="scripts.js"></script>
        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {
                demo.scheduler = $find("<%= RadScheduler1.ClientID %>");
                demo.menu = $find('<%= SchedulerAppointmentContextMenu.ClientID %>');
            });
            /* ]]> */
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" InitialDelayTime="200">
    </telerik:RadAjaxLoadingPanel>
     <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedDate="2012-01-31"
            FirstDayOfWeek="Monday" LastDayOfWeek="Friday" SelectedView="WeekView" OverflowBehavior="Auto"
            DayStartTime="08:00:00" DayEndTime="20:00:00" OnClientAppointmentContextMenu="appointmentContextMenu"
            DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"
            DataRecurrenceField="RecurrenceRule" OnClientAppointmentContextMenuItemClicked="appointmentContextMenuItemClicked"
            OnClientAppointmentContextMenuItemClicking="appointmentContextMenuItemClicking"
            OnTimeSlotContextMenuItemClicking="RadScheduler1_TimeSlotContextMenuItemClicking"
            DataRecurrenceParentKeyField="RecurrenceParentID">
            <AdvancedForm Modal="true"></AdvancedForm>
            <AppointmentContextMenus>
                <%--The appointment context menu interaction is handled on the client in this example--%>
                <%--See the JavaScript code above--%>
                <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerAppointmentContextMenu">
                    <Items>
                        <telerik:RadMenuItem Text="Open" Value="CommandEdit">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="True">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Categorize">
                            <Items>
                                <telerik:RadMenuItem Text="Development" Value="1">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Marketing" Value="2">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Personal" Value="3">
                                </telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Work" Value="4">
                                </telerik:RadMenuItem>
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="True">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Delete" Value="CommandDelete" ImageUrl="images/delete.gif">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadSchedulerContextMenu>
            </AppointmentContextMenus>
            <TimeSlotContextMenus>
                <telerik:RadSchedulerContextMenu runat="server" ID="SchedulerTimeSlotContextMenu">
                    <Items>
                        <telerik:RadMenuItem Text="New Appointment" ImageUrl="images/new.gif" Value="CommandAddAppointment">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="New Recurring Appointment" ImageUrl="images/recurring.gif"
                            Value="CommandAddRecurringAppointment">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="true">
                        </telerik:RadMenuItem>
                        <%-- Custom command --%>
                        <telerik:RadMenuItem Text="Group by Calendar" Value="EnableGrouping">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem IsSeparator="true">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Go to today" Value="CommandGoToToday">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadSchedulerContextMenu>
            </TimeSlotContextMenus>
            <ResourceStyles>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Development" ApplyCssClass="rsCategoryBlue">
                </telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Marketing" ApplyCssClass="rsCategoryOrange">
                </telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Work" ApplyCssClass="rsCategoryGreen">
                </telerik:ResourceStyleMapping>
            </ResourceStyles>
        </telerik:RadScheduler>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance