How to customize agendaview height based on Scheduler height in WinUI (Calendar)
The Scheduler allows to customize the AgendaViewHeight in runtime. This article explains how to customize the AgendaViewHeight based on the schedule height in runtime.
XAML
Bind the appointments to a schedule by using the ItemsSource property, and set the appointment view as agenda view by enabling the ShowAgendaView property.
<Grid>
<Grid.DataContext>
<local:SchedulerViewModel/>
</Grid.DataContext>
<scheduler:SfScheduler
x:Name="Schedule"
ViewType="Month"
ItemsSource="{Binding Meetings}"
SizeChanged="OnSizeChanged">
<scheduler:SfScheduler.AppointmentMapping>
<scheduler:AppointmentMapping
StartTime="From"
EndTime="To"
AppointmentBackground="color"
Subject="EventName">
</scheduler:AppointmentMapping>
</scheduler:SfScheduler.AppointmentMapping>
<scheduler:SfScheduler.MonthViewSettings>
<scheduler:MonthViewSettings
AppointmentDisplayMode="Indicator"
ShowAgendaView="True">
</scheduler:MonthViewSettings>
</scheduler:SfScheduler.MonthViewSettings>
</scheduler:SfScheduler>
</Grid>
C#
Initialize an event handler for the SizeChanged event of the Scheduler. In the SizeChanged event handler, get the Scheduler height, and based on the Scheduler height, calculate the height for the agenda view. Assign it to the AgendaViewHeight property of the SfSchedule MonthViewSettings.
//Event customization
private void OnSizeChanged(object sender, SizeChangedEventArgs e)
{
this.Schedule.MonthViewSettings.AgendaViewHeight = Schedule.Height * 0.6;
}
C#
Create another class Meeting for the appointment mapping.
public class Meeting
{
public string EventName { get; set; }
public DateTime From { get; set; }
public DateTime To { get; set; }
public Brush color { get; set; }
}
C#
Create a SchedulerViewModel class and map the appointments.
public class SchedulerViewModel : INotifyPropertyChanged
{
private ObservableCollection<Meeting> meetings;
public SchedulerViewModel()
{
this.Meetings = new ObservableCollection<Meeting>();
this.AddAppointmentDetails();
this.AddAppointments();
}
private void AddAppointmentDetails()
{
meetingSubjectCollection = new ObservableCollection<string>();
meetingSubjectCollection.Add("BigDoor Board Meeting Paris, France");
meetingSubjectCollection.Add("Development Meeting New York, U.S.A");
colorCollection = new ObservableCollection<Brush>();
colorCollection.Add(new SolidColorBrush(Colors.Lime));
colorCollection.Add(new SolidColorBrush(Colors.Magenta));
colorCollection.Add(new SolidColorBrush(Colors.Blue));
}
private void AddAppointments()
{
var today = DateTime.Now;
var random = new Random();
for (int month = -1; month < 5; month++)
{
for (int day = -15; day < 15; day++)
{
for (int count = 0; count < 2; count++)
{
var meeting = new Meeting();
meeting.EventName = meetingSubjectCollection[random.Next(meetingSubjectCollection.Count)];
meeting.color = colorCollection[random.Next(10)];
meeting.From = today.AddMonths(month).AddDays(random.Next(0, 28)).AddHours(random.Next(9, 18));
meeting.To = meeting.From.AddHours(2);
this.Meetings.Add(meeting);
}
}
}
}
}
Take a moment to pursue the documentation. You can also find the options like customizing the agenda view height.
