OnMonthCellLoaded missing

[Peter Mortley]

Previously in the Xamarin version, it was possible to provide sophisticated cell modification at the point of the MonthCell being loaded. For instance, query the day against a list of events, and then loading an image for a specific day into the MonthCell.

I can see that the new MAUI control has moved to the design of using DataTemplateSelector, but I cannot see how I could load a specific image from a queried set of events to modify the appearance of the cell using a DataTemplateSelector. Can you advise how I might progress to be able to achieve what was previously possible in Xamarin?

[Indumathi Ravichandran]

Hi Peter,

In Xamarin Calendar, the MonthCellLoaded event facilitates achieving a required UI by utilizing the CellBindingContext. However, in .NET MAUI Calendar, the BindingContext of the CellTemplate is predefined as CalendarCellDetails, which includes the Date and IsTrailingOrLeadingDate properties. By using the Date property in the CalendarCellDetails, you can customize the required date cell as per your requirement.

Code snippet:

 

public class MonthCellTemplateSelector : DataTemplateSelector

{

    public MonthCellTemplateSelector()

    {

    }

    public DataTemplate NormalDateTemplate { get; set; }

    public DataTemplate TodayDateTemplate { get; set; }

    public DataTemplate LeadingTrailingDateTemplate { get; set; }

 

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

    {

        var monthCellDetails = item as CalendarCellDetails;

        if (monthCellDetails.Date == DateTime.Today.Date)

            return TodayDateTemplate;

        else if (monthCellDetails.IsTrailingOrLeadingDate)

            return LeadingTrailingDateTemplate;

        else

            return NormalDateTemplate;

    }

}

 

<Grid>

    <Grid.Resources>

        <DataTemplate x:Key="normalDateTemplate">

            <Grid Background = "Pink" >

                <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Black" Text="{Binding Date.Day}"/>

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="todayDateTemplate">

            <Grid Background = "PaleGreen">

                <Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" TextColor="Black" Text="{Binding Date.Day}"/>

            </Grid>

        </DataTemplate>

        <DataTemplate x:Key="leadingTraililngDateTemplate">

            <Grid Background = "Purple">

                <Image Source="dotnet_bot.png" HeightRequest="30" WidthRequest="30"/>

            </Grid>

        </DataTemplate>

        <local:MonthCellTemplateSelector x:Key="monthCellTemplateSelector"

                                        TodayDateTemplate="{StaticResource todayDateTemplate}"

                                        NormalDateTemplate="{StaticResource normalDateTemplate}"

                                        LeadingTrailingDateTemplate="{StaticResource leadingTraililngDateTemplate}"/>

    </Grid.Resources>

    <calendar:SfCalendar x:Name="Calendar"

                    View="Month" >

        <calendar:SfCalendar.MonthView>

            <calendar:CalendarMonthView CellTemplate="{StaticResource monthCellTemplateSelector}" />

        </calendar:SfCalendar.MonthView>

    </calendar:SfCalendar>

</Grid>

Also, we have prepared a simple sample for customizing the month cell using images for leading and trialing dates. Please find the sample from the following link.

Please find the documentation for cell customization.

Month Cell Appearance Using DataTemplate

Month Cell Appearance Using DataTemplateSelector

We hope that this helps you. Please let us know if you need further information.

Regards,

Indumathi R

Attachment: TemplateSelectorSample_ff1a5e1c.zip