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

Customizing the Appointment

today

April 2012

April 2012
S	M	T	W	T	F	S

1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

4/16/2012 - 4/20/2012

Day
Week
Month
Timeline

Mon, 16	Tue, 17	Wed, 18	Thu, 19	Fri, 20

all day

8AM

9AM

10AM

11AM

12PM

1PM

2PM

3PM

4PM

5PM

		Lunch Assigned to: Charlie Completed?		Grand Canyon tour Assigned to: None Completed?
Breakfast Assigned to: Alex Completed?	Appointment with the dentist Assigned to: Alex Completed?		Take the car to the service Assigned to: Alex Completed?



Technical meeting Assigned to: Bob Completed?	Technical meeting Assigned to: Bob Completed?	Technical meeting Assigned to: Bob Completed?	Technical meeting Assigned to: Bob Completed?	Technical meeting Assigned to: Bob Completed?






		Meeting with Alex Assigned to: None Completed?



	Bowling tournament Assigned to: None Completed?

Show 24 hours...

About this demo
C#
VB
Download demo code files
Isolate this demo as a stand-alone application

RadScheduler appointments are customized in three different ways:

Setting the BackColor property conditionally in the AppointmentDataBound event to distinguish appointments with status Completed. The AppointmentStyleMode property of the RadScheduler is set to Default to render appointments with rounded corners and gradient background.

Other related properties that you can set are - BorderColor, BorderStyle, BorderWidth, and CssClass .
Using ResourceStyleMapping to distinguish appointments based on the assigned resource.

<ResourceStyles> <telerik:ResourceStyleMapping Type="User" Key="1" BackColor="Yellow" /> </ResourceStyles>
Using AppointmentTemplate to display additional information about the appointment, such as a resource or description, with custom markup and styling. The appointment object is accessed declaratively like this:
```
                <%# Container.Appointment.[PropertyName]%>;
           
```
Nested controls in AppointmentTemplate can be accessed in AppointmentCreated. This event can be also used to dynamically add controls to the appointment.

The appointment object can be found in a server-side event handler of a nested control to allow you to directly interact with the appointment:
```
        SchedulerAppointmentContainer appContainer = (SchedulerAppointmentContainer)CompletedStatusCheckBox.Parent;
        Appointment appointment = appContainer.Appointment;
            
```

This demo provides an example of the RadScheduler control demonstrating how you can directly interact with the appointment object to change its status. To do so, you will need to click the checkbox in the appointment and see how its color changes. For more information you can also check the demo Description.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Scheduler.Examples.CustomizeAppointment.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container no-bg">
        <telerik:RadScheduler RenderMode="Lightweight" runat="server" Height="700px" ID="RadScheduler1" CustomAttributeNames="Completed"
            FirstDayOfWeek="Monday" LastDayOfWeek="Friday" Reminders-Enabled="true" SelectedView="WeekView"
            RowHeight="30px" SelectedDate="2012-04-16" AppointmentStyleMode="Default" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
            OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnNavigationComplete="RadScheduler1_NavigationComplete" OverflowBehavior="Auto">
            <AdvancedForm Modal="true"></AdvancedForm>
            <AppointmentTemplate>
                <div class="appointmentHeader">
                    <asp:Panel ID="RecurrencePanel" CssClass="rsAptRecurrence" runat="server" Visible="false">
                    </asp:Panel>
                    <asp:Panel ID="RecurrenceExceptionPanel" CssClass="rsAptRecurrenceException" runat="server"
                        Visible="false">
                    </asp:Panel>
                    <asp:Panel ID="ReminderPanel" CssClass="rsAptReminder" runat="server" Visible="false">
                    </asp:Panel>
                    <%#Eval("Subject") %>
                </div>
                <div>
                    Assigned to:&nbsp;<strong>
                        <asp:Label ID="UserLabel" runat="server" Text='<%# Container.Appointment.Resources.GetResourceByType("User") == null ? "None" : Container.Appointment.Resources.GetResourceByType("User").Text %>'></asp:Label>
                    </strong>
                    <br />
                    <asp:CheckBox ID="CompletedStatusCheckBox" runat="server" Text="Completed? " TextAlign="Left"
                        Checked='<%# String.IsNullOrEmpty(Container.Appointment.Attributes["Completed"])? false : Boolean.Parse(Container.Appointment.Attributes["Completed"]) %>'
                        AutoPostBack="true" OnCheckedChanged="CompletedStatusCheckBox_CheckedChanged"></asp:CheckBox>
                </div>
            </AppointmentTemplate>
            <ResourceStyles>
                <telerik:ResourceStyleMapping Type="User" Key="1" BackColor="YellowGreen"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="User" Key="2" BackColor="Pink"></telerik:ResourceStyleMapping>
                <telerik:ResourceStyleMapping Type="User" Key="3" BackColor="OrangeRed"></telerik:ResourceStyleMapping>
            </ResourceStyles>
        </telerik:RadScheduler>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Submit a support ticket if you have an active license or trial
Post in the forum if you don't have access to support

Customizing the Appointment

Related Resources

Support & Learning Resources

Find Assistance