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

2 posts, 0 answers
  1. Pam
    Pam avatar
    3 posts
    Member since:
    Sep 2012

    Posted 11 Jul 2011 Link to this post

    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
  2. Pana
    Admin
    Pana avatar
    748 posts

    Posted 13 Jul 2011 Link to this post

    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!

  3. DevCraft banner
Back to Top