Scheduler

Controls

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.

Scheduler - Customizing Advanced Insert and Edit Forms

previous daynext daytoday

Select date
Calendar
Title and navigation
Title and navigation
<<<April, 2012><<
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     

Monday, April 16, 2012

all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
 
 
Technical meeting
delete
 
 
 
 
 
Meeting Alex
delete
 
 
 
 
 
 
 
 
 
 
 

Click Snooze to be reminded again in:
Snooze
select

This example demonstrates how to customize the advanced template using the supplied user controls, which can be found in the folder of your local installation of Telerik.Web.UI suite ->Live Demos\Scheduler\Examples\AdvancedFormTemplate .

Double click on an appointment or a time slot to open the custom advanced form. You will notice that it resembles very much the default advanced form, but it also has a color picker that allows you to specify the appointment's BackColor property.

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Scheduler.Examples.AdvancedFormTemplate.DefaultCS"CodeFile="DefaultCS.aspx.cs" %>
<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="scheduler" TagName="AdvancedForm" Src="AdvancedFormCS.ascx" %>
<!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>Customize ASP.NET Scheduler's advanced form template | RadScheduler demo</title>
<style type="text/css">
          .RadScheduler .rsAptSubject
          {
               text-align: left;
               padding: 4px 0 1px;
               margin: 0 0 3px;
               font-size: 12px;
               font-weight: bold;
               color: #369;
               height: 17px;
               border-bottom: 1px solid #99DEFD;
               width: 100%;
          }
          
          .RadScheduler .rsAdvancedEdit .RadColorPicker label
          {
               text-align: left;
               display: block;
               padding: 0;
          }
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
          <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                    <UpdatedControls>
                         <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
               </telerik:AjaxSetting>
          </AjaxSettings>
     </telerik:RadAjaxManager>
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
     <script type="text/javascript">     
          //<![CDATA[

          // Dictionary containing the advanced template client object
          // for a given RadScheduler instance (the control ID is used as key).
          var schedulerTemplates = {};

          function schedulerFormCreated(scheduler, eventArgs) { 
               // Create a client-side object only for the advanced templates
               var mode = eventArgs.get_mode();
               if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                         mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
                    // Initialize the client-side object for the advanced form
                    var formElement = eventArgs.get_formElement();
                    var templateKey = scheduler.get_id() + "_" + mode;
                    var advancedTemplate = schedulerTemplates[templateKey];
                    if (!advancedTemplate) {
                         // Initialize the template for this RadScheduler instance
                         // and cache it in the schedulerTemplates dictionary
                         var schedulerElement = scheduler.get_element();
                         var isModal = scheduler.get_advancedFormSettings().modal;
                   
                         advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                         advancedTemplate.initialize();

                         schedulerTemplates[templateKey] = advancedTemplate;

                         // Remove the template object from the dictionary on dispose.
                         scheduler.add_disposing(function () {
                              schedulerTemplates[templateKey] = null;
                         });
                    }

                    // Are we using Web Service data binding?
                    if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                         // Populate the form with the appointment data
                         var apt = eventArgs.get_appointment();
                         var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                         advancedTemplate.populate(apt, isInsert);
                    }
               }
          }
               
          //]]>
     </script>
     <div class="exampleContainer">
                    <telerik:RadScheduler runat="server" ID="RadScheduler1" SelectedDate="2012-04-16"
               TimeZoneOffset="03:00:00" OnDataBound="RadScheduler1_DataBound" AppointmentStyleMode="Default"
               OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
               OnClientFormCreated="schedulerFormCreated" CustomAttributeNames="AppointmentColor"
               EnableDescriptionField="true">
               <AdvancedForm Modal="true" EnableTimeZonesEditing="true" />
               <Reminders Enabled="true" />
               <AppointmentTemplate>
                    <div class="rsAptSubject">
                         <%# Eval("Subject") %>
                    </div>
                    <%# Eval("Description") %>
               </AppointmentTemplate>
               <AdvancedEditTemplate>
                    <scheduler:AdvancedForm runat="server" ID="AdvancedEditForm1" Mode="Edit" Subject='<%# Bind("Subject") %>'
                         Description='<%# Bind("Description") %>' Start='<%# Bind("Start") %>' End='<%# Bind("End") %>'
                         RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Reminder='<%# Bind("Reminder") %>'
                         AppointmentColor='<%# Bind("AppointmentColor") %>' UserID='<%# Bind("User") %>'
                         RoomID='<%# Bind("Room") %>' TimeZoneID='<%# Bind("TimeZoneID") %>' />
               </AdvancedEditTemplate>
               <AdvancedInsertTemplate>
                    <scheduler:AdvancedForm runat="server" ID="AdvancedInsertForm1" Mode="Insert" Subject='<%# Bind("Subject") %>'
                         Start='<%# Bind("Start") %>' End='<%# Bind("End") %>' Description='<%# Bind("Description") %>'
                         RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' Reminder='<%# Bind("Reminder") %>'
                         AppointmentColor='<%# Bind("AppointmentColor") %>' UserID='<%# Bind("User") %>'
                         RoomID='<%# Bind("Room") %>' TimeZoneID='<%# Bind("TimeZoneID") %>' />
               </AdvancedInsertTemplate>
               <TimelineView UserSelectable="false" />
               <TimeSlotContextMenuSettings EnableDefault="true" />
               <AppointmentContextMenuSettings EnableDefault="true" />
          </telerik:RadScheduler>
     </div>
     
    </form>
</body>
</html>