Scheduler

Controls

SharePoint Web Parts

Editor
Grid
ListView
Scheduler

Support Resources

Integration Examples

Q1 2013 released 04/17/2013
next demo
view source rate / review
get trial buy now
All Controls

Scheduler

Rate this demo

Thank you for your post!

RadScheduler - Telerik's ASP.NET Scheduler

Calendar
Title and navigation
<<<January 2012>>>
January 2012
 SuMoTuWeThFrSa
5325262728293031
11234567
2891011121314
315161718192021
422232425262728
52930311234

previous daynext daytoday

Select date
Calendar
Title and navigation
<<<January 2012>>>
January 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    

1/30/2012 - 2/3/2012

all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
6PM
 
7PM
 
8PM
 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

About RadScheduler for ASP.NET AJAX

RadScheduler is powerful control which allows users to create and manage tasks. It supports variety of data binding options which enables you to work with data sources that are as simple or as powerful as you want. Having the ability to use different skins, form templates, custom attributes, localization and much more, makes the RadScheduler a highly configurable control letting you adapt the user interface exactly to your own special purposes. Now you can add rich scheduling UI to any ASP.NET application and enjoy a lightweight, yet highly customizable, component. Impress your users with intuitive drag-and-drop functionality, handy inline or pop-up edit forms, and no-refresh AJAX experience!

RadScheduler and 70+ other controls are part of RadControls for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on the business logic of the app.

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.

RadScheduler is popupulated 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 RadControls) to quickly create, upgrade and configure your RadControls 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 RadControls, 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:
scheduler/examples/overview

Key Features

  • Support for various Data Sources.
  • Day, Week, Month & TimeLine Views.
  • Reminders.
  • Resource and Resource Grouping.
  • Templates.
  • Client-side API.
  • Export to Pdf.
  • Keyboard Support.
Read details on RadScheduler’s product page

Resources

C# VB
Show code in new window Demo isolation steps 
<%@ Page Language="c#" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Scheduler.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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET scheduler examples | RadScheduler control demo</title>
     <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

     <script type="text/javascript">
          //<![CDATA[
          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 %>' );
               scheduler.rebind();
          }

          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] );
                    scheduler.set_selectedDate( selectedDate );
               }
               SchedulerNavigationCompleteAlreadyOccurred = false;
          }

          function OnClientNavigationComplete( sender, args ) {
               SchedulerNavigationCompleteAlreadyOccurred = true;
               var selectedDate = sender.get_selectedDate();
               calendar1.navigateToDate( [selectedDate.format( "yyyy" ), selectedDate.format( "MM" ), selectedDate.format( "dd" )] );
          }
          //]]>
     </script>

     <div class="qsf-demo-canvas">

          <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"
                                   EnableMonthYearFastNavigation="true">
                                   <ClientEvents OnDateSelected="OnCalendar1DateSelected"
                                        OnCalendarViewChanged="OnCalendar1ViewChanged" />
                              </telerik:RadCalendar>

                         </telerik:RadPane>
                         <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">
                                   <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 runat="server" ID="Button1" Text="Group" OnClick="Button1_Click"
                                                                 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."
                                                                 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 runat="server" ID="RadScheduler1" Skin="Metro" Height="450"
                         OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"
                         OnClientNavigationComplete="OnClientNavigationComplete"
                         OnClientAppointmentsPopulating="OnClientAppointmentsPopulating"
                         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>
                         <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"
                                   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>
     </div>


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

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.

Copyright 2002-2013 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451