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

Timeline View

  • today
April 2012
April 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Apr-15 - Apr-17
Margaret Morrison Main Room
Black Auditorium
Sun 12:00 AM
Sun 08:00 AM
Sun 04:00 PM
Mon 12:00 AM
Mon 08:00 AM
Mon 04:00 PM
Tue 12:00 AM
Sun 12:00 AM
Sun 08:00 AM
Sun 04:00 PM
Mon 12:00 AM
Mon 08:00 AM
Mon 04:00 PM
Tue 12:00 AM
11
dWE
lllllllllll
Ini: 9:00 Fin:18:00
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
nkhhkhkj
lllllllllll
ttttttt
lllllllllll
rrrrrr
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
1111
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
lllllllllll
asdfasdasd
sdsdgsd
fdsfds
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Configuration
  • Column Header Formatddd hh:mm tt
  • Header Date FormatMMM-dd
  • Number of Slots7
  • Slot Durationquater days
  • Time label span1
  • Start time00:00
  • GroupBy
  • GroupingDirection

This example shows RadScheduler's Timeline view that 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.

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

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ 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>
    <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" />
    <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="TimelineView" SelectedDate="2012-04-15"
            DayStartTime="08:00:00" DayEndTime="19:00:00" DataSourceID="EventsDataSource" Height="400" RowHeight="60"
            DataKeyField="ID" DataSubjectField="Description" DataStartField="Start" DataEndField="End"
            DataRecurrenceField="RecurrenceRule" DataRecurrenceParentKeyField="RecurrenceParentID"
            Localization-HeaderMultiDay="Work Week">
            <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>
            <TimelineView UserSelectable="false"></TimelineView>
            <MultiDayView UserSelectable="false"></MultiDayView>
            <DayView UserSelectable="false"></DayView>
            <WeekView UserSelectable="false"></WeekView>
            <MonthView UserSelectable="false"></MonthView>
            <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>
            <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>
        </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"></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"></asp:Parameter>
            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>
            <asp:Parameter Name="RoomID" Type="Int32"></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 Title="TimeLineView Settings" runat="server">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ShowInsertArea" runat="server" AutoPostBack="true" Text="ShowInsertArea" />
                            <asp:CheckBox ID="TimeLineShowDateHeader" runat="server" AutoPostBack="true" Checked="true" Text="TimeLineShowDateHeader" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="TimeLineColumnHeaderDateFormat" AutoPostBack="true" Label="Column Header Format">
                                <Items>
                                    <telerik:DropDownListItem Value="ddd hh:mm tt" Text="ddd hh:mm tt" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="dddd" Text="dddd"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MMM-dd" Text="MMM-dd"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="MM-dd-yy" Text="MM-dd-yy"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="TimeLineHeaderDateFormat" AutoPostBack="true" Label="Header Date Format">
                                <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>
                        <li>
                            <qsf:DropDownList runat="server" ID="NumberOfSlots" AutoPostBack="true" Label="Number of Slots">
                                <Items>
                                    <telerik:DropDownListItem Value="3" Text="3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="7" Text="7" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="8" Text="8"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="14" Text="14"></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="SlotDuration" AutoPostBack="true" Label="Slot Duration">
                                <Items>
                                    <telerik:DropDownListItem Value="00:15:00" Text="15 Minutes"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="08:00:00" Text="quater days" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="01:00:00" Text="1 Hour"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="12:00:00" Text="half day"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="1.00:00:00" Text="1 day"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="2.00:00:00" Text="2 days"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="TimeLabelSpan" AutoPostBack="true" Label="Time label span">
                                <Items>
                                    <telerik:DropDownListItem Value="1" Text="1" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="2" Text="2"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="3" Text="3"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="4" Text="4"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="TimelineViewStartTime" AutoPostBack="true" Label="Start time">
                                <Items>
                                    <telerik:DropDownListItem Value="00:00:00" Text="00:00" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="10:00:00" Text="10:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="20:00:00" Text="20:00"></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=""></asp:ListItem>
                            <asp:ListItem Text="Room" Value="Room" Selected="True"></asp:ListItem>
                            <asp:ListItem Text="Date, Room" Value="Date, Room"></asp:ListItem>
                        </asp:RadioButtonList>
                    </li>
                    <li>
                        <span class="label">GroupingDirection</span>
                        <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:View>
            <qsf:View>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance