Strange appearance of C1Calendar if fontsize increased

Strange appearance of C1Calendar if fontsize increased

Posted by: lutz.boscher on 2 August 2019, 1:27 am EST

• 

  lutz.boscher

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 2 August 2019, 1:27 am EST - Updated 4 October 2022, 12:04 am EST

  Hi,
  
  I use a C1Calendar-Control and increase the fontsize of the calendar via style.
  
  First, the Calendar does not grow, if the fontsize changed.
  
  Moreover the rest of the control is not changed. How could I archive to fix this behavior?
  
  Regards
  
  Lutz Boscher

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 4 August 2019, 10:00 pm EST

  Hello,

  You can change the size and font of the other element using style as follow:

  		<c1:C1Calendar x:Name="cal1" MonthHeaderForeground="#FFAD0A0A" MonthHeaderFontSize="14" MonthHeaderBackground="Transparent" Foreground="#FFC71212" WeekendBrush="Red" DaysOfWeekBorderBrush="#FF6F3A9E" TodayBrush="Yellow" MonthCount="1" MaxSelectionCount="42" Width="300" Height="300">
  				
  				<c1:C1Calendar.MonthCalendarStyle>
  					<Style TargetType="{x:Type c1:C1CalendarItem}">
  						<Setter Property="Background" Value="#60FFFFE0" />
                          <Setter Property="ShowNextButton" Value="True" />
                          <Setter Property="ShowPreviousButton" Value="True" />
                          <Setter Property="Height" Value="300" />
                          <Setter Property="Width" Value="300" />
                         
                          <Setter Property="DayOfWeekSlotStyle">
                              <Setter.Value>
                                  <Style>
                                      <Setter Property="TextElement.FontSize" Value="26" />
                                  </Style>
                              </Setter.Value>
                          </Setter>
                          <Setter Property="DaySlotStyle">
                              
  							<Setter.Value>
  								<Style>
  									<Setter Property="TextElement.FontSize" Value="26" />
  									
  								</Style>
  							</Setter.Value>
  						</Setter>
  					</Style>
  				</c1:C1Calendar.MonthCalendarStyle>
  			</c1:C1Calendar>
  

  Hope it helps.

  Thanks.

• 

  lutz.boscher

  • Post Options:
  • Link
    Copy

  Posted 5 August 2019, 9:36 pm EST - Updated 4 October 2022, 12:04 am EST

  Hi,

  thank you for your reply. I tested your style and it seems to work mostly. But when I expand the calendarcontrol to a large size, it displays two or more calendaritems.

  I have atteched the samle:

  
   <c1:C1Calendar HorizontalAlignment="Left" Margin="224,45,0,0" VerticalAlignment="Top"
                         x:Name="cal1" MonthHeaderForeground="#FFAD0A0A" 
  			MonthHeaderFontSize="14" 
  			MonthHeaderBackground="Transparent"
  			Foreground="#FFC71212" 
  			WeekendBrush="Red" 
  			DaysOfWeekBorderBrush="#FF6F3A9E" 
  			TodayBrush="Yellow" MonthCount="1" MaxSelectionCount="42" Width="600" Height="600">
  
              <c1:C1Calendar.MonthCalendarStyle>
                  <Style TargetType="{x:Type c1:C1CalendarItem}">
                      <Setter Property="Background" Value="#60FFFFE0" />
                      <Setter Property="ShowNextButton" Value="True" />
                      <Setter Property="ShowPreviousButton" Value="True" />
                      <Setter Property="Height" Value="600" />
                      <Setter Property="Width" Value="600" />
  
                      <Setter Property="DayOfWeekSlotStyle">
                          <Setter.Value>
                              <Style>
                                  <Setter Property="TextElement.FontSize" Value="52" />
                              </Style>
                          </Setter.Value>
                      </Setter>
                      <Setter Property="DaySlotStyle">
  
                          <Setter.Value>
                              <Style>
                                  <Setter Property="TextElement.FontSize" Value="52" />
  
                              </Style>
                          </Setter.Value>
                      </Setter>
                  </Style>
              </c1:C1Calendar.MonthCalendarStyle>
          </c1:C1Calendar>
  
  

  And the result is:
  
  

  

  621×616 14.3 KB

  Regards
  
  Lutz Boscher

• 

  mohitg

  

  • Post Options:
  • Link
    Copy

  Posted 6 August 2019, 8:53 pm EST

  Hello,

  Please use the following lines of code:

  
  <c1:C1Calendar HorizontalAlignment="Left" Margin="100,100,0,0" VerticalAlignment="Top"
                         x:Name="cal1" MonthHeaderForeground="#FFAD0A0A" 
  			MonthHeaderFontSize="26" 
  			MonthHeaderBackground="Transparent"
  			Foreground="#FFC71212" 
  			WeekendBrush="Red" 
  			DaysOfWeekBorderBrush="#FF6F3A9E" 
  			TodayBrush="Yellow" MonthCount="1" MaxSelectionCount="42">
              <c1:C1Calendar.MonthsPanel >
                  <ItemsPanelTemplate >
                      <UniformGrid VerticalAlignment="Center" HorizontalAlignment="Center" Columns="1" Rows="1"/>
  
                  </ItemsPanelTemplate>
              </c1:C1Calendar.MonthsPanel>
              <c1:C1Calendar.DaysOfWeekPanel>
                  <ItemsPanelTemplate >
                      <UniformGrid Height="Auto" Columns="7" Rows="1" Margin="-21,0,0,-27"/>
  
                  </ItemsPanelTemplate>
              </c1:C1Calendar.DaysOfWeekPanel>
  
              <c1:C1Calendar.DaysPanel>
                  <ItemsPanelTemplate >
                      <UniformGrid Height="Auto" Columns="7" Rows="7" Margin="-21,25,0,-27"/>
  
                  </ItemsPanelTemplate>
              </c1:C1Calendar.DaysPanel>
  
              <c1:C1Calendar.MonthCalendarStyle>
  
                  <Style TargetType="{x:Type c1:C1CalendarItem}">
                      <Setter Property="Background" Value="#60FFFFE0" />
                      <Setter Property="ShowNextButton" Value="True" />
                      <Setter Property="ShowPreviousButton" Value="True" />
  
                      <Setter Property="Height" Value="700" />
                      <Setter Property="Width" Value="700" />
  
                      <Setter Property="DayOfWeekSlotStyle">
                          <Setter.Value>
                              <Style>
                                  <Setter Property="TextElement.FontSize" Value="52" />
                              </Style>
                          </Setter.Value>
                      </Setter>
                      <Setter Property="DaySlotStyle">
  
                          <Setter.Value>
                              <Style>
                                  <Setter Property="TextElement.FontSize" Value="52" />
  
                              </Style>
                          </Setter.Value>
                      </Setter>
                  </Style>
              </c1:C1Calendar.MonthCalendarStyle>
          </c1:C1Calendar>
  
  

  Hope it helps.
  
  Thanks.