Display meeting in CalendarView - Windows 10 UWP

Question

i am new to Windows 10 UWP-Apps and try to create a calendar app. On my page, the user can create a meeting. Here i have two textboxes for titel and location and a datepicker. With the (speichern-)safe-button you can save the meeting.

Now my question is, is there any possibility to see the meeting in the CalendarView? I try to figure out, how the day in CalendarView gets a point-symbol by creating a meeting. And if the user click on this day, he can see the meeting-information.

private void btnSpeichern_Click(object sender, RoutedEventArgs e)
{
    TerminAnlegen();
    showDialog("Termin wurde hinzugefügt.");
}

public async void TerminAnlegen()
{
    StorageFolder Ordner = ApplicationData.Current.LocalFolder;
    StorageFile Datendatei = await Ordner.CreateFileAsync("kalender.txt", CreationCollisionOption.ReplaceExisting);

    string Daten = tbTitel.Text + ", " + tbOrt.Text + ", " + datePicker.Date;
    if(Daten != "")
    {
        await FileIO.WriteTextAsync(Datendatei, Daten);
    }
}

Thank you for your help! Sarah

Answer 1

I have written a blogpost which could be helpful to understand how the CalendarView generates individual days.

In your case, you will need to subscribe to the CalendarViewDayItemChanging event and wait for it to be executed for the date you are looking for. The CalendarViewDayItemChangingEventArgs contains an Item property of type CalendarViewDayItem , which in turn has a Date property , which you can check.

Once you have the CalendarViewDayItem you want to adjust, you can access its visual tree (you can use VisualTreeHelper methods) and add your own child in it. You can also set a custom ControlTemplate to render custom content on top of the "date".

Note - if you need to add the customization after the CalendarView dates were already rendered, you can do so as well by searching for CalendarViewDayItem types in the CalendarView 's visual tree.

You may find the Visual Tree Extensions from Windows Community Toolkit useful:-).

Full example

XAML:

<StackPanel>
    <DatePicker x:Name="Picker" />
    <Button Click="Button_Click">Add</Button>
    <CalendarView CalendarViewDayItemChanging="Calendar_CalendarViewDayItemChanging" x:Name="Calendar" />
</StackPanel>

C#:

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private List<DateTimeOffset> _highlightedDates = new List<DateTimeOffset>();

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        _highlightedDates.Add(Picker.Date.Date);
        UpdateCalendar();
    }

    private void UpdateCalendar()
    {
        var displayedDays = Calendar.FindDescendants<CalendarViewDayItem>();
        foreach (var displayedDay in displayedDays)
        {
            if (_highlightedDates.Contains(displayedDay.Date.Date))
            {
                //highlight
                displayedDay.Background = new SolidColorBrush(Colors.Red);
            }
        }
    }

    private void Calendar_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
    {
        if (_highlightedDates.Contains(args.Item.Date))
        {
            //highlight
            args.Item.Background = new SolidColorBrush(Colors.Red);
        }
    }
}