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 utilize a ListView and the SelectionChanged event. This 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: Define the layout for displaying the AgendaView below the Scheduler control. You can use a ListView to show the list of appointments for the SelectedDate.
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: Handle the SelectionChanged event of the Scheduler to update the AgendaView when the selected date changes.
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 UpdateAgendaView to update the AgendaView based on the SelectedDate, and populate the SelectedDateMeetings collections 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
Conclusion
I hope you enjoyed learning about 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. You can 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!
