How to customize agendaview height based on Scheduler height in WPF (Calendar)
The SfScheduler allows you 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 Scheduler.ItemsSource property and set the appointment view as agenda view by enable the ShowAgendaView property.
<Window.DataContext>
<local:SchedulerViewModel/>
</Window.DataContext>
<Grid>
<syncfusion:SfScheduler
x:Name="Schedule"
ViewType="Month"
ItemsSource="{Binding Meetings}">
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:AppointmentMapping
StartTime="From"
EndTime="To"
AppointmentBackground="color"
Subject="EventName">
</syncfusion:AppointmentMapping>
</syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:SfScheduler.MonthViewSettings>
<syncfusion:MonthViewSettings
AppointmentDisplayMode="Indicator"
ShowAgendaView="True">
</syncfusion:MonthViewSettings>
</syncfusion:SfScheduler.MonthViewSettings>
<interactivity:Interaction.Behaviors>
<local:SchedulerBehavior/>
</interactivity:Interaction.Behaviors>
</syncfusion:SfScheduler>
</Grid>
C#
Initialize an event handler for the SizeChanged event of SfScheduler. In the SizeChanged event handler, get SfScheduler height and based on SfScheduler height, calculate the height for agenda view and assign it to the AgendaViewHeight property of SfSchedule MonthViewSettings.
public class SchedulerBehavior : Behavior<SfScheduler>
{
SfScheduler scheduler;
protected override void OnAttached()
{
base.OnAttached();
scheduler = this.AssociatedObject;
this.AssociatedObject.SizeChanged += AssociatedObject_SizeChanged;
}
private void AssociatedObject_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.AssociatedObject.MonthViewSettings.AgendaViewHeight = scheduler.Height * 0.6;
}
protected override void OnDetaching()
{
base.OnDetaching();
this.AssociatedObject.SizeChanged -= AssociatedObject_SizeChanged;
this.scheduler = null;
}
}
C#
Create another class Meeting for 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");
this.colorCollection = new ObservableCollection<Brush>();
this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFA2C139")));
this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFD80073")));
this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF1BA1E2")));
}
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);
}
}
}
}
}
