New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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

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="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="scheduler" TagName="AdvancedForm" Src="AdvancedFormCS.ascx" %>
<!DOCTYPE html>
<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>

Support & Learning Resources

Find Assistance