Category / Section
How to customize the month view appointments using the DataTemplate in WPF Scheduler (Calendar)
1 min read
You can customize the default appearance of the month cell appointment by using the AppointmentTemplate property of MonthViewSettings in WPF SfScheduler.
XAML
Bind the appointments to a schedule using the Scheduler.ItemsSource property and bind the EventName and color to the Text and Background of TextBlock by using the AppointmentTemplate property in MonthViewSettings.
<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>
<syncfusion:MonthViewSettings.AppointmentTemplate>
<DataTemplate >
<TextBlock Margin="5,0,0,0"
Foreground="PaleGreen"
Background="{Binding color}"
FontStyle="Oblique"
HorizontalAlignment="Stretch"
Text="{Binding EventName}"
TextTrimming="CharacterEllipsis"/>
</DataTemplate>
</syncfusion:MonthViewSettings.AppointmentTemplate>
</syncfusion:MonthViewSettings>
</syncfusion:SfScheduler.MonthViewSettings>
</syncfusion:SfScheduler>
</Grid>
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#
Create a ViewModel class and add the appointment details.
public class SchedulerViewModel : INotifyPropertyChanged
{
private ObservableCollection<Meeting> meetings;
public SchedulerViewModel()
{
Meetings = new ObservableCollection<Meeting>();
Meeting meeting = new Meeting();
meeting.color = colorCollection[random.Next(10)];
meeting.From = today.AddMonths(month).AddDays(day);
meeting.To = meeting.From.AddHours(2);
this.Meetings.Add(meeting);
}
}
