How do I use CalendarView to filter through entries like in a journal?

Question

I'm very much a beginner, and I don't even know where to start with the CalendarView.

What I have so far is a simple app where I type into a textbox and click a button and what I typed is appended to a txt file. Every entry has a time stamp added to it with DateTime.

What I want is to be able to click a date on the calendar view and show every entry that occurred on that day, so if there were entries all week long, and I only want to see the entries on the 21st of the month, I would click on the 21st in the calendar view and I would then see all the entries from that day in a ListView or text block or something.

I have no idea where to even start with this. Any and all help is greatly appreciated.

Andrew KeepCoding · Answer

You can start with something like this.

CAUTION

I'm using the CommunityToolkit.Mvvvm NuGet package to implement MVVM.

MainWindowViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;

namespace CalendarViewTest;

public record Entry(DateTimeOffset Timestamp, string Text);

// The "ObservableObject" and "ObservableProperty" 
// are from the CommunityToolkit.Mvvm NuGet package.
// It helps you implement MVVM to your app.
public partial class MainWindowViewModel : ObservableObject
{
    [ObservableProperty]
    // An UI-interactive "FilteredEntries" property will be auto-generated.
    private ObservableCollection? filteredEntries;

    [ObservableProperty]
    // An UI-interactive "TargetDate" property will be auto-generated.
    private DateTime? targetDate;

    public MainWindowViewModel()
    {
        RefreshFilteredEntries();
    }

    private List SourceEntries { get; } = new()
    {
        new(Timestamp: DateTime.Now, "now"),
        new(Timestamp: DateTime.Now.AddMinutes(-1), "a minute ago"),
        new(Timestamp: DateTime.Now.AddHours(-1), "an hour ago"),
        new(Timestamp: DateTime.Now.AddDays(-1), "yesterday"),
        new(Timestamp: DateTime.Now.AddDays(-2), "2 days ago"),
        new(Timestamp: DateTime.Now.AddDays(-3), "3 days ago"),
        new(Timestamp: DateTime.Now.AddMonths(-1), "a month ago"),
    };

    private void RefreshFilteredEntries()
    {
        FilteredEntries = new ObservableCollection(SourceEntries
            .Where(x => x.Timestamp.Date == TargetDate?.Date));
    }

    // This partial method is auto-generated and will be called when "TargetDate" is changed.
    partial void OnTargetDateChanged(DateTime? value)
    {
        RefreshFilteredEntries();
    }
}

MainWindow.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace CalendarViewTest;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    public MainWindowViewModel ViewModel { get; } = new();

    private void CalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
    {
        ViewModel.TargetDate = args.AddedDates.Count > 0
            ? args.AddedDates[0].Date
            : null;
    }
}

MainWindow.xaml

How do I use CalendarView to filter through entries like in a journal?

1 Answers