Category / Section
How to customize the month view appointments using the DataTemplate in WPF Scheduler (Calendar)
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);
}
}
