Binding Date (or Date "Range") collection to RadCalendar

[Craig]

I am trying to use the RadCalendar (for WPF) to display multiple months and shade (color background) school and public holidays. Some questions:

1. Using custom IValueConverters or creating a StyleSelector seems to let me affect the CalendarButtonContent Properties or Style (respectively), but only Font Size/Weight and not Background/Border. Is this because these are CalendarButton properties? What is the simplest way to set the background of all the holiday dates?

2. In the IValueConverter or StyleSelector I have to manually 'range check' each Date. Is there a way to DataBind to this control (a collection of DateTime)? When people use the 'selection' ability to add a new holiday date/range, I want to just update the underlying collection and have that selection now 'background colored'.

3. I have set the following properties (expecting the calendar to show the entire "year" of 2008 from January to December)... but it always starts with August (the current month) in the top-left rather than January.

SelectableDateStart="2008-01-01"

SelectableDateEnd="2008-12-31"

DisplayDateStart="2008-01-01"

DisplayDateEnd="2008-12-31"

SelectedDate="2008-01-01"

Rows="4"

Columns="3" 

Tia...

[Hristo]

Hello Craig,

Straight to the questions:

1. Using IValueConverter or StyleSelector allows you to affect CalendarButton control, however, the default CalendarButton Style does not bind to Background, Border or BorderBrush properties. Therefore, if you want to change these, the only way to do so is to edit the control template and make the appropriate changes (e.g. bind to those properties).

2. I'm not sure whether I understand what you are trying to accomplish here so further explanation will be much appreciated.

3. The DisplayDate property controls starting Month in RadCalendar. Adding DisplayDate="2008-01-01" will make the calendar start with January as a top left month.

If you have any other questions I will be glad to help.


Greetings,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Craig]

Thanks Hristo, #3 works fine (seems obvious once you know it).

Re #1, is there any sample/doc on accomplishing this with the WPF RadCalendar? This is what I've started to try:

<Style x:Key="CalendarButtonStyle" TargetType="{x:Type t:CalendarButton}"><Setter Property="Background" Value="Transparent" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type t:CalendarButton}"><Border BorderThickness="2" BorderBrush="SlateBlue" Padding="1,1,1,1" CornerRadius="0" Background="{TemplateBinding Background}"><ContentPresenter /></Border></ControlTemplate></Setter.Value></Setter></Style>

<Telerik:RadCalendar Grid.Row="1" DisplayDate="2008-01-01" DayTemplate="{StaticResource CalendarButtonDataTemplate}" Rows="3" Columns="4" />

But the DayName and WeekNumber 'headers' are affected as well, so clearly I'm still not quite on the right track.

Re #2, I think I want to set RadControl.DataContext to an ObservableCollection of DateTimes or something, and have them 'shaded/unshaded' (ie background color changed) as the collection is modified...

Thanks for your speedy assistance - much appreciated.

p.s. I'm sure you guys are aware of this - but having the WPF and ASP.NET controls use the same name (eg. RadCalendar) makes it tricky to google for code samples or assistance!

[Hristo]

Hello Craig,

Currently, there are no examples showing how to change Calendar's theme. However, you can always edit our control templates in Blend and see how a theme can be changed.

About #1 - we are using the same CalendarButton control for showing days, months, years, decades, weeknumbers and weeknames. Therefore, 'DayName and WeekNumber 'headers' are affected as well'. You can remove the border's thickness using some triggers. Here is how:

<telerik:RadCalendar
    SelectableDateStart="2008-01-01"
    SelectableDateEnd="2008-12-31"
    DisplayDateStart="2008-01-01"
    DisplayDateEnd="2008-12-31"
    DisplayDate="2008-01-01"
    SelectedDate="2008-01-01"
    Rows="4"
    Columns="3">
    <telerik:RadCalendar.DayButtonStyle>
        <Style TargetType="{x:Type t:CalendarButton}">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type t:CalendarButton}">
                        <Border x:Name="border" BorderThickness="2" BorderBrush="SlateBlue" Padding="1" Background="{TemplateBinding Background}">
                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ButtonType" Value="WeekNumber">
                                <Setter TargetName="border" Property="BorderThickness" Value="0" />
                            </Trigger>
                            <Trigger Property="ButtonType" Value="WeekName">
                                <Setter TargetName="border" Property="BorderThickness" Value="0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </telerik:RadCalendar.DayButtonStyle>
</telerik:RadCalendar>

As for #2 - We consider adding SpecialDays collection to RadCalendar. I am, however, afraid that cannot set a certain timeframe on when this will be done at our side considering the complexity of the feature.

If you have other questions, please feel free to ask us.

Greetings,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ganesh Tandurkar]

1. How to find or make the next or previous month working days as selected dates ie display weekdays in different color for silverlight 2.0 rad calendar.
2. I am able to make only for displayed today month selected dates in different color, problem is on which button I have clicked whether it is next or previous is also not able to find through the control, for which next month or previous month dates selection is not changed?

Thanks
Ganesh

[Kaloyan]

Hi Ganesh Tandurkar,

To do this you need to define your own custom DayTemplateSelector or StyleSelector for the RadCalendar. Check our online examples demonstrating this approach. Please contact us in case you need more inputs on this.

Kind regards,
Kaloyan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.