Scheduler - Customizing Advanced Insert and Edit Forms

  • today
<<<<<>April, 2012
April, 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
Monday, April 16, 2012
  • Day
  • Week
  • Month
all day
8AM
 
9AM
 
10AM
 
11AM
 
12PM
 
1PM
 
2PM
 
3PM
 
4PM
 
5PM
 
Meeting Alex
Show 24 hours...
  • Edit
  • Delete
  • New Appointment
  • New Recurring Appointment
  • Go to today
  • Show 24 hours...

Click Snooze to be reminded again in:
Snooze
5 minutes before start
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • AdvancedFormCS.ascx
    • AdvancedFormCS.ascx
    • BooleanAttributeControlCS.ascx
    • MultipleValuesResourceControlCS.ascx
    • ResourceControlCS.ascx
  • AdvancedFormCS.ascx.cs
    • AdvancedFormCS.ascx.cs
    • BooleanAttributeControlCS.ascx.cs
    • DefaultCS.aspx.cs
    • MultipleValuesResourceControlCS.ascx.cs
    • ResourceControlCS.ascx.cs
  • AdvancedForm.js
    • AdvancedForm.js
    • scripts.js
  • styles.css
<%@ 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>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: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" />
    <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedDate="2012-04-16"
            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>

Find Assistance

Help Us Improve

Was this example helpful?