This question is locked. New answers and comments are not allowed.
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.
xaml sample will be great.
Thank you.
8 Answers, 1 is accepted
0
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:
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:
I hope this information helps. Let me know if I can assist you further.
Greetings,
Todor
the Telerik team
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??
Is it possible to change background for WeekNames row??
0
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:
Then you can add a new Animation for the WeekName visual state storyboard:
All the best,
Todor
the Telerik team
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
>
<
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.
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
Hi Alex,
Yes, we can. The style of RadCalendar is in the attached archive.
All the best,
Todor
the Telerik team
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
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:
Let me know what further assistance you need.
Regards,
Todor
Telerik
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 >>
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