How to: Customize Appointment Appearance

• Nov 29, 2023
• 3 minutes to read

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

View Example: Customize Appointment Appearance

Create an Appointment Template

1. Create a new 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.

   MainWindow.xaml

   <DataTemplate x:Key="appointmentContentTemplate">
       <dxschv:AppointmentContentPanel>
           <dxschv:AppointmentContentPanel.Background>
               <LinearGradientBrush StartPoint="0,0" EndPoint="0, 1">
                   <GradientStop Color="White" Offset="0" />
                   <GradientStop Color="Transparent" Offset="0.5" />
               </LinearGradientBrush>
           </dxschv:AppointmentContentPanel.Background>
           <dxschv:AppointmentContentPanel.IntervalSubject>
               <dxschv:AppointmentIntervalSubjectPresenter/>
           </dxschv:AppointmentContentPanel.IntervalSubject>
           <dxschv:AppointmentContentPanel.Location>
               <dxschv:AppointmentLocationPresenter FontWeight="Normal" Foreground="Blue" />
           </dxschv:AppointmentContentPanel.Location>
           <dxschv:AppointmentContentPanel.Description>
               <StackPanel>
                   <dxschv:FastTextBlock Text="{Binding Appointment.CustomFields[Note]}" FontWeight="Normal" Foreground="Red"/>
                   <dxschv:AppointmentDescriptionPresenter FontWeight="Normal" Margin="0,1,0,0" WordWrap="True"/>
               </StackPanel>
           </dxschv:AppointmentContentPanel.Description>
           <dxschv:AppointmentContentPanel.Images>
               <dxschv:AppointmentImagesPanel/>
           </dxschv:AppointmentContentPanel.Images>
       </dxschv:AppointmentContentPanel>
   </DataTemplate>
   

   Add the following namespace declaration to use the sample template:

   XAML

   xmlns:dxschv="http://schemas.devexpress.com/winfx/2008/xaml/scheduling/visual"
   

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:

   ConditionToImageSourceConverter.cs

   public class ConditionToImageSourceConverter : IValueConverter {
       public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
           if (value != null) {
               if ((bool)value)
                   return DXImageHelper.GetImageSource(@"Office2013\Actions\Show_16x16.png");
           }
           return null;
       }
       public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
           return value;
       }
   }
   

   ConditionToImageSourceConverter.vb

   Public Class ConditionToImageSourceConverter
       Implements IValueConverter
   
       Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.Convert
           If value IsNot Nothing Then
               If DirectCast(value, Boolean) Then
                   Return DXImageHelper.GetImageSource("Office2013\Actions\Show_16x16.png")
               End If
           End If
           Return Nothing
       End Function
       Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As CultureInfo) As Object Implements IValueConverter.ConvertBack
           Return value
       End Function
   End Class
   Public Class ConditionToImageSourceConverterExtension
       Inherits MarkupExtension
   
       Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
           Return New ConditionToImageSourceConverter()
       End Function
   End Class
   

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

   C#

   public class ConditionToImageSourceConverterExtension : MarkupExtension {
       public override object ProvideValue(IServiceProvider serviceProvider) {
           return new ConditionToImageSourceConverter();
       }
   }
   

   VB.NET

   Public Class ConditionToImageSourceConverterExtension
       Inherits MarkupExtension
   
   Public Overrides Function ProvideValue(ByVal serviceProvider As IServiceProvider) As Object
           Return New ConditionToImageSourceConverter()
       End Function
   End Class
   

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

   MainWindow.xaml

   <Style x:Key="appointmentStyle" TargetType="dxschv:AppointmentControl">
       <Setter Property="ShowInterval" Value="True"/>
       <Setter Property="ShowDescription" Value="True"/>
       <Setter Property="ImageBoxTemplate" Value="{StaticResource myImageBox}"/>
   </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:

   MainWindow.xaml

   <dxsch:DayView AppointmentContentTemplate="{StaticResource appointmentContentTemplate}" 
                  AppointmentStyle="{StaticResource appointmentStyle}"
                  ShowAllDayArea="False"
                  ShowWorkTimeOnly="True" 
                  DayCount="3"/>
   <dxsch:WorkWeekView AppointmentContentTemplate="{StaticResource appointmentContentTemplate}"
                       ShowWorkTimeOnly="True" />
   

View the Result

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