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

Day, Week and Multi-day Views

  • today
January 2012
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
Jan-29 - Feb-04
  • Day
  • Week
  • Multi-day
all day
Visual Studio Integration Conference
DevMedia conference
8AM
9AM
10AM
11AM
12PM
1PM
2PM
3PM
4PM
Review Ad Campaign Results
DevMedia conference
TDD Presentation
Visual Studio Integration Conference
Architecture Review
ASP.NET MVC Presentation
Budget Committee Meeting
OpenAccess Presentation
.NET User Group Meeting
Evangelist Webinar
Media Planning meeting
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...
  • Configuration
  • Overflow behaviorAuto
  • Header Date FormatMMM-dd
  • Minutes per row30
  • Row height28px
  • Day start08:00
    Day end17:00
  • Work day start08:00
    Work day end17:00
  • First day of weekSunday
    Last day of weekSaturday
  • Column Header Formatdd
  • Number of days in a week5
  • GroupBy

  • GroupingDirection

The RadScheduler controls supports also three different views - Day, Week and Multi-Day views.

  • Day View

    The Day View is a standard table list that enable you to see all appointments for a specific day. Each row in the Day View represents a time span that is controlled by the MinutesPerRow property.

  • Week View

    The Week View represents a table list, which shows appointments for a specific week. Each week day represents a vertical column with header that shows its date. You can also easily format it with the help of the ColumnHeaderDateFormat property.

    The Week View has also two different approaches for showing time slots:

    • Business hours, that is the the default, shows only the working hours (by default those values are from 9 am to 5 pm).
    • 24-hour that shows the entire day hours - from midnight to 23 o'clock including.

  • Multi-Day View

    The Multi-Day View allows you to show different number of day depending on your scenario. You can easily control it by using the NumberOfDays property.

This demo represents three different views that you can use with RadScheduler control - Day, Week and Multi-Day views. By clicking on the specific views in the header you can switch between the views to see their specific appearance.

In this demo you can also see how to group the appointments by resources. You can do so in two ways - Horizontal or Vertical. Check also the demo Description to get more information about the different views.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.DayWeekMultiDay.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"
            FirstDayOfWeek="Monday" LastDayOfWeek="Friday" OverflowBehavior="Auto" SelectedView="WeekView"
            DayStartTime="08:00:00" DayEndTime="20:00:00">
            <AdvancedForm Modal="true"></AdvancedForm>
            <MultiDayView UserSelectable="true" />
            <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="Properties">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox ID="ShowAllDayRowToggle" runat="server" Checked="true" AutoPostBack="true" Text="ShowAllDayRow" />
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="OverflowBehaviorDropDownList" AutoPostBack="true" Label="Overflow behavior">
                                <Items>
                                    <telerik:DropDownListItem Value="Auto" Text="Auto" Selected="true" />
                                    <telerik:DropDownListItem Value="Scroll" Text="Scroll" />
                                    <telerik:DropDownListItem Value="Expand" Text="Expand" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="HeaderDateFormatDropDownList" 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="MinutesPerRowDropDownList" AutoPostBack="true" Label="Minutes per row">
                                <Items>
                                    <telerik:DropDownListItem Value="60" Text="60"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="30" Text="30" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="15" Text="15"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="10" Text="10"></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="RowHeightDropDownList" AutoPostBack="true" Label="Row height">
                                <Items>
                                    <telerik:DropDownListItem Value="28px" Text="28px" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="45px" Text="45px"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="55px" Text="55px"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="DayStartTimeDropDownList" AutoPostBack="true" Label="Day start" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="06:00:00" Text="06:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="07:00:00" Text="07:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="08:00:00" Text="08:00" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="09:00:00" Text="09:00"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="DayEndTimeDropDownList" AutoPostBack="true" Label="Day end" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="15:00:00" Text="15:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="16:00:00" Text="16:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="17:00:00" Text="17:00" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="18:00:00" Text="18:00"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="server" ID="WorkDayStartTimeDropDownList" AutoPostBack="true" Label="Work day start" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="08:00:00" Text="08:00" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="09:00:00" Text="09:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="10:00:00" Text="10:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="11:00:00" Text="11:00"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                            <qsf:DropDownList runat="server" ID="WorkDayEndTimeDropDownList" AutoPostBack="true" Label="Work day end" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Value="16:00:00" Text="16:00"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="17:00:00" Text="17:00" Selected="true"></telerik:DropDownListItem>
                                    <telerik:DropDownListItem Value="19:00:00" Text="19:00"></telerik:DropDownListItem>
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Only Week View" runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:DropDownList runat="server" ID="FirstDayOfWeekDropDownList" AutoPostBack="true" Label="First day of week" Size="Medium">
                            <Items>
                                <telerik:DropDownListItem Value="Sunday" Text="Sunday" Selected="true"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Monday" Text="Monday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Tuesday" Text="Tuesday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Wednesday" Text="Wednesday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Thursday" Text="Thursday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Friday" Text="Friday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Saturday" Text="Saturday"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                        <qsf:DropDownList runat="server" ID="LastDayOfWeekDropDownList" AutoPostBack="true" Label="Last day of week" Size="Medium">
                            <Items>
                                <telerik:DropDownListItem Value="Sunday" Text="Sunday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Monday" Text="Monday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Tuesday" Text="Tuesday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Wednesday" Text="Wednesday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Thursday" Text="Thursday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Friday" Text="Friday"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Value="Saturday" Text="Saturday" Selected="true"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </li>
                    <li>
                        <qsf:DropDownList runat="server" ID="ColumnHeaderDateFormatDropDownList" AutoPostBack="true" Label="Column Header 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>
                </ul>
            </qsf:View>
            <qsf:View Title="Only Multi-Day View" runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:DropDownList runat="server" ID="NumberOfDaysList" AutoPostBack="true" Label="Number of days in a week">
                            <Items>
                                <telerik:DropDownListItem Text="2" Value="2"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="3" Value="3"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="4" Value="4"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="5" Value="5" Selected="True"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="6" Value="6"></telerik:DropDownListItem>
                                <telerik:DropDownListItem Text="7" Value="7"></telerik:DropDownListItem>
                            </Items>
                        </qsf:DropDownList>
                    </li>
                </ul>
            </qsf:View>
            <qsf:View 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" Enabled="false">
                            <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