Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadScheduler - Telerik's ASP.NET Scheduler

Title and navigation
Title and navigation
<<<January, 2012><<
January, 2012

previous daynext daytoday

Select date
Title and navigation
Title and navigation
<<<January, 2012><<
January, 2012

1/30/2012 - 2/3/2012

all day
    To test the behavior of our controls on mobile devices, scan the QR code.

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 80+ 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.

About This Demo

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.

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.

Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Scheduler demo, you can use the following path to find it in the sample website 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


Show code in new window Demo isolation steps
<%@ 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" %>
<%@ Register Src="~/Scheduler/Examples/Overview/Info.ascx" TagPrefix="qsf" TagName="Info" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>ASP.NET scheduler examples | RadScheduler control demo</title>
     <link rel="Stylesheet" type="text/css" href="styles.css" />
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

     <script type="text/javascript">
          var categoryNames = new Array();
          var scheduler = null;
          var calendar1 = null;
          var SchedulerNavigationCompleteAlreadyOccurred = false;

          function pageLoad() {

               scheduler = $find( '<%=RadScheduler1.ClientID %>' );
               calendar1 = $find( '<%=RadCalendar1.ClientID %>' );
          function rebindScheduler() {
               var scheduler = $find( '<%=RadScheduler1.ClientID %>' );

          function OnClientAppointmentsPopulating( sender, eventArgs ) {
               addSelectedCategoriesToArray( categoryNames );
               eventArgs.get_schedulerInfo().CategoryNames = categoryNames;
               categoryNames = new Array(); //clear the array

          function addSelectedCategoriesToArray( categoryNamesArray ) {
               var $ = $telerik.$;
               var categoryPanelBar = $find( '<%=RadPanelBar1.ClientID %>' );
               $( ':checkbox:checked', categoryPanelBar.get_element() ).each( function () {
                    categoryNames.push( $( this ).attr( 'name' ) );
               } );

          function OnClientAppointmentWebServiceInserting( sender, args ) {
               //set a default Calendar resource
               if ( args.get_appointment().get_resources().get_count() == 0 ) {
                    var defaultCalendarResource = sender.get_resources().getResourceByTypeAndKey( "Calendar", 1 );
                    args.get_appointment().get_resources().add( defaultCalendarResource );

          function OnCalendar1DateSelected( sender, args ) {
               var selectedDateTriplet = sender.get_selectedDates()[0];
               if ( selectedDateTriplet ) {

                    var selectedDate = new Date( selectedDateTriplet[0], selectedDateTriplet[1] - 1, selectedDateTriplet[2] );
                    scheduler.set_selectedDate( selectedDate );


          function OnCalendar1ViewChanged( sender, eventArgs ) {

               var dateTriplet = sender.get_focusedDate();

               if ( !SchedulerNavigationCompleteAlreadyOccurred ) {
                    var selectedDate = new Date( dateTriplet[0], dateTriplet[1] - 1, dateTriplet[2] );
            SchedulerNavigationCompleteAlreadyOccurred = false;

        function OnClientNavigationComplete(sender, args) {
            SchedulerNavigationCompleteAlreadyOccurred = true;
            var selectedDate = sender.get_selectedDate();
            calendar1.navigateToDate([selectedDate.format("yyyy"), selectedDate.format("MM"), selectedDate.format("dd")]);
    <div class="qsf-demo-canvas">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <telerik:RadSplitter runat="server" ID="RadSplitter1" Skin="Metro"
                    PanesBorderSize="0" Width="1000" Height="450">
                    <telerik:RadPane runat="Server" ID="leftPane" Width="220" Scrolling="None">
                        <telerik:RadSplitter runat="server" ID="RadSplitter2" Skin="Metro"
                            Orientation="Horizontal" Width="100%">
                            <telerik:RadPane runat="server" Height="180">
                                <telerik:RadCalendar runat="server" ID="RadCalendar1" Skin="Metro" EnableMultiSelect="false"
                                    FocusedDate="2012/01/31" DayNameFormat="FirstTwoLetters" EnableNavigation="true"
                                    <ClientEvents OnDateSelected="OnCalendar1DateSelected"
                                        OnCalendarViewChanged="OnCalendar1ViewChanged" />
                            <telerik:RadSplitBar runat="server" EnableResize="false" />
                            <telerik:RadPane runat="server">

                                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Metro" Width="100%"
                                    ExpandAnimation-Type="None" CollapseAnimation-Type="None" ExpandMode="SingleExpandedItem">
                                        <telerik:RadPanelItem runat="server" Text="My Calendars" Expanded="true">
                                                <telerik:RadPanelItem runat="server">
                                                        <div class="rpCheckBoxPanel">
                                                            <div class="qsf-chk-personal">
                                                                    <input id="chkPersonal" type="checkbox" title="Personal" onclick="rebindScheduler()"
                                                                        value="Personal" checked="checked" name="Personal" />
                                                            <div class="qsf-chk-work">
                                                                    <input id="chkWork" type="checkbox" title="Work" onclick="rebindScheduler()" value="Work"
                                                                        checked="checked" name="Work" />
                                                        <telerik:RadButton runat="server" ID="Button1" Text="Group" OnClick="Button1_Click" Skin="Metro"
                                                            Icon-PrimaryIconCssClass="qsf-btn-group" />
                                                        <span title="This button Groups RadScheduler by its Resources creating a separate calendar for each resource item and situating the appropriate appointments there."
                    <telerik:RadSplitBar runat="server" ID="RadSplitBar2" CollapseMode="Forward" EnableResize="false" />
                    <telerik:RadPane runat="Server" ID="rightPane" Scrolling="None">
                        <telerik:RadScheduler runat="server" ID="RadScheduler1" Skin="Metro" Height="450" OverflowBehavior="Auto" OnLoad="RadScheduler1_Load"
                            SelectedView="WeekView" ShowFooter="false" SelectedDate="2012-01-31" TimeZoneOffset="03:00:00"
                            DayStartTime="08:00:00" DayEndTime="21:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday"
                            EnableDescriptionField="true" AppointmentStyleMode="Default">
                            <WebServiceSettings Path="../WebService/SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
                            <AdvancedForm Modal="true"></AdvancedForm>
                            <TimelineView UserSelectable="false"></TimelineView>
                            <AgendaView UserSelectable="true" />
                                <%--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"
                                    BorderColor="#abd962" />
                                <telerik:ResourceStyleMapping Type="Calendar" Text="Work"
                                    BorderColor="#25a0da" />
                                <div class="rsResourceHeader<%# Eval("Text") %>">
                                    <%# Eval("Text") %>
                            <TimeSlotContextMenuSettings EnableDefault="true" />
                            <AppointmentContextMenuSettings EnableDefault="true" />
                            <Localization HeaderWeek="Work week" />
    <div class="qsf-overview-qr">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Scheduler.png" AlternateText="" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        <a href=""></a>