Pick Comming Days and Hours

[Amir]

Hi,

I am using the DateTimePicker in a prototype project and I wonder if it possible to display Calendar Day Icons for each date with date displayed on top of the icon and also show digital clock icons for each time pick.

I have attached an image which easier illustrates what I mean.

Thank you,

Amir

[Konstantina]

Hello Amir,

Thank you for contacting us.

To achieve the desired look you have to do the following:
1. For the TimePicker part - drop a RadDateTimePicker control in Expression Blend's design surface, right-click it and choose from the menu Edit Template->Edit a Copy. Then, find the Clock element and edit its ItemTemplate. You can put in the DataTemplate of the ItemTemplate a Grid or a StackPanel with the TextBlock with x:Name="ContentText", which displays the numbers and the picture you want to communicate with it. If you want different pictures for the different hours, you will have to use a Converter and according to the hour to return the right picture. You can find more information about converters in this sources:

• http://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter.aspx
• http://blogs.telerik.com/hristoborisov/posts/09-04-29/using_ivalueconverter_to_format_values_in_radcontrols_for_silverlight.aspx
• http://blogs.telerik.com/rosif/posts/09-08-25/mark_working_hours_and_days_in_different_colors_with_radscheduler_for_silverlight.aspx

2. As for the DatePicker part - to make different templates for the DayButton you could predefine the style of the Calendar and set it to the CalendarStyle property of the DateTimePicker, for example like so:

<UserControl.Resources>
        <local:MyConverter x:Key="MyConverter"/>
        <DataTemplate x:Key="dayTemplate">
                    <Grid>
                        <Grid.RowDefinitions >
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Text="{Binding Text}"/>
                        <Rectangle Fill="Red" Width="20" Height="20" Grid.Row="1" />
                    </Grid>
                </DataTemplate>

    <Style x:Key="calendarStyle" TargetType="telerik:RadCalendar">
            <Setter Property="DayTemplate" Value="{StaticResource dayTemplate}" />
    </Style>

</UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadDateTimePicker HorizontalAlignment="Left" VerticalAlignment="Top" CalendarStyle="{StaticResource calendarStyle}" />

    </Grid>
</UserControl>

Here, instead of the Rectangle you can put your Image and using again a Converter you can assign the proper image according to the date.

Hope this information helps. If you need further assistance please let us know.

Regards,
Konstantina
the Telerik team