Category / Section
How to format the Scheduler view (Calendar) time slot label in WPF
6 mins read
You can customize the schedule view label by using the TimeRulerFormat property in each ScheduleView in WPF SfScheduler.
C#
Create a custom class Meeting with mandatory fields From, To, EventName and color.
public class Meeting
{
public string EventName { get; set; }
public DateTime From { get; set; }
public DateTime To { get; set; }
public Brush color { get; set; }
}
C#
You can define the list of custom appointments in a separate class of ViewModel.
public class SchedulerViewModel : INotifyPropertyChanged
{
/// <summary>
/// collecions for meetings.
/// </summary>
private ObservableCollection<Meeting> meetings;
/// <summary>
/// color collection.
/// </summary>
private List<Brush> colorCollection;
/// <summary>
/// current day meeting.
/// </summary>
private List<string> currentDayMeetings;
public SchedulerViewModel()
{
this.Meetings = new ObservableCollection<Meeting>();
this.AddAppointmentDetails();
this.AddAppointments();
}
/// <summary>
/// Gets or sets meetings.
/// </summary>
public ObservableCollection<Meeting> Meetings
{
get
{
return this.meetings;
}
set
{
this.meetings = value;
this.RaiseOnPropertyChanged("Meetings");
}
}
/// <summary>
/// adding appointment details.
/// </summary>
private void AddAppointmentDetails()
{
this.currentDayMeetings = new List<string>();
this.currentDayMeetings.Add("General Meeting");
this.currentDayMeetings.Add("Plan Execution");
this.currentDayMeetings.Add("Project Plan");
this.currentDayMeetings.Add("Consulting");
this.colorCollection = new List<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")));
this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFE671B8")));
this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFF09609")));
this.colorCollection.Add(new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF339933")));
/// <summary>
/// Adds the appointments.
/// </summary>
private void AddAppointments()
{
var today = DateTime.Now.Date;
var random = new Random();
for (int month = -1; month < 2; month++)
{
for (int day = -5; day < 5; day++)
{
for (int count = 0; count < 2; count++)
{
var meeting = new Meeting();
meeting.From = today.AddMonths(month).AddDays(random.Next(1, 28)).AddHours(random.Next(9, 18));
meeting.To = meeting.From.AddHours(1);
meeting.EventName = this.currentDayMeetings[random.Next(7)];
meeting.Color = this.colorCollection[random.Next(14)];
this.Meetings.Add(meeting);
}
}
}
}
}
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 Meetings}"
Margin="0">
<syncfusion:SfScheduler.AppointmentMapping>
<syncfusion:AppointmentMapping
StartTime="From"
EndTime="To"
AppointmentBackground="Color"
Subject="EventName">
</syncfusion:AppointmentMapping>
</syncfusion:SfScheduler.AppointmentMapping>
</syncfusion:SfScheduler>
</Grid>
XAML
Customize the TimelineView label by setting the TimeRulerFormat property of TimelineViewSettings.
<syncfusion:SfScheduler.TimelineViewSettings> <syncfusion:TimelineViewSettings TimeRulerFormat="hh:mm"> </syncfusion:TimelineViewSettings> </syncfusion:SfScheduler.TimelineViewSettings>
XAML
Customize the WeekView, DayView, WorkWeekView label by setting the TimeRulerFormat property of DayViewSettings.
<syncfusion:SfScheduler.DaysViewSettings> <syncfusion:DaysViewSettings TimeRulerFormat="hh:mm"> </syncfusion:DaysViewSettings> </syncfusion:SfScheduler.DaysViewSettings>
