kb-datetimepicker-howto-change-day-names-foreground.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
How to change the Foreground of the day short names	Color the day short names differently in RadDateTimePicker or RadCalendar.	how-to	Change the Foreground of specific calendar buttons	kb-datetimepicker-howto-change-day-names-foreground	0	change, foreground, day, short, names	1448987	kb

Environment

Product

RadDateTimePicker for WPF

Description

How to change the Foreground of the buttons for the day short names in RadCalendar or RadDateTimePicker.

Solution

Create a custom DataTemplate that sets the Foreground of a TextBlock element inside its Triggers and assign the template to the DayTemplate of the RadCalendar. If you are using a RadDateTimePicker, you can do that through its CalendarStyle property.

[XAML] Example 1: Conditionally coloring the day short names

{{region xaml-kb-datetimepicker-howto-change-day-names-foreground-0}}

<Grid xmlns:calendar="clr-namespace:Telerik.Windows.Controls.Calendar;assembly=Telerik.Windows.Controls.Input">
    <Grid.Resources>
        <DataTemplate x:Key="DayTemplate">
            <TextBlock x:Name="buttonTextBlock" Text="{Binding}"  />
            <DataTemplate.Triggers>
                <DataTrigger Binding="{Binding ButtonType, RelativeSource={RelativeSource AncestorType=calendar:CalendarButton}}" Value="WeekName">
                    <Setter TargetName="buttonTextBlock" Property="Foreground" Value="Yellow" />
                </DataTrigger>
            </DataTemplate.Triggers>
        </DataTemplate>

        <!-- If you are using the NoXaml dlls, you should add the BasedOn attribute: BasedOn="{StaticResource RadCalendarStyle}"-->
        <Style x:Key="CalendarStyle" TargetType="telerik:RadCalendar" >
            <Setter Property="DayTemplate" Value="{StaticResource DayTemplate}" />
        </Style>
    </Grid.Resources>
    
    <telerik:RadDateTimePicker InputMode="DatePicker" CalendarStyle="{StaticResource CalendarStyle}"  VerticalAlignment="Center" HorizontalAlignment="Center" />
</Grid>

{{endregion}}

Figure 1: Result from Example 1

See Also

• [How to Customize the Calendar Buttons]({%slug radcalendar-styling-and-appearance-daybuttonstyleselector%})