KB Article K18084
Visible to All Users

How to customize appointment appearance via web templates

Description:
I know that the web controls appearance is customizable via templates. Is this technique applicable for the ASPxScheduler visual elements? For example, how can I display additional info within the appointment in the way I like?

Answer:
ASPxScheduler, as well as most of the Developer Express web controls, supports the customization mechanism based on templates. The web control templates enable you to provide visual extensibility for the scheduler interface elements.
Now you can modify the appointment appearance with ease. It is possible because appointments are implemented using editable web templates.
We'll elaborate on how the mechanism works and construct a template, to display a custom field.
An appointment template is actually a user control with all parts of an appointment being elements of an asp page which forms a control. There are three templates representing different kinds of appointments - VerticalAppointmentTemplate, HorizontalAppointmentTemplate and HorizontalSameDayAppointmentTemplate. Each template has its own template container. A template container is actually another composite control used to contain templates that you define. The container is visible from the code-behind file as well as from the ascx file.
For each appointment element the container stores a template item with all necessary information to display that element. The Items property provides access to a particular template item via the dot (.) operator.
Look at the VerticalAppointmentTemplate.ascx file. It contains the ASPxLabel element with ID=”lblTitle” . This element is responsible for displaying the appointment header. Template container for the element stores an object of AppointmentTextItem type, accessible via the Items.Title property. This object holds the header’s text and the style to apply to the text when rendering for display.
To bind an ASPxLabel element to the related element of the container, a binding expression is used. The binding expression for the Text property is shown below:

C#
Text='<%#((VerticalAppointmentTemplateContainer)Container).Items.Title.Text%>'

The style required to display a text of ASPxLabel is applied while the template is loading, within the Page_Load event handling code, as follows:

C#
lblTitle.ControlStyle.MergeWith(Items.Title.Style);

Each appointment element has its own template item. The default items for the vertical appointment are : horizontalSeparator, lblStartTime, lblEndTime, lblTitle, lblDescription. Images are represented by elements of the Items.Images collection.
The main style of an appointment, defining the style of the DIV element which encompasses an appointment, is accessible via the Items.AppointmentStyle property.
Summarizing the above, you can modify the page’s mark-up and control the page elements via code in the code-behind file to create appointments designed as you require.
Problem:
We’ve got appointments with a custom field – e.g. price. The field’s value, if not empty, should be displayed in an appointment below the description, formatted as “Price: $xx”.
Solution:
1. Create a custom template based on existing VerticalAppointmentTemplate. The instruction is enclosed within the template file located at ~\DevExpress\ASPxSchedulerForms\VerticalAppointmentTemplate.ascx in your project. To put it simply, you should make a copy of this file, rename it, register it via the @Register directive in aspx page and specify its usage for each of the desired views within the Templates tag enclosed within the View-related tag of the ASPxScheduler control representation on a page.
2. Look for ASPxLabel with ID=”lblDescription” . Add the following piece of HTML in a table below the label:

JavaScript
<tr><td> <br /> <dxe:ASPxLabel runat="server" ID="lblPriceHeader" ForeColor="DarkBlue" Text="Price: " Visible="true"></dxe:ASPxLabel> <dxe:ASPxLabel runat="server" ID="lblPrice" ForeColor="DarkBlue" Visible="true"></dxe:ASPxLabel> </td></tr>

3. Add code for the PageLoad event:

C#
object cfPrice = Container.AppointmentViewInfo.Appointment.CustomFields["Price"]; if (cfPrice != DBNull.Value) { Decimal price = Convert.ToDecimal(cfPrice); lblPrice.Text = price.ToString("c2"); //set the style identical to the description lblPrice.ControlStyle.MergeWith(Items.Description.Style); lblPriceHeader.ControlStyle.MergeWith(Items.Description.Style); } else { //hide the field if no data is available lblPrice.Visible = false; lblPriceHeader.Visible = false; }

The result is shown below:

See Also:
InitAppointmentDisplayText Event
InitAppointmentImages Event
AppointmentViewInfoCustomizing Event

Comments (2)

    Does this also work for the AgendaView?

    DevExpress Support Team 7 years ago

      Hello Maarten,
      I see that you have already created a separate ticket regarding customizing an appointment template in the Agenda view:
      Scheduler AgendeView cusomize TemplateContent
      Would you mind if we continue discussion there?
      Your ticket is currently in our processing queue and we will answer you there as soon as we can.

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.