Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Scheduler / Timeline and Multi-day Views

Example Configuration

previous daynext daytoday

Select date
<<<May 2012>>>
SMTWTFS
  12345
6789101112
13141516171819
20212223242526
2728293031  
       

5/22/2012 - 5/22/2012

00:00
01:00
Margaret Morrison Main Room
Black Auditorium

  • This example shows RadScheduler's Timeline and Multi-day views.

    Timeline view allows you to display a variable number of slots and define the duration of those slots. You can also group time slots under the same column header using the TimeLabelSpan property.

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

    Multi-day view is used to create a Work Week View. The tab is renamed with Localization-HeaderMultiDay="Work Week". The SelectedDate of RadScheduler is set dynamically based on the value of the FirstDayOfWeek property.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Scheduler.TimelineView.DefaultCS"
        CodeFile="DefaultCS.aspx.cs" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            #ConfigurationPanel1 ul
            {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            
            #ConfigurationPanel1 ul li
            {
                line-height: 24px;
                float: left;
                padding-left: 11px;
                margin-left: 10px;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" />
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Panel1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel runat="Server" ID="RadAjaxLoadingPanel1" />
        <asp:Panel runat="server" ID="Panel1" CssClass="exampleContainer">
            <qsf:ConfiguratorPanel runat="Server" ID="ConfigurationPanel1" Expanded="true">
                <asp:Panel ID="TimelineConfigPanel" runat="server">
                    <ul>
                        <li style="border-left: none">
                            <asp:Label AssociatedControlID="DurationList" runat="server" ID="lblSlotDuration">Slot duration:</asp:Label>
    <asp:DropDownList runat="server" ID="DurationList" AutoPostBack="true" Style="margin-left: 27px"
    Width="90px">
                                <asp:ListItem Text="15 Minutes" Value="00:15:00" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="1 Hour" Value="01:00:00"></asp:ListItem>
                                <asp:ListItem Text="12 Hours" Value="12:00:00"></asp:ListItem>
                                <asp:ListItem Text="1 Day" Value="1.00:00:00"></asp:ListItem>
                                <asp:ListItem Text="3 Days" Value="3.00:00:00"></asp:ListItem>
                                <asp:ListItem Text="5 Days" Value="5.00:00:00"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                        <li style="border-left: none">
                            <asp:Label AssociatedControlID="TimeLabelSpan" runat="server" ID="lblTimeLabelSpan">Time label span:</asp:Label>
    <asp:DropDownList runat="server" ID="TimeLabelSpan" AutoPostBack="true" Style="margin-left: 27px"
    Width="40px">
                                <asp:ListItem Text="1" Value="1"></asp:ListItem>
                                <asp:ListItem Text="2" Value="2"></asp:ListItem>
                                <asp:ListItem Text="4" Value="4" Selected="True"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                        <li>
                            <asp:Label AssociatedControlID="NumberOfSlotsList" runat="server" ID="lblNumberOfSlotsList">Number of slots:</asp:Label>
    <asp:DropDownList runat="server" ID="NumberOfSlotsList" AutoPostBack="true" Style="margin-left: 10px"
    Width="80px">
                                <asp:ListItem Text="1 Slot" Value="1"></asp:ListItem>
                                <asp:ListItem Text="2 Slots" Value="2"></asp:ListItem>
                                <asp:ListItem Text="3 Slots" Value="3"></asp:ListItem>
                                <asp:ListItem Text="5 Slots" Value="5"></asp:ListItem>
                                <asp:ListItem Text="8 Slots" Value="8" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="16 Slots" Value="16"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                        <li>
                            <asp:Label AssociatedControlID="GroupingDirection" runat="server" ID="lblGroupingDirection">Grouping direction:</asp:Label>
    <asp:DropDownList runat="server" ID="GroupingDirection" AutoPostBack="true" Style="margin-left: 10px"
    Width="90px">
                                <asp:ListItem Text="Vertical" Value="Vertical" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Horizontal" Value="Horizontal"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                        <li style="border-left: none">
                            <asp:Label AssociatedControlID="ColumnHeaderDateFormat" runat="server" ID="lblColumnHeaderDateFormat">Column header date format:</asp:Label>
    <asp:DropDownList runat="server" ID="ColumnHeaderDateFormat" AutoPostBack="true"
    Style="margin-left: 27px" Width="110px">
                                <asp:ListItem Text="HH:mm" Value="HH:mm" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="MM/dd/yyyy" Value="MM/dd/yyyy"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                    </ul>
                </asp:Panel>
                <asp:Panel ID="MultidayConfigPanel" runat="server">
                    <ul>
                        <li style="border-left: none">
                            <asp:Label AssociatedControlID="FirstDayOfWorkWeekList" runat="server" ID="Label1">First day of work week: </asp:Label>
    <asp:DropDownList runat="server" ID="FirstDayOfWorkWeekList" AutoPostBack="true"
    Style="margin-left: 27px" Width="100px">
                                <asp:ListItem Text="Monday" Value="1" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="Tuesday" Value="2"></asp:ListItem>
                                <asp:ListItem Text="Wednesday" Value="3"></asp:ListItem>
                                <asp:ListItem Text="Thursday" Value="4"></asp:ListItem>
                                <asp:ListItem Text="Friday" Value="5"></asp:ListItem>
                                <asp:ListItem Text="Saturday" Value="6"></asp:ListItem>
                                <asp:ListItem Text="Sunday" Value="0"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                        <li style="border-left: none">
                            <asp:Label AssociatedControlID="NumberOfDaysList" runat="server" ID="Label2">Number of days in work week:</asp:Label>
    <asp:DropDownList runat="server" ID="NumberOfDaysList" AutoPostBack="true" Style="margin-left: 27px"
    Width="40px">
                                <asp:ListItem Text="2" Value="2"></asp:ListItem>
                                <asp:ListItem Text="3" Value="3"></asp:ListItem>
                                <asp:ListItem Text="4" Value="4" Selected="True"></asp:ListItem>
                                <asp:ListItem Text="5" Value="5"></asp:ListItem>
                                <asp:ListItem Text="6" Value="6"></asp:ListItem>
                                <asp:ListItem Text="7" Value="7"></asp:ListItem>
                            </asp:DropDownList>
                        </li>
                    </ul>
                </asp:Panel>
                <div style="clear: both;">
                </div>
            </qsf:ConfiguratorPanel>
            <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="TimelineView"
                DayStartTime="08:00:00" DayEndTime="19:00:00" DataSourceID="EventsDataSource"
                DataKeyField="ID" DataSubjectField="Description" DataStartField="Start" DataEndField="End"
                DataRecurrenceField="RecurrenceRule" OverflowBehavior="Expand" DataRecurrenceParentKeyField="RecurrenceParentID"
                Localization-HeaderMultiDay="Work Week" OnNavigationComplete="RadScheduler1_NavigationComplete">
                <AdvancedForm Modal="true" />
                <ResourceTypes>
                    <telerik:ResourceType KeyField="RoomID" Name="Room" TextField="Name" ForeignKeyField="RoomID"
                        DataSourceID="RoomsDataSource" />
                </ResourceTypes>
                <TimelineView UserSelectable="true" GroupBy="Room" GroupingDirection="Vertical" />
                <MultiDayView UserSelectable="true" />
                <DayView UserSelectable="false" />
                <WeekView UserSelectable="false" />
                <MonthView UserSelectable="false" />
            </telerik:RadScheduler>
        </asp:Panel>
        <sds:SessionDataSource ID="EventsDataSource" runat="server" DisplayWarning="false"
            PrimaryKeyFields="ID" ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            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" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="ID" Type="Int32" />
                <asp:Parameter Name="Description" Type="String" />
                <asp:Parameter Name="Start" Type="DateTime" />
                <asp:Parameter Name="End" Type="DateTime" />
                <asp:Parameter Name="RoomID" Type="Int32" />
                <asp:Parameter Name="RecurrenceRule" Type="String" />
                <asp:Parameter Name="RecurrenceParentID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="Description" Type="String" />
                <asp:Parameter Name="Start" Type="DateTime" />
                <asp:Parameter Name="End" Type="DateTime" />
                <asp:Parameter Name="RoomID" Type="Int32" />
                <asp:Parameter Name="RecurrenceRule" Type="String" />
                <asp:Parameter Name="RecurrenceParentID" Type="Int32" />
            </InsertParameters>
        </sds:SessionDataSource>
        <sds:SessionDataSource ID="RoomsDataSource" runat="server" DisplayWarning="false"
            ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT [RoomID], [Name] FROM [Grouping_Rooms]">
        </sds:SessionDataSource>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451