This is a migrated thread and some comments may be shown as answers.

Calendar style help

8 Answers 122 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Nikita
Top achievements
Rank 1
Nikita asked on 16 Aug 2012, 06:05 PM
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.

8 Answers, 1 is accepted

Sort by
0
Todor
Telerik team
answered on 21 Aug 2012, 10:14 AM
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.

0
Nikita
Top achievements
Rank 1
answered on 23 Aug 2012, 06:45 PM
Thank you! Thank you!

Is it possible to change background for WeekNames row??

0
Todor
Telerik team
answered on 27 Aug 2012, 03:40 PM
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.

0
Alex
Top achievements
Rank 1
answered on 08 Apr 2013, 11:16 AM
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.
0
Todor
Telerik team
answered on 09 Apr 2013, 12:31 PM
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.
0
Zeeshan
Top achievements
Rank 1
answered on 07 Jul 2013, 08:46 PM
Please also update the islamic calender
0
Todor
Telerik team
answered on 08 Jul 2013, 07:12 AM
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 >>
0
Zeeshan
Top achievements
Rank 1
answered on 26 Jul 2013, 11:42 AM
Thank you todor
Tags
Calendar
Asked by
Nikita
Top achievements
Rank 1
Answers by
Todor
Telerik team
Nikita
Top achievements
Rank 1
Alex
Top achievements
Rank 1
Zeeshan
Top achievements
Rank 1
Share this question
or