Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Collapse]Scheduler
   [Expand]Product Information
    Getting Started
   [Expand]Fundamentals
   [Expand]Concepts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Collapse]Examples
    [Expand]Data Binding
    [Expand]Selection
    [Collapse]Customization
     [Expand]Appearance
     [Expand]Behavior
     [Collapse]Custom Forms and Custom Fields
       How to: Customize Appointment Appearance via Templates
       How to: Customize a Form Using Templates
       How to: Modify the Appointment Editing Form for Working with Custom Fields
    [Expand]Printing and Reporting
    [Expand]Miscellaneous
   [Expand]End-User Capabilities
   [Expand]Member Tables
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

How to: Customize Appointment Appearance via Templates

ASPxScheduler control, as well as most of the DevExpress web controls, supports the customization mechanism based on templates. The web control templates enable you to provide visual extensibility for the scheduler interface elements. In particular, an appointment may change its default appearance and look like this:

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.

Expanded 1. Introduction.

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. It is the AppointmentTemplateContainer descendant.

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:

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:

Each appointment element has its own templated 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.

Expanded 2. 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".

Expanded 3. Solution

Expanded Step 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. If this folder is missing, you can create it and copy default templates to your project site using the ASPxScheduler control's Smart Tag, as shown in the Dialog Forms article.

Save a copy of this file with a different name in another location.

Add a Register tag in the .aspx page header for each template you use, as follows:

In the .aspx page find the tags for different scheduler views within the ASPxScheduler control tag. Insert template tags into the tags for the views which should be customized. The template tag should satisfy the following pattern:

where the ShortNameOfTemplate and the NameOfTemplate are the names of the registered templates, defined before in the Register directive.

Expanded Step 2.

Look for ASPxLabel with ID="lblDescription". Add the following piece of HTML in a table below the label:

Expanded Step 3.

Add code for the template page's PageLoad event:

Expanded Step 4. Observe the result.

Note

Note that there are other customization methods. You can use ASPxScheduler.InitAppointmentDisplayText event to customize the display of text and handle ASPxScheduler.InitAppointmentImages to substitute default images. Other appointments properties, such as whether clock images are used to indicate time, background color, font color ant typeface are available for modification within the ASPxScheduler.AppointmentViewInfoCustomizing event handler.

Expanded See Also

How would you rate this topic?​​​​​​​