Edit this page

Using DayTemplateSelector

This help topic explains in details how you can customize and apply a different DataTemplate to RadCalendar’s buttons by creating a custom DataTemplateSelector.

The article will go through on how to:

  • Create a custom DayButtonTemplateSelector
  • Customize the CalendarButton Template
  • Set the DayTemplateSelector of RadCalendar

Firstly, you need to create a DayButtonTemplateSelector class that inherits the DataTemplateSelector class:

C#

public class DayButtonTemplateSelector : DataTemplateSelector
{

}

Next we need to define the needed DataTemplates and override the SelectTemplate method. For this concrete scenario the days on which a new Template should be set are stored in collections named "SpecialHolidays" and “BookedDays” - based on your condition, in the particular case comparison between the Days of the Calendar with the one from the collections, you return the proper DataTemplate that should be applied:

C#

        public DataTemplate DefaultTemplate { get; set; }
        public DataTemplate BookedDayTemplate { get; set; }
        public DataTemplate SpecialHolidayTemplate { get; set; }

              public List<DateTime> BookedDays { get; set; }
              public List<DateTime> SpecialHolidays { get; set; }

              public override DataTemplate SelectTemplate(object item, DependencyObject container)
              {
                  var calendarButton = item as CalendarButtonContent;
                  var currDate = calendarButton.Date;
                  if (calendarButton.ButtonType == CalendarButtonType.Date)
                  {
                      if (this.BookedDays.Any(a => a.Date.Day == currDate.Day))
                      {
                          return this.BookedDayTemplate;
                      }

                      if (this.SpecialHolidays.Any(a => a.Date.Day == currDate.Day))
                      {
                          return this.SpecialHolidayTemplate;
                      }
                  }

                  return this.DefaultTemplate;
              }

As a next step you need to create a StaticResource in XAML for the DayButtonTemplateSelector and the Templates that contains:

XAML

<local:DayButtonTemplateSelector x:Key="DayButtonTemplateSelector">
    <local:DayButtonTemplateSelector.DefaultTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Text}" />
        </DataTemplate>
    </local:DayButtonTemplateSelector.DefaultTemplate>
    <local:DayButtonTemplateSelector.BookedDayTemplate>
        <DataTemplate>
            <Grid>
                <Path Data="M3.9,1.9 L3.9,4.9 L5.9,4.9 L5.9,1.9 z M4.9,0 C6.5,0 7.9,1.3 7.9,2.9 L7.9,4.9 L10,4.9 L10,12 L0,12 L0,4.9 L1.9,4.9 L1.9,2.9 C1.9,1.3 3.2,0 4.9,0 z" 
              Fill="LightSalmon"
              Height="28" 
              Stretch="Fill" 
              UseLayoutRounding="False"
              Width="32"
              Opacity="0.4"/>
                <TextBlock Text="{Binding Text}" 
                   Margin="0 6 0 0"
                   Foreground="Black" 
                   FontWeight="Bold" 
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </local:DayButtonTemplateSelector.BookedDayTemplate>
    <local:DayButtonTemplateSelector.SpecialHolidayTemplate>
        <DataTemplate>
            <Grid>
                <Path Data="M11.5,0 L14.2,8.3 L23.0,8.3 L16,13.5 L18.6,22 L11.5,16.7 L4.4,22 L7.1,13.5 L0,8.3 L8.7,8.3 z" 
              Fill="#FF25A0DA" 
              Height="34"
              Stretch="Fill"
              UseLayoutRounding="False"
              Width="34"
              Opacity="0.4"/>
                <TextBlock Text="{Binding Text}" 
                   Margin="0 5 0 0"
                   Foreground="Black"
                   FontWeight="Bold" 
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </local:DayButtonTemplateSelector.SpecialHolidayTemplate>
</local:DayButtonTemplateSelector>

The last step is to set the DayTemplateSelector property of the control:

XAML

<telerik:RadCalendar DayTemplateSelector="{StaticResource DayButtonTemplateSelector}" />

The following figure demonstrates the final result:

radcalendar-styling-and-appearance-daytemplateselector-1

You can download a runnable project of the previous example from our online SDK repository here, the example is listed as RadCalendar/UsingDayTemplateSelector.