Hi,
I am trying to display the twelve months of a calendar year using a radcalendar control with 4 rows and 3 columns.
This looks great! Now I would like to insert a textblock to diplay text like "Days attended this month:{0}" under each month view.
Is there a simple way to add a textblock between each row of the calendar without having to display multiple radcalendar controls. When I try to add the textblock it gets added below the 3 rows.
I can provide my code if this is confusing. Your response is much appreciated!
Thanks,
Amudha
I am trying to display the twelve months of a calendar year using a radcalendar control with 4 rows and 3 columns.
This looks great! Now I would like to insert a textblock to diplay text like "Days attended this month:{0}" under each month view.
Is there a simple way to add a textblock between each row of the calendar without having to display multiple radcalendar controls. When I try to add the textblock it gets added below the 3 rows.
I can provide my code if this is confusing. Your response is much appreciated!
Thanks,
Amudha
1 Answer, 1 is accepted
0
Hello,
This additional style for MonthView will add another row in each month of RadCalendar. The problem is in silverlight there is no bindings with RelativeSource TemplatedParent. In WPF you could bind the Text of the TextBlock with a multibinding to the current month and a parent-of-type RadCalendar and use a converter to display the count you want to show. The only solution I can currently think of is to set an attached behavior on the TextBlock and do some funny stuff in code behind. Are you familiar with attached behaviors? It is basically an attached property that when set will get the element it is set on and use code to do some work. In your case you can walk up the visual tree to the RadCalendar and attach event handlers for selection changed or something like that.
Kind regards,
Pana
the Telerik team
<
UserControl.Resources
>
<
SolidColorBrush
x:Key
=
"CalendarOuterBorder"
Color
=
"#FF848484"
/>
<
SolidColorBrush
x:Key
=
"CalendarViewBackground"
Color
=
"#FFFFFFFF"
/>
<
Thickness
x:Key
=
"CalendarViewBorderThickness"
>1</
Thickness
>
<
Thickness
x:Key
=
"CalendarViewHeaderPadding"
>3</
Thickness
>
<
SolidColorBrush
x:Key
=
"CalendarSubHeaderOuterBorder"
Color
=
"#FF848484"
/>
<
LinearGradientBrush
x:Key
=
"CalendarSubHeaderBackground"
EndPoint
=
"0.5,1"
StartPoint
=
"0.5,0"
>
<
GradientStop
Color
=
"White"
Offset
=
"0"
/>
<
GradientStop
Color
=
"#FFCDCDCD"
Offset
=
"1"
/>
<
GradientStop
Color
=
"#FFCECECE"
Offset
=
"0.42"
/>
<
GradientStop
Color
=
"#FFAFAFAF"
Offset
=
"0.43"
/>
</
LinearGradientBrush
>
<
SolidColorBrush
x:Key
=
"CalendarSubHeaderInnerBorder"
Color
=
"#FFFFFFFF"
/>
<
Thickness
x:Key
=
"CalendarViewHeaderMargin"
>0 0 0 0</
Thickness
>
<
SolidColorBrush
x:Key
=
"CalendarWeekHeaderVerticalOuterBorder"
Color
=
"#FF848484"
/>
<
Thickness
x:Key
=
"CalendarWeekHeaderVerticalOuterBorderThickness"
>1</
Thickness
>
<
Thickness
x:Key
=
"CalendarWeekHeaderVerticalOuterBorderMargin"
>0 0 -1 0</
Thickness
>
<
telerik:InvertedBooleanToVisibilityConverter
x:Key
=
"InvertedBooleanToVisibilityConverterInstance"
/>
<
System:Int32
x:Key
=
"CalendarWeekHeaderVerticalOuterBorderZIndex"
>0</
System:Int32
>
<
SolidColorBrush
x:Key
=
"CalendarWeekHeaderHorizontalOuterBorder"
Color
=
"#FF848484"
/>
<
Thickness
x:Key
=
"CalendarWeekHeaderHorizontalOuterBorderThickness"
>1 0 1 1</
Thickness
>
<
Thickness
x:Key
=
"CalendarWeekHeaderHorizontalOuterBorderMargin"
>0 0 0 0</
Thickness
>
<
System:Int32
x:Key
=
"CalendarWeekHeaderHorizontalOuterBorderZIndex"
>0</
System:Int32
>
<
SolidColorBrush
x:Key
=
"CalendarWeekHeaderVerticalInnerBorder"
Color
=
"#FFFFFFFF"
/>
<
Thickness
x:Key
=
"CalendarWeekHeaderVerticalInnerBorderThickness"
>1</
Thickness
>
<
Thickness
x:Key
=
"CalendarWeekHeaderVerticalInnerBorderMargin"
>1 1 0 1</
Thickness
>
<
System:Int32
x:Key
=
"CalendarWeekHeaderVerticalInnerBorderZIndex"
>0</
System:Int32
>
<
SolidColorBrush
x:Key
=
"CalendarWeekHeaderHorizontalInnerBorder"
Color
=
"#FFFFFFFF"
/>
<
Thickness
x:Key
=
"CalendarWeekHeaderHorizontalInnerBorderThickness"
>1</
Thickness
>
<
Thickness
x:Key
=
"CalendarWeekHeaderHorizontalInnerBorderMargin"
>1 0 1 1</
Thickness
>
<
System:Int32
x:Key
=
"CalendarWeekHeaderHorizontalInnerBorderZIndex"
>0</
System:Int32
>
<
SolidColorBrush
x:Key
=
"CalendarWeekHeaderVerticalBackground"
Color
=
"#FFE4E4E4"
/>
<
Thickness
x:Key
=
"CalendarWeekHeaderVerticalBackgroundMargin"
>2 2 1 2</
Thickness
>
<
System:Int32
x:Key
=
"CalendarWeekHeaderVerticalBackgroundZIndex"
>0</
System:Int32
>
<
SolidColorBrush
x:Key
=
"CalendarWeekHeaderHorizontalBackground"
Color
=
"#FFE4E4E4"
/>
<
Thickness
x:Key
=
"CalendarWeekHeaderHorizontalBackgroundMargin"
>2 1 2 2</
Thickness
>
<
System:Int32
x:Key
=
"CalendarWeekHeaderHorizontalBackgroundZIndex"
>0</
System:Int32
>
<
Thickness
x:Key
=
"CalendarItemsMargin"
>1 0 1 1</
Thickness
>
<
Thickness
x:Key
=
"CalendarViewMargin"
>-1 -1 0 0</
Thickness
>
<
Style
x:Key
=
"CalendarViewStyle"
TargetType
=
"Telerik_Windows_Controls_Calendar:CalendarView"
>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"VerticalContentAlignment"
Value
=
"Center"
/>
<
Setter
Property
=
"BorderBrush"
Value
=
"{StaticResource CalendarOuterBorder}"
/>
<
Setter
Property
=
"Background"
Value
=
"{StaticResource CalendarViewBackground}"
/>
<
Setter
Property
=
"BorderThickness"
Value
=
"{StaticResource CalendarViewBorderThickness}"
/>
<
Setter
Property
=
"Padding"
Value
=
"{StaticResource CalendarViewHeaderPadding}"
/>
<
Setter
Property
=
"IsTabStop"
Value
=
"False"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"Telerik_Windows_Controls_Calendar:CalendarView"
>
<
Grid
Margin
=
"{StaticResource CalendarViewMargin}"
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"Auto"
/>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"Auto"
/>
</
Grid.RowDefinitions
>
<
Border
x:Name
=
"BackgroundVisual"
Background
=
"{TemplateBinding Background}"
Grid.RowSpan
=
"2"
/>
<
Border
x:Name
=
"Header"
BorderBrush
=
"{StaticResource CalendarSubHeaderOuterBorder}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Background
=
"{StaticResource CalendarSubHeaderBackground}"
Margin
=
"{StaticResource CalendarViewHeaderMargin}"
Visibility
=
"{TemplateBinding HeaderVisibility}"
>
<
Border
BorderBrush
=
"{StaticResource CalendarSubHeaderInnerBorder}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
>
<
ContentPresenter
ContentTemplate
=
"{TemplateBinding HeaderTemplate}"
Content
=
"{TemplateBinding Header}"
HorizontalAlignment
=
"{TemplateBinding HorizontalContentAlignment}"
Margin
=
"{TemplateBinding Padding}"
VerticalAlignment
=
"{TemplateBinding VerticalContentAlignment}"
/>
</
Border
>
</
Border
>
<
Grid
x:Name
=
"WeekHeaders"
DataContext
=
"{Binding RelativeSource={RelativeSource TemplatedParent}}"
Grid.Row
=
"1"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"*"
/>
<
ColumnDefinition
Width
=
"7*"
/>
</
Grid.ColumnDefinitions
>
<
Grid.RowDefinitions
>
<
RowDefinition
Height
=
"*"
/>
<
RowDefinition
Height
=
"6*"
/>
</
Grid.RowDefinitions
>
<
Border
x:Name
=
"VerticalOuterBorder"
BorderBrush
=
"{StaticResource CalendarWeekHeaderVerticalOuterBorder}"
BorderThickness
=
"{StaticResource CalendarWeekHeaderVerticalOuterBorderThickness}"
Margin
=
"{StaticResource CalendarWeekHeaderVerticalOuterBorderMargin}"
Grid.RowSpan
=
"2"
Visibility
=
"{Binding HideColumn, Converter={StaticResource InvertedBooleanToVisibilityConverterInstance}}"
Canvas.ZIndex
=
"{StaticResource CalendarWeekHeaderVerticalOuterBorderZIndex}"
/>
<
Border
x:Name
=
"HorizontalOuterBorder"
BorderBrush
=
"{StaticResource CalendarWeekHeaderHorizontalOuterBorder}"
BorderThickness
=
"{StaticResource CalendarWeekHeaderHorizontalOuterBorderThickness}"
Grid.ColumnSpan
=
"2"
Margin
=
"{StaticResource CalendarWeekHeaderHorizontalOuterBorderMargin}"
Visibility
=
"{Binding HideRow, Converter={StaticResource InvertedBooleanToVisibilityConverterInstance}}"
Canvas.ZIndex
=
"{StaticResource CalendarWeekHeaderHorizontalOuterBorderZIndex}"
/>
<
Border
x:Name
=
"VerticalInnerBorder"
BorderBrush
=
"{StaticResource CalendarWeekHeaderVerticalInnerBorder}"
BorderThickness
=
"{StaticResource CalendarWeekHeaderVerticalInnerBorderThickness}"
Margin
=
"{StaticResource CalendarWeekHeaderVerticalInnerBorderMargin}"
Grid.RowSpan
=
"2"
Visibility
=
"{Binding HideColumn, Converter={StaticResource InvertedBooleanToVisibilityConverterInstance}}"
Canvas.ZIndex
=
"{StaticResource CalendarWeekHeaderVerticalInnerBorderZIndex}"
/>
<
Border
x:Name
=
"HorizontalInnerBorder"
BorderBrush
=
"{StaticResource CalendarWeekHeaderHorizontalInnerBorder}"
BorderThickness
=
"{StaticResource CalendarWeekHeaderHorizontalInnerBorderThickness}"
Grid.ColumnSpan
=
"2"
Margin
=
"{StaticResource CalendarWeekHeaderHorizontalInnerBorderMargin}"
Visibility
=
"{Binding HideRow, Converter={StaticResource InvertedBooleanToVisibilityConverterInstance}}"
Canvas.ZIndex
=
"{StaticResource CalendarWeekHeaderHorizontalInnerBorderZIndex}"
/>
<
Rectangle
x:Name
=
"VerticalBackground"
Fill
=
"{StaticResource CalendarWeekHeaderVerticalBackground}"
Margin
=
"{StaticResource CalendarWeekHeaderVerticalBackgroundMargin}"
Grid.RowSpan
=
"2"
Visibility
=
"{Binding HideColumn, Converter={StaticResource InvertedBooleanToVisibilityConverterInstance}}"
Canvas.ZIndex
=
"{StaticResource CalendarWeekHeaderVerticalBackgroundZIndex}"
/>
<
Rectangle
x:Name
=
"HorizontalBackground"
Grid.ColumnSpan
=
"2"
Fill
=
"{StaticResource CalendarWeekHeaderHorizontalBackground}"
Margin
=
"{StaticResource CalendarWeekHeaderHorizontalBackgroundMargin}"
Visibility
=
"{Binding HideRow, Converter={StaticResource InvertedBooleanToVisibilityConverterInstance}}"
Canvas.ZIndex
=
"{StaticResource CalendarWeekHeaderHorizontalBackgroundZIndex}"
/>
</
Grid
>
<
ItemsPresenter
Margin
=
"{StaticResource CalendarItemsMargin}"
Grid.Row
=
"1"
/>
<
Border
x:Name
=
"BorderBrush"
BorderBrush
=
"{TemplateBinding BorderBrush}"
BorderThickness
=
"{TemplateBinding BorderThickness}"
Grid.RowSpan
=
"2"
/>
<
Rectangle
x:Name
=
"MinDesiredSize"
Height
=
"155"
Grid.Row
=
"1"
Width
=
"240"
/>
<
Border
Grid.Row
=
"2"
>
<
TextBlock
Text
=
"Text is here!"
TextAlignment
=
"Center"
Margin
=
"2"
/>
</
Border
>
</
Grid
>
</
ControlTemplate
>
</
Setter.Value
>
</
Setter
>
<
Setter
Property
=
"Margin"
Value
=
"0"
/>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
Background
=
"White"
>
<
telerik:RadCalendar
Rows
=
"4"
Columns
=
"3"
MonthViewStyle
=
"{StaticResource CalendarViewStyle}"
/>
</
Grid
>
This additional style for MonthView will add another row in each month of RadCalendar. The problem is in silverlight there is no bindings with RelativeSource TemplatedParent. In WPF you could bind the Text of the TextBlock with a multibinding to the current month and a parent-of-type RadCalendar and use a converter to display the count you want to show. The only solution I can currently think of is to set an attached behavior on the TextBlock and do some funny stuff in code behind. Are you familiar with attached behaviors? It is basically an attached property that when set will get the element it is set on and use code to do some work. In your case you can walk up the visual tree to the RadCalendar and attach event handlers for selection changed or something like that.
Kind regards,
Pana
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!