Scheduler - Month View

  • today
January, 2012
January, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
Jan-31
Sun
Mon
Tue
Wed
Thu
Fri
Sat
.NET User Group Meeting
.NET User Group Meeting
Architecture Review
Budget Committee Meeting
.NET User Group Meeting
Scrum Training
.NET User Group Meeting
Presentation at STU
Architecture Review
Budget Committee Meeting
Visual Studio Integration Conference
DevMedia conference
more...
more...
Interview with Junior WPF Developer candidate
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today

Configuration

  • Day Header Date Formatdd
    Column Header Formatddd
  • First Day Formatdd
  • Header Date FormatsMMM-dd
  • Minimal Row Height4px
  • Visible Appointments2
  • GroupBy

  • GroupingDirection
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

You can try using the different properties that are valid for the MonthView of the RadScheduler. Furthermore the RadScheduler control offers also integrated support for context menus for both Appointments and Time Slots. To enable it, you simply need to set the TimeSlotContextMenuSettings-EnableDefault property of the RadScheduler control to true.

The RadScheduler control supports Month View that enables you to see all of the appointments for a specific month. If you want to set the view of the RadScheduler to Month View every time when the page loads, you will need to use the SelectedView property and set its value to MonthView. To create an appointment in the desires slot, you will need to double click it and use the in-line form.

This demo is also an example of how you can group the appointments by resources. You can do so in two ways - Horizontal or Vertical.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.MonthView.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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadAjaxLoadingPanel runat="Server" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Configuratorpanel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="Configuratorpanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedDate="2012-01-31"
            SelectedView="MonthView">
            <AdvancedForm Modal="true"></AdvancedForm>
            <WeekView UserSelectable="false" />
            <DayView UserSelectable="false" />
            <MultiDayView UserSelectable="false" />
            <TimelineView UserSelectable="false" />
            <MonthView UserSelectable="false" />
            <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>
                <telerik:ResourceStyleMapping Type="Calendar" Text="Personal" ApplyCssClass="rsCategoryRed"></telerik:ResourceStyleMapping>
            </ResourceStyles>
            <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
            <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
        </telerik:RadScheduler>

    </div>
    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Configuration">
        <Views>
            <qsf:View Title="Month View Properties" runat="server">

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="AdaptiveRowHeight" runat="server" AutoPostBack="true" Checked="true" Text="AdaptiveRowHeight" />
                            <asp:CheckBox ID="ShowDateHeaders" runat="server" AutoPostBack="true" Checked="true" Text="ShowDateHeaders" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="MonthViewDayHeaderDateFormat" AutoPostBack="true" Label="Day Header Date Format" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="d" Text="d"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dd" Text="dd" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="ddd" Text="ddd"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dddd" Text="dddd"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="MonthViewColumnHeaderDateFormat" AutoPostBack="true" Label="Column Header Format" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="dd" Text="dd"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="ddd" Text="ddd" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dddd" Text="dddd"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="FirstDayHeaderDateFormat" AutoPostBack="true" Label="First Day Format">
                                <Items>
                                    <telerik:DropDownListItem Value="d" Text="d"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dd" Text="dd" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="ddd" Text="ddd"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dddd" Text="dddd"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="MonthViewHeaderDateFormat" AutoPostBack="true" Label="Header Date Formats">
                                <Items>
                                    <telerik:DropDownListItem Value="ddd-MM" Text="ddd-MM"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MMM-dd" Text="MMM-dd" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MM-dd-yy" Text="MM-dd-yy"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="MinimumRowHeight" AutoPostBack="true" Label="Minimal Row Height">
                                <Items>
                                    <telerik:DropDownListItem Value="4" Text="4px" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="5" Text="5px"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="7" Text="7px"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="VisibleAppointmentsPerDay" AutoPostBack="true" Label="Visible Appointments">
                                <Items>
                                    <telerik:DropDownListItem Value="1" Text="1"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="2" Text="2" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="3" Text="3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View ID="View1" Title="Grouping Settings" runat="server">
                <ul class="fb-group">
                    <li>
                        <span class="label">GroupBy</span>
                        <asp:RadioButtonList ID="GroupBy" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GroupBy_SelectedIndexChanged">
                            <asp:ListItem Text="None" Value="" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Calendar" Value="Calendar"></asp:ListItem>
                            <asp:ListItem Text="Date, Calendar" Value="Date, Calendar"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                    <li>
                        <span class="label">GroupingDirection</span>
                        <asp:RadioButtonList ID="GroupingDirection" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GroupingDirection_SelectedIndexChanged">
                            <asp:ListItem Text="Horizontal" Value="Horizontal"></asp:ListItem>
                            <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?