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

Insert TextBlock between each row of a multi(12) month view calendar

1 Answer 50 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Pam
Top achievements
Rank 1
Pam asked on 11 Jul 2011, 06:21 PM
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

1 Answer, 1 is accepted

Sort by
0
Pana
Telerik team
answered on 13 Jul 2011, 08:56 AM
Hello,

<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!

Tags
Calendar
Asked by
Pam
Top achievements
Rank 1
Answers by
Pana
Telerik team
Share this question
or