This article demonstrates how to style specific calendar cells with events, so that additional information about events
is displayed.
First we will create two classes for the events information:
And we have to set the page data context to the ViewModel class:
XAML | Copy |
---|
<Page.DataContext>
<local:ViewModel />
</Page.DataContext> |
Now the key part is to retrieve the events information from the calendar DataContext (set to ViewModel).
For the purpose we create custom class that inherits from the IValueConverter class and in the Convert method we return the information
about the event we want to be displayed in the TextBlock binding in calendar cells with events:
C# | Copy |
---|
public class CellModelToEventConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
var cellModel = value as CalendarCellModel;
var calendar = cellModel.Presenter as RadCalendar;
var events = (calendar.DataContext as ViewModel).Events;
var eventInfo = events.Where(e => e.Date == cellModel.Date).FirstOrDefault();
if (eventInfo != null)
{
return eventInfo.Title;
}
return cellModel.Label;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
} |
We also have to create a CustomStyleSelector class to set the CellTemplate of the cells holding the events:
C# | Copy |
---|
public class CustomStyleSelector : CalendarCellStyleSelector
{
public DataTemplate EventTemplate { get; set; }
protected override void SelectStyleCore(CalendarCellStyleContext context, Telerik.UI.Xaml.Controls.Input.RadCalendar container)
{
var events = (container.DataContext as ViewModel).Events;
if (events.Where(e => e.Date == context.Date).Count() > 0)
{
context.CellTemplate = this.EventTemplate;
}
}
} |
After we have created all the classes we need, we are ready to piece them together in XAML.
In the grid resources we define:
CellModelToEventConverter - retrieves the event infotmation to be displayed in the calendar cells;
DataTemplate - defines the template that will be used by the CustomStyleSelector to display the information from the CellModelToEventConverter;
CustomStyleSelector - defines a style selector that will be bound to the calendar CellStyleSelector property.
XAML | Copy |
---|
<Grid.Resources>
<local:CellModelToEventConverter x:Key="eventConverter" />
<DataTemplate x:Key="template">
<Grid>
<TextBlock Text="⏰" Foreground="#FF3399FF" FontSize="15" HorizontalAlignment="Right" FontFamily="Segoe UI Symbol" Margin="0,1,2,0" />
<TextBlock Text="{Binding Converter={StaticResource eventConverter}}" Foreground="#FF767676" FontSize="13.333" VerticalAlignment="Bottom" Margin="6,0,0,4" />
</Grid>
</DataTemplate>
<local:CustomStyleSelector x:Key="selector" EventTemplate="{StaticResource template}" />
</Grid.Resources> |
Finally we define our calendar:
XAML | Copy |
---|
<telerik:RadCalendar CellStyleSelector="{StaticResource selector}" Width="700" Height="400" /> |
And this is the result: