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

WebForms Scheduler Overview

January 2012
January 2012
 SuMoTuWeThFrSa
5325262728293031
11234567
2891011121314
315161718192021
422232425262728
52930311234
  • My Calendars
    • ?
  • today
January 2012
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    
1/30/2012 - 2/3/2012
  • Day
  • Work week
  • Month
  • Agenda
all day
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
6PM
​
7PM
​
8PM
​
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

In this demo RadScheduler is populated via Web Service binding. This allows entirely client-side interaction with the control. For example, navigating through dates or opening the advanced form does not cause a postback.

Select a day from the calendars to quickly go to this date in RadScheduler. Use the checkboxes in the sliding panes in the bottom left corner to filter appointments by resources.

You can see how a grouped RadScheduler is behaving when you click on the "Group" button and you can filter the appointments by their resources by checking and unchecking the Checkboxes below the calendar.

About RadScheduler for ASP.NET AJAX

Easily enable users to create and manage appointments in a rich and familiar, Outlook-like manner with RadScheduler for ASP.NET AJAX. Rest assured they will always be able to access their task data no matter the browser or device they use. Bind the control to any data source - as simple or as powerful as you prefer. Quickly configure the control to best match your scenario thanks to its 20 built-in skins, templates, custom attributes, resources and localization.

RadScheduler and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive tool set that takes care of the common functionality of your application. Thus, leaving you with more time to work on the business logic of your application.

Key Features

  • Rich UI for creating and managing tasks
  • Day, Multi-day, Week, Work Week, Month, Timeline and Agenda views
  • Customizable appointment edit capabilities
  • Support for recurring appointments and resources
  • Export to PDF
  • Support for any data source
  • Flawless look and feel across browsers and devices
  • Keyboard Support
  • 20 built-in skins
  • Rich Visual Studio Design-Time Wizard for codeless configuration

More about RadScheduler for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • SchedulerWebService.cs
  • scripts.js
  • styles.css
  • Appointments_Outlook.xml
<%@ Page Language="c#" AutoEventWireup="false" Inherits="Scheduler.Examples.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>

<!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:RadScriptBlock ID="RadScriptBlock1" runat="server">

        <script type="text/javascript">
            /* <![CDATA[ */
            Sys.Application.add_load(function () {             
                demo.categoryPanelBar = $find('<%=RadPanelBar1.ClientID %>');
                demo.scheduler = $find('<%=RadScheduler1.ClientID %>');
                demo.calendar1 = $find('<%=RadCalendar1.ClientID %>');
            });
            /* ]]> */
        </script>
           <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <div class="demo-container">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <telerik:RadSplitter RenderMode="Lightweight" runat="server" ID="RadSplitter1" Skin="Metro"
                    PanesBorderSize="0" Width="1020" Height="405">
                    <telerik:RadPane runat="Server" ID="leftPane" Width="270" Scrolling="None">
                        <telerik:RadSplitter RenderMode="Lightweight" runat="server" ID="RadSplitter2" Skin="Metro"
                            Orientation="Horizontal" Width="100%" >
                            <telerik:RadPane runat="server" Height="283">
                                <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="RadCalendar1"  EnableMultiSelect="false"
                                    FocusedDate="2012/01/31" DayNameFormat="FirstTwoLetters" EnableNavigation="true"
                                    EnableMonthYearFastNavigation="true" Skin="Metro">
                                    <ClientEvents OnDateSelected="OnCalendar1DateSelected"
                                        OnCalendarViewChanged="OnCalendar1ViewChanged" />
                                </telerik:RadCalendar>
                            </telerik:RadPane>
                            <telerik:RadSplitBar runat="server" EnableResize="false" />
                            <telerik:RadPane runat="server">

                                <telerik:RadPanelBar RenderMode="Lightweight" runat="server" ID="RadPanelBar1"  Width="270px" Skin="Metro"
                                    ExpandAnimation-Type="None" CollapseAnimation-Type="None" ExpandMode="SingleExpandedItem">
                                    <Items>
                                        <telerik:RadPanelItem runat="server" Text="My Calendars" Expanded="true">
                                            <Items>
                                                <telerik:RadPanelItem runat="server">
                                                    <ItemTemplate>
                                                        <div class="rpCheckBoxPanel">
                                                            <div class="qsf-chk-personal">
                                                                <label>
                                                                    <input id="chkPersonal" type="checkbox" title="Personal" onclick="rebindScheduler()"
                                                                        value="Personal" checked="checked" name="Personal" />
                                                                    <span>Personal</span>
                                                                </label>
                                                            </div>
                                                            <div class="qsf-chk-work">
                                                                <label>
                                                                    <input id="chkWork" type="checkbox" title="Work" onclick="rebindScheduler()" value="Work"
                                                                        checked="checked" name="Work" />
                                                                    <span>Work</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <telerik:RadButton RenderMode="Lightweight" runat="server" ID="Button1" Text="Group" OnClick="Button1_Click" 
                                                            Icon-PrimaryIconCssClass="qsf-btn-group" Skin="Metro" />
                                                        <span title="This button Groups RadScheduler by its Resources creating a separate calendar for each resource item and situating the appropriate appointments there."
                                                            class="qsf-btn-hint">?</span>
                                                    </ItemTemplate>
                                                </telerik:RadPanelItem>
                                            </Items>
                                        </telerik:RadPanelItem>
                                    </Items>
                                </telerik:RadPanelBar>
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false" />
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None">
                        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1"  Height="400" OverflowBehavior="Auto" OnLoad="RadScheduler1_Load"
                            OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"
                            OnClientNavigationComplete="OnClientNavigationComplete"
                            OnClientAppointmentsPopulating="OnClientAppointmentsPopulating"
                            SelectedView="WeekView" ShowFooter="false" SelectedDate="2012-01-31"
                            DayStartTime="08:00:00" DayEndTime="21:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday"
                            EnableDescriptionField="true" AppointmentStyleMode="Default" Skin="Metro">
                            <WebServiceSettings Path="../WebService/SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
                            <AdvancedForm Modal="true"></AdvancedForm>
                            <TimelineView UserSelectable="false"></TimelineView>
                            <AgendaView UserSelectable="true" />
                            <ResourceStyles>
                                <%--AppointmentStyleMode must be explicitly set to Default (see above) otherwise setting BackColor/BorderColor
                            will switch the appointments to Simple rendering (no rounded corners and gradients)--%>
                                <telerik:ResourceStyleMapping Type="Calendar" Text="Personal" BackColor="#abd962"
                                    BorderColor="#abd962" />
                                <telerik:ResourceStyleMapping Type="Calendar" Text="Work"
                                    BorderColor="#25a0da" />
                            </ResourceStyles>
                            <ResourceHeaderTemplate>
                                <div class="rsResourceHeader<%# Eval("Text") %>">
                                    <%# Eval("Text") %>
                                </div>
                            </ResourceHeaderTemplate>
                            <TimeSlotContextMenuSettings EnableDefault="true" />
                            <AppointmentContextMenuSettings EnableDefault="true" />
                            <Localization HeaderWeek="Work week" />
                        </telerik:RadScheduler>
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

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

Support & Learning Resources

Find Assistance