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

Customizing the Appointment

  • today
April 2012
April 2012
SMTWTFS
       
1234567
891011121314
15161718192021
22232425262728
2930     
4/16/2012 - 4/20/2012
  • Day
  • Week
  • Month
  • Timeline
all day
8AM
​
9AM
​
10AM
​
11AM
​
12PM
​
1PM
​
2PM
​
3PM
​
4PM
​
5PM
​
Lunch
Assigned to:  Charlie
Grand Canyon tour
Assigned to:  None
Breakfast
Assigned to:  Alex
Appointment with the dentist
Assigned to:  Alex
Take the car to the service
Assigned to:  Alex
Technical meeting
Assigned to:  Bob
Technical meeting
Assigned to:  Bob
Technical meeting
Assigned to:  Bob
Technical meeting
Assigned to:  Bob
Technical meeting
Assigned to:  Bob
Meeting with Alex
Assigned to:  None
Bowling tournament
Assigned to:  None
Show 24 hours...

Dismiss AllDismissOpen Item
Click Snooze to be reminded again in:
Snooze
5 minutes before start
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.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Scheduler.Examples.CustomizeAppointment.DefaultVB" %>

<%@ 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='<%# If (Container.Appointment.Resources.GetResourceByType("User") is Nothing, "None" , Container.Appointment.Resources.GetResourceByType("User").Text) %>'></asp:Label>
                    </strong>
                    <br />
                    <asp:CheckBox ID="CompletedStatusCheckBox" runat="server" Text="Completed? " TextAlign="Left"
                        Checked='<%#  If (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