Different templates for day and week view

[Dirk Wilhelm]

Hello,

i would like to style appointments using different templates for day and weekview using a templateselector.

So for examle on dayview i can display more or bigger text than in weekview.

Regards,

  Dirk

[Vidyalakshmi Mani]

Hi Dirk,

Thank you for reaching out to us. You can dynamically change the appointment template in the MAUI `SfScheduler` based on the selected view (Day or Week) using a `DataTemplateSelector` and the `ViewChanged` event.  

To achieve this:  

- Define a `SelectedView` property in the ` AppointmentTemplateSelector ` class (This class inherits from DataTemplateSelector, which allows choosing a template dynamically) to track the current `SchedulerView`.  

- In the `ViewChanged` event, retrieve the `AppointmentTemplateSelector` from the resources and update its `SelectedView` with the newly selected view (`e.NewView`).  

- In the `OnSelectTemplate` method of the ` AppointmentTemplateSelector ` class, return the appropriate template (`DayViewTemplate` or `WeekViewTemplate`) based on the `SelectedView`.  

Here’s a code snippet for your reference:

AppointmentTemplateSelector class:

 

public class AppointmentTemplateSelector : DataTemplateSelector

{

    public AppointmentTemplateSelector()

    {

    }

    public DataTemplate DayViewTemplate { get; set; }

    public DataTemplate WeekViewTemplate { get; set; }

 

    public SchedulerView SelectedView { get; set; }

 

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)

    {

        if (this.SelectedView == SchedulerView.Day)

        {

            return DayViewTemplate;

        }

        else

        {

            return WeekViewTemplate;

        }

 

    }

}

 

MainPage.xaml:

 

<ContentPage.BindingContext>

     <local:ViewModel />

 </ContentPage.BindingContext>

 

 <Grid x:Name="Grid">

     <Grid.Resources>

         <DataTemplate x:Key="dayViewTemplate">

             <Grid Background="LightGreen">

                 <Label x:Name="label"

                        HorizontalOptions="Center"

                        VerticalOptions="Center"

                        TextColor="Black"

                        FontSize="12"

                        Text="{Binding Subject}" />

             </Grid>

         </DataTemplate>

         <DataTemplate x:Key="weekViewTemplate">

             <Grid Background="MediumPurple">

                 <Label x:Name="label"

                        HorizontalOptions="Center"

                        VerticalOptions="Center"

                        TextColor="White"

                        FontSize="12"

                        Text="{Binding Subject}" />

             </Grid>

         </DataTemplate>

           

         <local:AppointmentTemplateSelector x:Key="appointmentTemplateSelector"

                                                                            DayViewTemplate="{StaticResource dayViewTemplate}"

                                                                            WeekViewTemplate="{StaticResource weekViewTemplate}" />

     </Grid.Resources>

 

     <scheduler:SfScheduler x:Name="Scheduler"

                            View="Week"

                            AppointmentsSource="{Binding Appointments}"

                            AllowedViews="Day,Week"

                            ViewChanged="Scheduler_ViewChanged">

         <scheduler:SfScheduler.DaysView>

             <scheduler:SchedulerDaysView AppointmentTemplate="{StaticResource appointmentTemplateSelector}" />

         </scheduler:SfScheduler.DaysView>

     </scheduler:SfScheduler>

 

 </Grid>

 

MainPage.xaml.cs:

   

public partial class MainPage : ContentPage

{

     

        public MainPage()

        {

            InitializeComponent();

        }

 

        private void Scheduler_ViewChanged(object sender, SchedulerViewChangedEventArgs e)

        {

            var template = this.Grid.Resources["appointmentTemplateSelector"];

 

            if (template != null && template is AppointmentTemplateSelector appointmentTemplateSelector)

            {

                appointmentTemplateSelector.SelectedView = e.NewView;

            }

        }

}

 

We've prepared a sample demonstrating this approach. Please review the attached sample and let us know if you need any further assistance.  

  

Regards,
Vidyalakshmi M.

Attachment: MauiApp1_2c3d21cb.zip