Pick Comming Days and Hours

2 posts, 0 answers
  1. Amir
    Amir avatar
    13 posts
    Member since:
    Apr 2008

    Posted 06 Sep 2010 Link to this post


    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,


  2. Konstantina
    Konstantina avatar
    2332 posts

    Posted 08 Sep 2010 Link to this post

    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:

    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:

            <local:MyConverter x:Key="MyConverter"/>
            <DataTemplate x:Key="dayTemplate">
                            <Grid.RowDefinitions >
                                <RowDefinition />
                                <RowDefinition />
                            <TextBlock Text="{Binding Text}"/>
                            <Rectangle Fill="Red" Width="20" Height="20" Grid.Row="1" />
        <Style x:Key="calendarStyle" TargetType="telerik:RadCalendar">
                <Setter Property="DayTemplate" Value="{StaticResource dayTemplate}" />
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadDateTimePicker HorizontalAlignment="Left" VerticalAlignment="Top" CalendarStyle="{StaticResource calendarStyle}" />

    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.

    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top