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

Year View

  • Configuration
  • Header Date Formatyyyy
  • Month Header Date FormatMMMM
GroupBy
GroupingDirection

Nowadays, the abilities to display all months in a single year view and to also manage the appointments yearly became very popular not only across the mobile devices, but also on the desktop one. This demo shows exactly how you can enable the RadScheduler's Year View to revise and manage the appointments yearly. In addition, you can group the months by resources - horizontally and vertically. This view itself provides a Tooltip functionality, which allows you to revise the appointments for a given day. You can scroll the list of the appointments, by hovering over the upper top or bottom parts of the Tooltip.

You can specify the HeaderDateFormat and MonthHeaderDateFormat properties using Standard or Custom Date and Time Format Strings.

The Year View is not available in Classic render mode. In order to enable it, the Scheduler's RenderMode property should be set to Lightweight, Mobile or Auto.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.YearView.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
    <script type="text/javascript">
        function pageLoad(sender, eventArgs) {
            $telerik.$(".rsDateHeader").attr("title", "");
        }
    </script>

    <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>
    <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedView="YearView" SelectedDate="2012-04-15" 
            DataSourceID="EventsDataSource" Height="570px" DataKeyField="ID" DataSubjectField="Description" DataStartField="Start" DataEndField="End"
            DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID">
            <AdvancedForm Modal="true"></AdvancedForm>
            <ResourceTypes>
                <telerik:ResourceType KeyField="RoomID" Name="Room" TextField="Name" ForeignKeyField="RoomID"
                    DataSourceID="RoomsDataSource"></telerik:ResourceType>
            </ResourceTypes>
            <ResourceStyles>
                <telerik:ResourceStyleMapping Type="Room" Text="Margaret Morrison Main Room" ApplyCssClass="rsCategoryBlue"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="Room" Text="Black Auditorium" ApplyCssClass="rsCategoryOrange"></telerik:ResourceStyleMapping>
            </ResourceStyles>
            <YearView UserSelectable="true" />
            <TimelineView UserSelectable="false"></TimelineView>
            <MultiDayView UserSelectable="false"></MultiDayView>
            <DayView UserSelectable="true"></DayView>
            <WeekView UserSelectable="false"></WeekView>
            <MonthView UserSelectable="true"></MonthView>
        </telerik:RadScheduler>

    </div>
    <asp:SqlDataSource ID="EventsDataSource" runat="server"
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT [ID], [Description], [Start], [End], [RoomID], [RecurrenceRule], [RecurrenceParentID] FROM [Grouping_Events]"
        InsertCommand="INSERT INTO [Grouping_Events] ([Description], [Start], [End], [RoomID], [RecurrenceRule], [RecurrenceParentID]) VALUES (@Description, @Start, @End , @RoomID, @RecurrenceRule, @RecurrenceParentID)"
        UpdateCommand="UPDATE [Grouping_Events] SET [Description] = @Description, [Start] = @Start, [End] = @End, [RoomID] = @RoomID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID WHERE (ID = @ID)"
        DeleteCommand="DELETE FROM [Grouping_Events] WHERE [ID] = @ID">
        <DeleteParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
        </DeleteParameters>
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>
            <asp:Parameter Name="Description" Type="String"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32" DefaultValue="1"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="Description" Type="String" DefaultValue="New Event"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32" DefaultValue="1"></asp:Parameter>
            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>
            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>
        </InsertParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource ID="RoomsDataSource" runat="server"
        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString35 %>"
        SelectCommand="SELECT [RoomID], [Name] FROM [Grouping_Rooms]"></asp:SqlDataSource>

    <qsf:ConfiguratorPanel ID="Configuratorpanel1" runat="server" Title="Configuration">
        <Views>
            <qsf:View ID="View1" Title="YearView Settings" runat="server">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ShowDateHeaders" runat="server" AutoPostBack="true" Checked="true" Text="ShowDateHeaders" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="HeaderDateFormat" AutoPostBack="true" Label="Header Date Format" Width="150">
                                <Items>
                                    <telerik:DropDownListItem value="yy" text="yy"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem value="yyyy" text="yyyy" selected="true"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ShowMonthHeaders" runat="server" AutoPostBack="true" Checked="true" Text="ShowMonthHeaders" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="MonthHeaderDateFormat" AutoPostBack="true" Label="Month Header Date Format" Width="180">
                                <Items>
                                    <telerik:DropDownListItem value="MM" text="MM"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem value="MMM" text="MMM"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem value="MMMM" text="MMMM" selected="true"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View ID="View2" Title="Grouping Settings" runat="server">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow" Title="GroupBy">
                    <ul class="fb-group">
                        <li>
                            <asp:RadioButtonList ID="GroupBy" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GroupBy_SelectedIndexChanged">
                                <asp:ListItem Text="None" Value="" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Room" Value="Room"></asp:ListItem>
                            </asp:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Narrow" Title="GroupingDirection">
                    <ul class="fb-group">
                        <li>
                            <asp:RadioButtonList ID="GroupingDirectionList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="GroupingDirection_SelectedIndexChanged">
                                <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Vertical" Value="Vertical"></asp:ListItem>
                            </asp:RadioButtonList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance