Styling Calendar

[Mariusz]

Hello,
I want to prepare calendar for touch screen, so I need bigger buttons. I have set bigger FontSize, and It looks good. But I have problem with small header, and buttons to change month.

[Dani]

Hello Mariusz,

To modify the header, you will need to edit the template of the RadCalendar control. Inside the template, you will find a Border named Navigation. Its height is dependant on the height of the containing elements (buttons), which are set a MinHeight of 22. Changing that min height or affecting their positioning in any way will also affect the height of the header.

I hope this information will be helpful.

Greetings,
Dani
the Telerik team

[Mariusz]

Hi,
Thanks for help :)
It works.

I don't know if it is the best solution, but my code looks that way:

<Style x:Key="BigMoveLeftButtonStyle" TargetType="RepeatButton" BasedOn="{StaticResource MoveLeftButtonStyle}">
      <Setter Property="MinHeight" Value="60"></Setter>
      <Setter Property="MinWidth" Value="60"></Setter>

  </Style>
  <Style x:Key="BigMoveRightButtonStyle" TargetType="RepeatButton" BasedOn="{StaticResource MoveRightButtonStyle}">
      <Setter Property="MinHeight" Value="60"></Setter>
      <Setter Property="MinWidth" Value="60"></Setter>
  </Style>
  <Style x:Key="BigCalendarHeaderButton" TargetType="Button" BasedOn="{StaticResource CalendarHeaderButton}">
      <Setter Property="MinHeight" Value="60"></Setter>
  </Style>

  <!--telerikInput:RadCalendar-->
  <Style TargetType="telerikInput:RadCalendar"  x:Key="stlBigCalendar">

      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="telerikInput:RadCalendar">
                  <Grid>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="Auto" />
                          <RowDefinition Height="*" />
                      </Grid.RowDefinitions>

                      <Border x:Name="Background" Grid.RowSpan="2"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              Background="{TemplateBinding Background}" />

                      <calendar:TransitionPanel x:Name="TransitionPanel" Grid.Row="1"
                              ClipToBounds="True"
                              Margin="{StaticResource CalendarTransitionPanelMargin}">
                          <primitives:RadUniformGrid x:Name="MonthViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" />
                          <primitives:RadUniformGrid x:Name="YearViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" Visibility="Collapsed" />
                          <primitives:RadUniformGrid x:Name="DecadeViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" Visibility="Collapsed" />
                          <primitives:RadUniformGrid x:Name="CenturyViews" Margin="1 1 0 0"
                                  Rows="{TemplateBinding Rows}"
                                  Columns="{TemplateBinding Columns}" Visibility="Collapsed" />
                      </calendar:TransitionPanel>

                      <Border x:Name="OuterBorder" Grid.RowSpan="2"
                              BorderThickness="{TemplateBinding BorderThickness}"
                              CornerRadius="{StaticResource CalendarOuterBorderCornerRadius}"
                              BorderBrush="{TemplateBinding BorderBrush}">
                          <Border x:Name="InnerBorder"
                                  BorderBrush="{StaticResource CalendarInnerBorder}"
                                  CornerRadius="{StaticResource CalendarInnerBorderCornerRadius}"
                                  BorderThickness="1" />
                      </Border>

                      <Border x:Name="Navigation" Margin="0 0 0 -1" Canvas.ZIndex="2"
                              Visibility="{TemplateBinding HeaderVisibility}"
                              BorderThickness="{StaticResource CalendarHeaderBorderThickness}"
                              CornerRadius="{StaticResource CalendarHeaderOuterCornerRadius}"
                              BorderBrush="{StaticResource HeaderOuterBorder}"
                              Background="{StaticResource HeaderBackground}">
                          <Border BorderThickness="{StaticResource CalendarHeaderBorderThickness}"
                                  BorderBrush="{StaticResource HeaderInnerBorder}"
                                  CornerRadius="{StaticResource CalendarHeaderInnerCornerRadius}"
                                  Padding="{TemplateBinding Padding}">
                              <Grid>
                                  <Grid.ColumnDefinitions>
                                      <ColumnDefinition Width="Auto" />
                                      <ColumnDefinition Width="*" />
                                      <ColumnDefinition Width="Auto" />
                                  </Grid.ColumnDefinitions>

                                  <RepeatButton x:Name="MoveLeft" Grid.Column="0"
                                          Style="{StaticResource BigMoveLeftButtonStyle}"  />
                                  <Button x:Name="Header" Grid.Column="1"
                                          Style="{StaticResource BigCalendarHeaderButton}" />
                                  <RepeatButton x:Name="MoveRight" Grid.Column="2"
                                          Style="{StaticResource BigMoveRightButtonStyle}"  />

                              </Grid>
                          </Border>
                      </Border>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>

  </Style>

[Dani]

Hi Mariusz,

Yes, your solution is Okay.

But if you want to avoid maintaining the same number of MinHeight across three elements, you can remove that and let the buttons take up their default size, and then set a MinHeight only to their containing Border.

Alternatively, you could  set their vertical alignment to Stretch and again let the containing Border MinHeight determine their MinHeight.

Of course, for touch screen, the buttons better stay large in size.


Greetings,
Dani
the Telerik team