How to customize the month view appointments using the DataTemplate in WinUI Scheduler (Calendar)
Customize the default appearance of the month cell appointment by using the AppointmentTemplate property of the MonthViewSettings in the WinUI Scheduler.
XAML
Bind the appointments to a schedule using the Scheduler ItemsSource property, and bind the EventName and color to the Text, and Background of the TextBlock by using the AppointmentTemplate property in the MonthViewSettings.
<Grid>
<Grid.DataContext>
<local:SchedulerViewModel/>
</Grid.DataContext>
<scheduler:SfScheduler
x:Name="Schedule"
ViewType="Month"
ItemsSource="{Binding Meetings}">
<scheduler:SfScheduler.AppointmentMapping>
<scheduler:AppointmentMapping
StartTime="From"
EndTime="To"
AppointmentBackground="Color"
Foreground="Foreground"
Subject="EventName">
</scheduler:AppointmentMapping>
</scheduler:SfScheduler.AppointmentMapping>
<scheduler:SfScheduler.MonthViewSettings>
<scheduler:MonthViewSettings>
<scheduler:MonthViewSettings.AppointmentTemplate>
<DataTemplate >
<StackPanel Background="{Binding Data.Color}">
<TextBlock
Margin="5,0,0,0"
Foreground="PaleGreen"
FontStyle="Oblique"
HorizontalAlignment="Stretch"
Text="{Binding Data.EventName}"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
</DataTemplate>
</scheduler:MonthViewSettings.AppointmentTemplate>
</scheduler:MonthViewSettings>
</scheduler:SfScheduler.MonthViewSettings>
</scheduler:SfScheduler>
</Grid>
C#
Create a custom class Meeting with the 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);
}
}
Take a moment to pursue the documentation. You can also find the options to show how to customize the month view appointments.
