Calendar style help

9 posts, 0 answers
  1. Nikita
    Nikita avatar
    2 posts
    Member since:
    Aug 2012

    Posted 16 Aug 2012 Link to this post

    Can some please help? I need to style calendar, specificaly: change color month select, weekdays, days, selected day, today. Sorry, i couldnt understand documentation (very limited).

    xaml sample will be great.

    Thank you.
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 21 Aug 2012 Link to this post

    Hello Nikita,

    Thank you for your interest in RadCalendar.

    We have some properties that can alter the look of RadCalendar, but for the things that you want to change your need to edit the ControlTemplate of RadCalendar and to the other control that we are using CalendarButton, which is used for each of the cells in the Calendar, these are the dates, the day names, etc. You can easily get the original template from Blend and our clients also have full access to our source code and can even easier apply modifications. Once you have the original template, you can do the following modifications to change the things that you want:

    <Style TargetType="calendar:CalendarButton">
        <Setter Property="Padding" Value="0" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="calendar:CalendarButton">
                    <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ContentPresenter"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledColor}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="IsNotFromCurrentView">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ContentPresenter"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledColor}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="IsNotSelectable">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ContentPresenter"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledColor}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ButtonType">
                                <VisualState x:Name="Date" >
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="DateVisual"
                                            Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="TodayDate">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="TodayVisual"
                                            Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Month" />
                                <VisualState x:Name="WeekNumber">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ContentPresenter"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledColor}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="WeekName">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="ContentPresenter"
                                            Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected" >
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="SelectedVisual"
                                            Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="DateVisual" Visibility="Collapsed" Background="Red"/>
                        <Border x:Name="TodayVisual" Visibility="Collapsed" Background="Green" />
                        <Border x:Name="SelectedVisual" Visibility="Collapsed" Background="Aqua" />
                        <ContentControl Margin="{TemplateBinding Padding}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            x:Name="ContentPresenter">
                        </ContentControl>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
     
    <Style TargetType="telerikInput:RadCalendar">
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeNormal}" />
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiLight}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="GridLinesBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid Margin="5">
                        <TextBlock Text="{Binding DetailText}" FontSize="7" MaxHeight="25" VerticalAlignment="Top" Margin="0,-2,0,0"/>
                        <TextBlock Text="{Binding Text}" x:Name="TextPresenter" VerticalAlignment="Bottom" HorizontalAlignment="Left"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
     
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikInput:RadCalendar">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
     
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="DayNamesNotVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames
                                            Storyboard.TargetName="MonthTextContainer"
                                            Storyboard.TargetProperty="Margin">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="-4, -10, 0, 30" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
     
                            <telerikInput:RadDatePicker Culture="{TemplateBinding Culture}" x:Name="DatePicker" Width="1" Height="1" Opacity="0" SelectorFormat="my"/>
     
                            <Canvas Grid.Row="1" IsHitTestVisible="False" Margin="0,-20,0,0">
                                <Rectangle Canvas.Left="0" Canvas.Top="0" x:Name="OldContentPresenterCopy" CacheMode="BitmapCache"/>
                            </Canvas>
                            <Grid Grid.Row="1" x:Name="CalendarViewContainer" Margin="0,-20,0,0">
                                <Canvas IsHitTestVisible="False">
                                    <Rectangle Canvas.Left="0" Canvas.Top="0" x:Name="OldContentPresenter" CacheMode="BitmapCache"/>
                                </Canvas>
                                <telerikPrimitives:RadUniformGrid FirstRowVisibility="{TemplateBinding DayNamesVisibility}" FirstColumnVisibility="{TemplateBinding WeekNumbersVisibility}" x:Name="CalendarPanel" PreserveSpaceForCollapsedChildren="True" NumberOfRows="7" NumberOfColumns ="8" />
                                <telerikPrimitives:RadUniformGrid FirstRowVisibility="{TemplateBinding DayNamesVisibility}" FirstColumnVisibility="{TemplateBinding WeekNumbersVisibility}" x:Name="GridLinesPanel" PreserveSpaceForCollapsedChildren="True" NumberOfRows="7" NumberOfColumns ="8" />
                            </Grid>
                            <Grid Margin="22,10,0,15" x:Name="MonthInfoLargeContainer">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <telerikPrimitives:RadTransitionControl x:Name="YearTextContainer" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}">
                                    <telerikPrimitives:RadTransitionControl.Transition>
                                        <telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>
                                    </telerikPrimitives:RadTransitionControl.Transition>
                                </telerikPrimitives:RadTransitionControl>
                                <telerikPrimitives:RadTransitionControl Margin="-4, -10, 0, 0" Grid.Row="1" x:Name="MonthTextContainer" FontFamily="{StaticResource PhoneFontFamilySemiLight}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}">
                                    <telerikPrimitives:RadTransitionControl.Transition>
                                        <telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>
                                    </telerikPrimitives:RadTransitionControl.Transition>
                                </telerikPrimitives:RadTransitionControl>
                            </Grid>
                            <Grid x:Name="MonthInfoSmallContainer" Margin="3,0,0,0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <telerikPrimitives:RadTransitionControl x:Name="MonthTextContainerSmall" Foreground="Green" FontFamily="{StaticResource PhoneFontFamilySemiBold}" FontSize="{StaticResource PhoneFontSizeMedium}">
                                    <telerikPrimitives:RadTransitionControl.Transition>
                                        <telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>
                                    </telerikPrimitives:RadTransitionControl.Transition>
                                </telerikPrimitives:RadTransitionControl>
                                <telerikPrimitives:RadTransitionControl Grid.Column="1" Margin="5,0,0,0" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Foreground="Green" x:Name="YearTextContainerSmall" FontSize="{StaticResource PhoneFontSizeMedium}">
                                    <telerikPrimitives:RadTransitionControl.Transition>
                                        <telerikPrimitives:RadFadeTransition PlayMode="Simultaneously"/>
                                    </telerikPrimitives:RadTransitionControl.Transition>
                                </telerikPrimitives:RadTransitionControl>
                            </Grid>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    The changes are highlighted as follows:
    1. To change the color of the month, in RadCalendar's template, you have MonthTextContainerSmall and YearTextContainerSmall, which you can modify for the month and year respectively.
    2. To change the color of the names of the days, you have to change the "WeekName" VisualState in CalendarButton.
    3. To change the look of Today and SelectedDay, you can change the TodayVisual and SelectedVisual Borders in CalendarButton's Template.
    4. And as the normal dates are currently transparent, if you want them to have a background for example, you can use the same approach and add a border DateVisual, before TodayVisual and SelectedVisual and in the VisualState Date, you can add an animation that  changes DateVisual's Visibility from Collapsed to Visible.

    These styles can be added as resources in your application and if they don't have a key specified they will be used for all instances of RadCalendar. Just make sure that you map the required prefixes:
    xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
    xmlns:calendar="clr-namespace:Telerik.Windows.Controls.Calendar;assembly=Telerik.Windows.Controls.Input"


    I hope this information helps. Let me know if I can assist you further.

    Greetings,
    Todor
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. DevCraft banner
  4. Nikita
    Nikita avatar
    2 posts
    Member since:
    Aug 2012

    Posted 23 Aug 2012 Link to this post

    Thank you! Thank you!

    Is it possible to change background for WeekNames row??

  5. Todor
    Admin
    Todor avatar
    778 posts

    Posted 27 Aug 2012 Link to this post

    Hello Nikita,

    Well, the WeekNames are in a ContentPresenter and you can wrap it in a Border, for example, in order to be able to change the background:
    <Border x:Name="ContentBorder" Height="30">
        <ContentControl Margin="{TemplateBinding Padding}" Background="Yellow"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
            Content="{TemplateBinding Content}"
            x:Name="ContentPresenter">
        </ContentControl>
    </Border>
    Then you can add a new Animation for the WeekName visual state storyboard:
    <ObjectAnimationUsingKeyFrames
        Storyboard.TargetName="ContentBorder"
        Storyboard.TargetProperty="Background">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue" />
    </ObjectAnimationUsingKeyFrames>


    All the best,
    Todor
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Alex
    Alex avatar
    25 posts
    Member since:
    Mar 2011

    Posted 08 Apr 2013 Link to this post

    Hi!
    Can you please provide complete style for Telerik RadCalendar (WP7)?

    I have VS 2012 Update 2 and both Blend and Visual Studio cannot executed Template->Edit a copy menu command.
  7. Todor
    Admin
    Todor avatar
    778 posts

    Posted 09 Apr 2013 Link to this post

    Hi Alex,

    Yes, we can. The style of RadCalendar is in the attached archive.

    All the best,
    Todor
    the Telerik team
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  8. Zeeshan
    Zeeshan avatar
    19 posts
    Member since:
    Jun 2013

    Posted 07 Jul 2013 Link to this post

    Please also update the islamic calender
  9. Todor
    Admin
    Todor avatar
    778 posts

    Posted 08 Jul 2013 Link to this post

    Hi Zeeshan,

    RadCalendar supports the calendars that are supported by the .NET framework. You can see their list here. In order to change the calendar, you need to set its Culture property. For example, to display the HijriCalendar, you can use this code:
    <telerikInput:RadCalendar Culture="ar-SA" />

    Let me know what further assistance you need.

    Regards,
    Todor
    Telerik
    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
  10. Zeeshan
    Zeeshan avatar
    19 posts
    Member since:
    Jun 2013

    Posted 26 Jul 2013 Link to this post

    Thank you todor
Back to Top
DevCraft banner