Category / Section
How to show a timeline view for a week in UWP Schedule (SfSchedule)
1 min read
You can show more than one day in a timeline view by using the ScheduleDateRange, TimeInterval, CustomTimeInterval and IntervalHeight properties of Schedule.
XAML
Set the TimeInterval as custom and CustomTimeInterval as 720 to show 2 timeslots for a day.
<syncfusion:SfSchedule x:Name="schedule" TimeInterval="Custom" CustomTimeInterval="720" ScheduleType="TimeLine"> <interactivity:Interaction.Behaviors> <local:SchedulerBehavior/> </interactivity:Interaction.Behaviors> </syncfusion:SfSchedule>
C#
Add the days which you want to show in a timeline view by using the ScheduleDateRange property. Set the IntervalHeight based on the days in view and timeslot per day in the SizeChanged event.
public class SchedulerBehavior : Behavior<SfSchedule>
{
SfSchedule schedule;
protected override void OnAttached()
{
base.OnAttached();
schedule = this.AssociatedObject;
ObservableCollection<DateTime> dateTimes = new ObservableCollection<DateTime>();
dateTimes.Add(new DateTime(2021, 01, 4));
dateTimes.Add(new DateTime(2021, 01, 5));
dateTimes.Add(new DateTime(2021, 01, 6));
dateTimes.Add(new DateTime(2021, 01, 7));
dateTimes.Add(new DateTime(2021, 01, 8));
dateTimes.Add(new DateTime(2021, 01, 9));
dateTimes.Add(new DateTime(2021, 01, 10));
schedule.ScheduleDateRange = dateTimes;
this.AssociatedObject.SizeChanged += Schedule_SizeChanged;
}
private void Schedule_SizeChanged(object sender, SizeChangedEventArgs e)
{
this.AssociatedObject.IntervalHeight = e.NewSize.Width / 14;
}
protected override void OnDetaching()
{
base.OnDetaching();
this.AssociatedObject.SizeChanged -= Schedule_SizeChanged;
this.schedule = null;
}
}
