How to customize the time label of WPF Scheduler (Calendar)

1 min read

SfScheduler allows you customize the time label text of schedule views. The time label text can be customized for DayView, WeekView, WorkWeekView and TimelineView by using the TimeRulerFormat property of TimelineViewSettings and DaysViewSettings in SfScheduler.

XAML

Bind the appointments to a schedule using the Scheduler.ItemsSource property.

<Window.DataContext>
<local:SchedulerViewModel />
</Window.DataContext>
<Grid>
<syncfusion:SfScheduler 
        x:Name="Schedule" 
        ViewType="Timeline"
        ItemsSource="{Binding AppointmentCollection }">
    <interactivity:Interaction.Behaviors>
        <local:SchedulerBehavior/>
    </interactivity:Interaction.Behaviors>
</syncfusion:SfScheduler>
</Grid>

Create a ViewModel class with recurring appointments by setting the RecurrenceRule property in ScheduleAppointment .

public class SchedulerViewModel
{
    public ScheduleAppointmentCollection AppointmentCollection { get; set; } = new ScheduleAppointmentCollection();
    public SchedulerViewModel()
    {
        //Adding schedule appointment in schedule appointment collection 
        ScheduleAppointment appointment1 = new ScheduleAppointment()
        {
            StartTime = new DateTime(2020, 11, 10, 10, 0, 0),
            EndTime = new DateTime(2020, 11, 10, 11, 0, 0),
            Subject = "Booked",
            AppointmentBackground = new SolidColorBrush(Colors.Red),
        };
        //Creating recurrence rule
        appointment1.RecurrenceRule = "FREQ=DAILY;INTERVAL=2;COUNT=10";
        //Adding schedule appointment in the schedule appointment collection
        AppointmentCollection.Add(appointment1);
    }
}

Initialize an object for TimelineViewSettings and append the required string value with time slot value, and assign it to the TimeRulerFormat property of TimelineViewSettings.

TimelineViewSettings timelineViewSettings = new TimelineViewSettings();
timelineViewSettings.StartHour = 0;
timelineViewSettings.EndHour = 23;
timelineViewSettings.TimeRulerFormat = string.Format("'Room'") + " " + "HH";
this.AssociatedObject.TimelineViewSettings = timelineViewSettings;

Initialize an object for DaysViewSettings and append the required string value with time slot value, and assign it to the TimeRulerFormat property of DaysViewSettings.

DaysViewSettings daysViewSettings = new DaysViewSettings();
daysViewSettings.StartHour = 0;
daysViewSettings.EndHour = 23;
daysViewSettings.TimeRulerFormat = string.Format("'Room'") + " " + "HH";
this.AssociatedObject.DaysViewSettings = daysViewSettings;

View sample in GitHub

TimelineView

Demo image Timeline view