How to show the month agenda view in .NET MAUI Scheduler?
To display the month agenda view in the .NET MAUI SfScheduler control, you can integrate a ListView with the Scheduler’s SelectionChanged event. This setup allows for a convenient view of appointments for a specific date.
Step 1: Begin by adding the SfScheduler control to your XAML page and set its View property to Month.
XAML
<schedule:SfScheduler x:Name="Scheduler"
Grid.Row="0"
ShowBusyIndicator="True"
SelectedDate="{Binding SelectedDate}"
AppointmentsSource="{Binding Events}"
DisplayDate="{Binding DisplayDate}"
View="Month"/>
Step 2: Use a ListView to display appointments for the SelectedDate, positioned beneath the Scheduler.
XAML
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.6*"/>
</Grid.RowDefinitions>
<schedule:SfScheduler x:Name="Scheduler"
Grid.Row="0"
ShowBusyIndicator="True"
SelectedDate="{Binding SelectedDate}"
AppointmentsSource="{Binding Events}"
DisplayDate="{Binding DisplayDate}"
View="Month">
<schedule:SfScheduler.MonthView>
<schedule:SchedulerMonthView NumberOfVisibleWeeks="2" AppointmentDisplayMode="Indicator"/>
</schedule:SfScheduler.MonthView>
<schedule:SfScheduler.AppointmentMapping>
<schedule:SchedulerAppointmentMapping
Subject="EventName"
StartTime="From"
EndTime="To"
Background="Background"
IsAllDay="IsAllDay"
StartTimeZone="StartTimeZone"
EndTimeZone="EndTimeZone"
RecurrenceExceptionDates="RecurrenceExceptions"
RecurrenceRule="RecurrenceRule"
RecurrenceId="RecurrenceId"/>
</schedule:SfScheduler.AppointmentMapping>
</schedule:SfScheduler>
<Grid Grid.Row="1" Margin="0,2,2,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{OnIdiom Desktop = 0.05*, Phone = 0.2*, Default=0.1*}"/>
<ColumnDefinition Width="{OnIdiom Desktop = 0.95*, Phone = 0.8*, Default=0.9*}"/>
</Grid.ColumnDefinitions>
<StackLayout Grid.Column="0">
<Label Text="{Binding SelectedDate, StringFormat='{}{0:ddd}'}"
TextTransform="Uppercase"
FontSize="14"
Margin="0,10,0,0"
BackgroundColor="White"
HorizontalTextAlignment="Center"
TextColor="Gray" />
<AbsoluteLayout BackgroundColor="White"
Margin="0"
Grid.Row="1"
Padding="0">
<BoxView Color="Blue" IsVisible="{Binding IsToday}"
CornerRadius="18"
WidthRequest="36"
HeightRequest="36"
BackgroundColor="Transparent"
AbsoluteLayout.LayoutBounds="0.5,0.1,36,36"
AbsoluteLayout.LayoutFlags="PositionProportional"
VerticalOptions="Center"
HorizontalOptions="Center" />
<Label HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
TextColor="{Binding DateTextColor}"
AbsoluteLayout.LayoutBounds="0.5,0.3,36,36"
AbsoluteLayout.LayoutFlags="PositionProportional"
Text="{Binding SelectedDate, StringFormat='{}{0:dd}'}"/>
</AbsoluteLayout>
</StackLayout>
<Label Text="No events" x:Name="noEventsLabel" Padding="15,15,10,0" Grid.Column="1" FontSize="14" FontAttributes="Bold" TextColor="Gray"/>
<ListView x:Name="appointmentListView"
Grid.Column="1"
RowHeight="44"
ItemsSource="{Binding SelectedDateMeetings}"
SelectionMode="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid Margin="0,0,0,2" Background="{Binding Background}">
<StackLayout Padding="5,5,10,0" Orientation="Vertical">
<Label Text = "{Binding EventName}" FontSize="{OnIdiom Desktop = 12, Phone = 10, Default = 12}" FontAttributes="Bold" TextColor="White" />
<StackLayout Orientation="Horizontal">
<Label Text="{Binding From, StringFormat='{}{0:hh:mm tt}'}" FontSize="10" TextColor="White" />
<Label Text=" - " TextColor="White" FontSize="10" VerticalOptions="Center" HorizontalOptions="Center" />
<Label Text="{Binding To, StringFormat='{}{0:hh:mm tt}'}" FontSize="10" TextColor="White"/>
</StackLayout>
</StackLayout>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
Step 3: Update the AgendaView when a date is selected by subscribing to the SelectionChanged event.
C#
private async void Scheduler_SelectionChanged(object? sender, SchedulerSelectionChangedEventArgs e)
{
if (e.NewValue != null)
{
//// Listview takes time to update items source hence uses delay so that scheduler will be loaded and after the delay listview items will be generated.
await Task.Delay(50);
this.UpdateMonthAgendaViewDetails(e.NewValue.Value);
}
}
Step 4: Implement a method called UpdateAgendaView to update the AgendaView based on the SelectedDate. This method should populate the SelectedDateMeetings collection with appointments for that date and adjust the visibility of the ListView based on whether there are appointments to display.
C#
private void UpdateMonthAgendaViewDetails(DateTime? tappedDate)
{
if (this.scheduler == null || this.noEventsLabel == null || this.appointmentListView == null || tappedDate == null)
{
return;
}
var viewModel = this.scheduler.BindingContext as MonthAgendaViewViewModel;
if (viewModel == null || tappedDate == viewModel.SelectedDate)
{
return;
}
if (tappedDate.Value.Date == DateTime.Now.Date)
{
viewModel.IsToday = true;
viewModel.DateTextColor = Colors.White;
}
else
{
viewModel.IsToday = false;
viewModel.DateTextColor = Colors.Black;
}
if (tappedDate != viewModel.SelectedDate)
{
viewModel.SelectedDate = tappedDate.Value.Date;
}
var appointments = viewModel.GetSelectedDateAppointments(tappedDate.Value.Date);
if (appointments != null && appointments.Count > 0)
{
viewModel.SelectedDateMeetings = appointments;
if (DeviceInfo.Platform != DevicePlatform.Android)
{
this.appointmentListView.IsVisible = true;
this.noEventsLabel.IsVisible = false;
}
else
{
this.appointmentListView.WidthRequest = this.scheduler.Width * 0.8;
this.noEventsLabel.WidthRequest = 0;
}
}
else
{
if (DeviceInfo.Platform != DevicePlatform.Android)
{
this.appointmentListView.IsVisible = false;
this.noEventsLabel.IsVisible = true;
}
else
{
this.appointmentListView.WidthRequest = 0;
this.noEventsLabel.WidthRequest = this.scheduler.Width * 0.8;
}
}
}
Output
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to display Month Agenda View in the .NET MAUI SfScheduler.
You can refer to our .NET MAUI Scheduler’s feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Scheduler documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our .NET MAUI Scheduler and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
