Scheduler - 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
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 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">
    <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>

Find Assistance

Help Us Improve

Was this example helpful?