All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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;
<%@ 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: <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>