Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

Scheduler / Web Service

previous daynext daytoday

Select date
<<<January 2012>>>
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
293031    

1/30/2012 - 2/3/2012

8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
Show 24 hours...

  • Uncheck or check a category from the panelbar to filter RadScheduler by a resource.

    This demo also uses a plugin for jQuery - Templates. You can check the markup and the scripts involved in the .aspx files.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Scheduler_Examples_WebService_DefaultCS" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
    <!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">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
        #exampleContainer {
            min-height: 0;
            _zoom: 1;
        }
        #exampleContainer:after {
            content: "";
            height: 0;
            clear: both;
            display: block;
        }
        #scheduler-container {
            width: 700px;
            float: left;
        }
        #settings-container {
            float: right;
        }
        </style>
    </head>
    <body class="BODY">
        <form id="Form1" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="C#" />
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                <asp:ScriptReference Path="Scripts/jquery.tmpl.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <%--<Templates>--%>
        <script id="tmplAppDescription" type="text/x-jquery-tmpl">
                <div style='font-style:italic;'>${Description}</div>
        </script>
        <%--</Templates>--%>
        <script type="text/javascript">
            //<![CDATA[
            var categoryNames = new Array();

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

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

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

            function onSchedulerDataBound(scheduler) {
                var $ = jQuery;
                $(".rsAptDelete").each(function () {
                    var apt = scheduler.getAppointmentFromDomElement(this);
                    // creating an object containing the data that should be applied on the template
                    var tmplValue = { Description: apt.get_description() };
                    // instantiate the template, populate it and insert before the delete handler (".rsAptDelete")
                    $("#tmplAppDescription").tmpl(tmplValue).insertBefore(this);
                });
            }

        
             //]]>
        </script>
        <div class="exampleContainer">
            <div id="settings-container">
                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="150px">
                    <Items>
                        <telerik:RadPanelItem runat="server" Text="My Team Calendars" Expanded="true">
                            <Items>
                                <telerik:RadPanelItem runat="server">
                                    <ItemTemplate>
                                        <div class="rpCheckBoxPanel">
                                            <div>
                                                <input id="chkDevelopment" type="checkbox" title="Development" onclick="rebindScheduler()"
                                                    value="Development" checked="checked" name="Development" />
                                                <span>Development</span>
                                            </div>
                                            <div>
                                                <input id="chkMarketing" type="checkbox" title="Marketing" onclick="rebindScheduler()"
                                                    value="Marketing" checked="checked" name="Marketing" />
                                                <span>Marketing</span>
                                            </div>
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                        <telerik:RadPanelItem runat="server" Text="My Calendar" Expanded="true">
                            <Items>
                                <telerik:RadPanelItem runat="server">
                                    <ItemTemplate>
                                        <div class="rpCheckBoxPanel">
                                            <div>
                                                <input id="chkPersonal" type="checkbox" title="Personal" onclick="rebindScheduler()"
                                                    value="Personal" checked="checked" name="Personal" />
                                                <span>Personal</span>
                                            </div>
                                            <div>
                                                <input id="chkWork" type="checkbox" title="Work" onclick="rebindScheduler()" value="Work"
                                                    checked="checked" name="Work" />
                                                <span>Work</span>
                                            </div>
                                        </div>
                                    </ItemTemplate>
                                </telerik:RadPanelItem>
                            </Items>
                        </telerik:RadPanelItem>
                    </Items>
                </telerik:RadPanelBar>
            </div>
            <div id="scheduler-container">
                <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedView="WeekView" SelectedDate="2012-01-31"
                    TimeZoneOffset="03:00:00" FirstDayOfWeek="Monday" LastDayOfWeek="Friday" StartEditingInAdvancedForm="false"
                    OnClientAppointmentsPopulating="OnClientAppointmentsPopulating" OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"
                    EnableDescriptionField="true" AppointmentStyleMode="Default" OnClientDataBound="onSchedulerDataBound"
                    ShowAllDayRow="False">
                    <AdvancedForm Modal="true" />
                    <TimelineView GroupBy="Calendar" GroupingDirection="Vertical" />
                    <WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />
                    <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="Development" BackColor="#D0ECBB"
                            BorderColor="#B0CC9B" />
                        <telerik:ResourceStyleMapping Type="Calendar" Text="Marketing" ApplyCssClass="rsCategoryRed" />
                        <telerik:ResourceStyleMapping Type="Calendar" Text="Work" ApplyCssClass="rsCategoryOrange" />
                    </ResourceStyles>
                    <TimeSlotContextMenuSettings EnableDefault="true" />
                    <AppointmentContextMenuSettings EnableDefault="true" />
                </telerik:RadScheduler>
            </div>
        </div>
        <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

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