[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
   [Expand]Getting Started
   [Expand]Visual Elements
   [Expand]Styles and Templates
   [Expand]Design-Time Features
    Time Zones
   [Expand]Data Binding
    Appearance Customization
    Clipboard Operations
    Printing Templates
    Drag and Drop Customization
    End-User Restrictions
    [Expand]How to: Create Recurrence in Code
     How to: Display the Integrated Ribbon for the Scheduler
     How to: Create the Scheduler with the DateNavigator
     How to: Bind Scheduler to Data using the Entity Framework Code First Approach
     How to: Customize Editing and Recurrence Dialogs
     How to: Customize the In-Place Editor
     How to: Create Custom Labels and Statuses
     How to: Customize Appointment Appearance
     How to: Determine what Scheduler Element Is Hovered by the Mouse Pointer
     How to: Set Default Values for a New Appointment
     How to: Print a Scheduler Using Reports from a Document Preview Window
    Migration Guidelines
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Customize Appointment Appearance

The following example provides a step-by-step instruction on how to customize the appointment appearance using a data template.

The topic consists of the following sections:

Expanded Create a New Scheduling Application

  1. Create a new WPF Application project and open the MainWindow.xaml file in the Visual Studio Designer.
  2. Add the SchedulerControl object to your project. You can do this by dragging the SchedulerControl item from the DX.19.1: Scheduling Toolbox tab to the canvas.

  3. Right-click the SchedulerControl object and select Layout | Reset All in the context menu to stretch the SchedulerControl so that it fills the entire window.

Expanded Create an Appointment Template

  1. Create a new System.Windows.DataTemplate object in the resources section.

    This code describes a custom template used to display appointment information in the AppointmentControl. The template is applied explicitly in the Day View by assigning its x:Key to the DayViewBase.AppointmentContentTemplate property.

    Add the following namespace declaration to the MainWindow.xaml file to use the sample template:

  2. This template displays a custom image on a certain condition. If the FirstVisit custom property of an appointment is true, the icon appears.

    Create an ConditionToImageSourceConverter class implementing the IValueConverter interface to display an image depending on an appointment custom field value, as shown in the code below:

  3. Create a markup extension to the ConditionToImageSourceConverter class to provide the value for the Binding.Converter property:

  4. Create a new System.Windows.Style object in the resources section. The following code shows a sample style:

  5. In XAML, use the AppointmentContentTemplate and AppointmentStyle properties of a desired View to apply the created template and style to appointments. The code snippet below shows how to apply the template and style to a DayView:

Expanded View the Result

As a result, appointments appear as shown on the image below:

Expanded See Also

Is this topic helpful?​​​​​​​