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

Month View

  • today
January 2012
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
Jan-31
  • Month
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
.NET User Group Meeting
6
7
8
9
10
11
12
.NET User Group Meeting
13
14
15
16
Architecture Review
17
Budget Committee Meeting
18
19
.NET User Group Meeting
20
21
22
23
24
25
Scrum Training
26
.NET User Group Meeting
27
Presentation at STU
28
29
30
Architecture Review
31
Budget Committee Meeting
1
Visual Studio Integration Conference
DevMedia conference
2
more...
3
more...
4
Interview with Junior WPF Developer candidate
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Configuration
  • Month View Properties
  • Grouping Settings
  • Day Header Date Formatdd
    Column Header Formatddd
  • First Day Formatdd
  • Header Date FormatsMMM-dd
  • Minimal Row Height4px
  • Visible Appointments2
  • GroupBy
  • GroupingDirection

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>
<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="true" />
            <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>

Support & Learning Resources

Find Assistance