Show Appointments show UWP CalendarViewDayItem

Question

what I'm trying to do, is to show day relevant appointments in the CalendarViewDayItem of my CalendarView.

My AppointmentClass:

public class CalJobItemVM : ViewModelBase
{
    public CalJobItemVM() { }
    public CalJobItemVM(ServiceJob serviceJob)
    {
        Title = serviceJob.EON
        Date = serviceJob.StartDate
    }
    private string _title;
    public string Title
    {
        get { return _title; }
        set { Set(ref _title, value); }
    }
    private DateTimeOffset _date;
    public DateTimeOffset Date
    {
        get { return _date; }
        set { Set(ref _date, value); }
    }
}

in my Page.Resources I have the following construct:

<Style TargetType="CalendarViewDayItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="CalendarViewDayItem">
                <ListView>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid Height="26" HorizontalAlignment="Stretch">
                                <TextBlock Text="{Binding Title}"/>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In theory I'd like to bind a List to the ItemsSource of the CalendarView and depending on the Date, a selection of appointments should be added to the ItemsSource of the CalendarViewDayItem. Sadly I didn't find any aproach in doing so. The binding structure should be like this:

CalendarView (ItemsSource = List<CalJobItemVM>())
     |-> CalendarViewDayItem (ItemsSource = CalendarView.ItemsSource.Where(x=>x.Date == CalendarViewDayItem.Date)
              |-> ListView (ItemsSource = CalendarViewDayItem.ItemsSource)

OR:

CalendarView (ItemsSource = List<CalJobItemVM>())
     |-> ListView (ItemsSource = CalendarView.ItemsSource.Where(x=>x.Date == ParentControl.Date)

OR to overwrite the ItemsSource of ListView, that it filters the returned collection of CalJobItemMV filtered by the Date-Value of its ParentControl (CalendarViewDayItem).

I understand that CalendarView and CalendarViewDayItem do not have a ItemsSource, so I'm hoping also for an advice how to modify both controls in a way they support ItemsSource.

Also any alternative approach (who does not use code-behind) for my problem is very welcome.

Answer 1

Take a look at the example of Phased Rendering. This sample allows you to add colored bars to each day using the SetDensityColors method. This is probably better suited for a small calendar view.

If you must have a list of items, you can do the following:

<CalendarView CalendarViewDayItemChanging="OnCalendarViewDayItemChanging"
              HorizontalDayItemAlignment="Right" VerticalDayItemAlignment="Top">
    <CalendarView.CalendarViewDayItemStyle>
        <Style TargetType="CalendarViewDayItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="CalendarViewDayItem">
                        <Grid Margin="0,40,0,0">
                            <ListView ItemsSource="{Binding}">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid Height="26" HorizontalAlignment="Stretch">
                                            <TextBlock Text="{Binding Title}"/>
                                        </Grid>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </CalendarView.CalendarViewDayItemStyle>
</CalendarView>

In your code behind, set the datacontext of the item:

private void OnCalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
{
    // Render basic day items.
    if (args.Phase == 0)
    {
        // Register callback for next phase.
        args.Item.DataContext = GetCalJobItemVM(args.Item.Date);
    }
}