How to highlight particular days in Calendar?

[alessandrofrancesconi]

I have a <Calendar> and I need to highlight particular days.

For example, currently I have this UI (today is 17th):

While I need to re-color some cells depending on some logic:

thanks for the help!

[timunie]

Maybe a converter for DayButton.Background 🤔

[alessandrofrancesconi]

Can you give a hint please?

[timunie]

Actually looks like it is not as easy as I thought. We may need to add a property Date to each CalendarDayButton in oder to use it inside our converter. Can you make a feature request for it?

[ATZ-FR]

We set bolded dates this way:

  <Window.Resources>
    <local:BoldedDateMultiConverter x:Key="BoldedDateMultiConverter"/>

    <ControlTheme x:Key="{x:Type CalendarDayButton}" 
                  TargetType="CalendarDayButton" 
                  BasedOn="{StaticResource {x:Type CalendarDayButton}}">
      <Setter Property="FontWeight">
        <MultiBinding Converter="{StaticResource BoldedDateMultiConverter}">
          <Binding x:DataType="CalendarDayButton"/>
          <Binding Path="$parent[Calendar]"/>
        </MultiBinding>
      </Setter>
    </ControlTheme>
  </Window.Resources>

and the code behind:

    public class MyCalendar : Avalonia.Controls.Calendar
    {
        public DateTime[] MonthDates { get; set; }

        protected override Type StyleKeyOverride => typeof(Avalonia.Controls.Calendar);
    }

    public class BoldedDateMultiConverter : IMultiValueConverter
    {
        public object Convert(IList<object> values, Type targetType, object parameter, CultureInfo culture)
        {
            if (values is [DateTime date, MyCalendar calendar])
            {
                if (calendar.MonthDates?.Where(x => x.Day == date.Day).Any() ?? false)
                    return FontWeight.Bold;
            }
            return FontWeight.Normal;
        }
    }

...
    // bold 10 and 20 day of each month
    cal1.MonthDates = new DateTime[] { new DateTime(1900, 1, 10), new DateTime(1900, 1, 20) };

[timunie]

that is a good idea however if I wanted to mark the 1st bold, I belive also the 1st of the next month would be bold by this converter. So I still think it would be a good addition if DayButton exposes it's date assigned. This would also enable some string-formating on Content I guess.

[alessandrofrancesconi]

With your inputs I managed to get what I needed. I use DateOnly[] to store the dates that I want to highlight, then I change the background color of the CalendarDayButton if it contains one of the stored dates. Thanks!

public class HighlightedCalendar : Avalonia.Controls.Calendar
{
    public DateOnly[] HighlightedDates { get; set; }

    protected override Type StyleKeyOverride => typeof(Avalonia.Controls.Calendar);
}

public class HighlightedDateMultiConverter : IMultiValueConverter
{
    public object Convert(IList<object> values, Type targetType, object parameter, CultureInfo culture)
    {
        if (values is [DateTime date, HighlightedCalendar calendar])
        {
            var dateOnly = DateOnly.FromDateTime(date);
            if (calendar.HighlightedDates?.Where(x => x.Equals(dateOnly)).Any() ?? false)
                return Brush.Parse("#6c1313");
        }

        return Brushes.Transparent;
    }
}


<UserControl.Resources>
	<views:HighlightedDateMultiConverter x:Key="HighlightedDateMultiConverter"/>
	<ControlTheme x:Key="{x:Type CalendarDayButton}"
					TargetType="CalendarDayButton"
					BasedOn="{StaticResource {x:Type CalendarDayButton}}">
		<Setter Property="Background">
			<MultiBinding Converter="{StaticResource HighlightedDateMultiConverter}">
				<Binding x:DataType="CalendarDayButton"/>
				<Binding Path="$parent[Calendar]"/>
			</MultiBinding>
		</Setter>
	</ControlTheme>
</UserControl.Resources>

[maxkatz6]

I think you can simplify it a bit by avoiding custom types:

<Calendar>
    <Calendar.Styles>
        <Style Selector="CalendarDayButton">
		<Setter Property="Background">
			<MultiBinding Converter="{StaticResource HighlightedDateMultiConverter}">
				<Binding x:DataType="CalendarDayButton"/>
				<Binding Path="$parent[Calendar].DataContext.HighlightedDates"/>
			</MultiBinding>
		</Setter>
        </Style>
    </Calendar.Styles>
</Calendar>

This method makes an assumption that your ViewModel has HighlightedDates property. If you use compiled bindings, you might also need to cast DataContext.

[rickx]

Hello, I'm working on the same idea and tried what was suggested here with little success. Particularly, I can't see how any of these solutions could return a Date using <Binding x:DataType="CalendarDayButton"/>. What I get is this

i.e. a probably just initialized instance of the button with its default content (1) which means no meaningful binding possible.
So either things changed in the last year or I'm missing something. Any help appreciated...