How to add textblock to calendarview in winui

Question

Need to add a Text box in Calendar view in WinUi

Tired using synfusion and it worked well and searching for some other open source calendar APIs for WinUi

Answer 1

This UserControl should give you a way to start:

CustomCalendarView.xaml

<UserControl
    x:Class="CalendarViewTests.CustomCalendarView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:CalendarViewTests"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <CalendarView
            x:Name="CalendarViewControl"
            HorizontalAlignment="Stretch"
            CalendarItemBorderBrush="DimGray"
            CalendarItemBorderThickness="1"
            CalendarItemCornerRadius="0"
            DayItemFontSize="10"
            DayItemFontWeight="ExtraLight"
            HorizontalDayItemAlignment="Center"
            VerticalDayItemAlignment="Top">
            <CalendarView.CalendarViewDayItemStyle>
                <Style TargetType="CalendarViewDayItem">
                    <Setter Property="FontSize" Value="10" />
                    <Setter Property="FontWeight" Value="ExtraLight" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Grid
                                    Margin="5"
                                    VerticalAlignment="Bottom">
                                    <TextBlock Text="{Binding}" />
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CalendarView.CalendarViewDayItemStyle>
        </CalendarView>
    </Grid>
</UserControl>

CustomCalendarView.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using System.Collections.Generic;
using System.Linq;

namespace CalendarViewTests;

public record CustomCalendarViewDayItem
{
    public CustomCalendarViewDayItem(DateTime dateTime, string text)
    {
        DateTime = dateTime;
        Text = text;
    }

    public DateTime DateTime { get; }

    public string Text { get; }
}

public sealed partial class CustomCalendarView : UserControl
{
    public static readonly DependencyProperty DayItemsProperty = DependencyProperty.Register(
        nameof(DayItems),
        typeof(IEnumerable<CustomCalendarViewDayItem>),
        typeof(CustomCalendarView),
        new PropertyMetadata(default));

    public CustomCalendarView()
    {
        InitializeComponent();
        this.CalendarViewControl.CalendarViewDayItemChanging += CalendarViewControl_CalendarViewDayItemChanging;
    }

    public IEnumerable<CustomCalendarViewDayItem> DayItems
    {
        get => (IEnumerable<CustomCalendarViewDayItem>)GetValue(DayItemsProperty);
        set => SetValue(DayItemsProperty, value);
    }

    private void CalendarViewControl_CalendarViewDayItemChanging(CalendarView sender, CalendarViewDayItemChangingEventArgs args)
    {
        if (DayItems.Where(x => DateOnly.FromDateTime(x.DateTime) == DateOnly.FromDateTime(args.Item.Date.Date))
            .Select(x => x.Text)
            .FirstOrDefault() is string dayItemText)
        {
            args.Item.DataContext = dayItemText;
        }
    }
}

And use it like this:

MainPage.xaml

<Page
    x:Class="CalendarViewTests.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:CalendarViewTests"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    mc:Ignorable="d">

    <Grid ColumnDefinitions="*,*">
        <local:CustomCalendarView
            Grid.Column="0"
            DayItems="{x:Bind DayItems, Mode=OneWay}" />
        <CalendarView
            x:Name="CalendarViewControl"
            Grid.Column="1">
            <CalendarView.CalendarViewDayItemStyle>
                <Style TargetType="CalendarViewDayItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <TextBlock Text="{Binding}" />
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </CalendarView.CalendarViewDayItemStyle>
        </CalendarView>
    </Grid>
</Page>

MainPage.xaml.cs

using Microsoft.UI.Xaml.Controls;
using System;
using System.Collections.ObjectModel;

namespace CalendarViewTests;

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        DayItems.Add(new CustomCalendarViewDayItem(DateTime.Now.AddDays(-5), "5 days ago"));
        DayItems.Add(new CustomCalendarViewDayItem(DateTime.Now);
        DayItems.Add(new CustomCalendarViewDayItem(DateTime.Now.AddDays(5), "Tommorrow "));
    }

    public ObservableCollection<CustomCalendarViewDayItem> DayItems { get; } = new();
}