How to set color to multiple days in DatePicker?

Question

I'm wondering if is possible set a specific color to a specific days of the DatePicker, suppose I want tell to the user that in these days: 5, 10, 11, 20, 30 are available some data to see. I need to specify a particular color like blue for example, is this possible?

Doesn't founded anything on the documentation.

Thanks.

Answer 1

DatePicker and Calendar both have out-of-the-box support for blackout dates. You can leverage this functionality to determine which dates are selectable. Then it's a matter of restyling the calendar day buttons to look the way you want. By default, blackout dates have an 'X' through them, but it's probably better to apply colored shading.

First, given some range of 'selectable' dates, compute the inverse ranges. These are the dates that are not selectable, i.e., the blackout dates.

public void SetSelectableDates(IEnumerable<DateTime> times)
{
    var selectableDates = times.Select(d => d.Date).Distinct().OrderBy(o => o).ToList();
    var blackoutRanges = new List<CalendarDateRange>();

    _datePicker.BlackoutDates.Clear();

    if (selectableDates.Count == 0)
    {
        _datePicker.BlackoutDates.Add(
            new CalendarDateRange(DateTime.MinValue, DateTime.MaxValue));
        return;
    }

    var start = DateTime.MinValue;

    foreach (var date in selectableDates)
    {
        var end = date.AddDays(-1);

        if (date != start)
            blackoutRanges.Add(new CalendarDateRange(start, end));

        start = date.AddDays(1);
    }

    blackoutRanges.Add(new CalendarDateRange(start, DateTime.MaxValue));

    foreach (var range in blackoutRanges)
        _datePicker.BlackoutDates.Add(range);
}

Next, set a CalendarStyle that applies a custom CalendarDayButtonStyle to override how the selectable and unselectable dates look in the popup:

<DatePicker.CalendarStyle>
  <Style TargetType="Calendar">
    <Setter Property="CalendarDayButtonStyle">
      <Setter.Value>
        <Style TargetType="CalendarDayButton">
          <Setter Property="MinWidth"
                  Value="5" />
          <Setter Property="MinHeight"
                  Value="5" />
          <Setter Property="FontSize"
                  Value="10" />
          <Setter Property="Padding"
                  Value="5,1,5,1" />
          <Setter Property="HorizontalContentAlignment"
                  Value="Center" />
          <Setter Property="VerticalContentAlignment"
                  Value="Center" />
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="CalendarDayButton">
                <Border x:Name="border"
                        BorderBrush="Transparent"
                        BorderThickness="1"
                        Padding="{TemplateBinding Padding}"
                        Background="{TemplateBinding Background}">
                  <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>
                <ControlTemplate.Triggers>
                  <!--Trigger Property="IsToday" Value="True">
                    <Setter TargetName="border" Property="Background" Value="#FFAAAAAA" />
                  </Trigger-->
                  <Trigger Property="IsSelected" Value="True">
                    <Setter TargetName="border" Property="Background" Value="#FFBADDE9" />
                  </Trigger>
                  <Trigger Property="IsBlackedOut" Value="True">
                    <Setter TargetName="border" Property="TextBlock.Foreground" Value="#FFCCCCCC" />
                  </Trigger>
                  <Trigger Property="IsFocused" Value="True">
                    <Setter TargetName="border" Property="BorderBrush" Value="#FF45D6FA" />
                  </Trigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </Setter.Value>
    </Setter>
  </Style>
</DatePicker.CalendarStyle>

The usual styling rules apply: you'll want to use brushes that are appropriate for your application's theme (or the system theme).

Results: