スタイル設定

Calendar offers different ways of styling the UI of the Calendar control. It allows you to use different styling properties available in the C1Calendar class which helps in styling all visual aspects of the control. The following image showcases Calendar control with various styles applied on it.

The following code demonstrates how you can style the Calendar control using the available styling properties in the C1Calendar class.

Razor	コードのコピー
<c1:C1Calendar x:Name="calendar" Background="#e6e6ff" Foreground="#4d2600" AdjacentDayForeground="#FFA5A5A3" DayBorderBrush="white" DayBorderThickness="1" FontFamily="Courier New" FontSize="16" BorderBrush="#5900b3" BorderThickness="4" DayOfWeekBackground="#bb99ff" DayOfWeekForeground="#eee6ff" DayOfWeekFormat="d" DayOfWeekFontSize="21" DayOfWeekFontFamily="Calibri" HeaderBackground="#9966ff" HeaderForeground="White" HeaderFontSize="21" SelectionBackground="#ffe6ff" SelectionForeground="#660066" TodayBackground="#b3b3ff" TodayFontAttributes="Bold" TodayBorderBrush="#9900e6" TodayForeground="#730099" />

Razor

コードのコピー

<c1:C1Calendar x:Name="calendar" 
               Background="#e6e6ff"
               Foreground="#4d2600"
               AdjacentDayForeground="#FFA5A5A3"
               DayBorderBrush="white" 
               DayBorderThickness="1"
               FontFamily="Courier New" 
               FontSize="16" 
               BorderBrush="#5900b3"
               BorderThickness="4"
               DayOfWeekBackground="#bb99ff"
               DayOfWeekForeground="#eee6ff"
               DayOfWeekFormat="d"
               DayOfWeekFontSize="21"
               DayOfWeekFontFamily="Calibri"
               HeaderBackground="#9966ff"
               HeaderForeground="White"
               HeaderFontSize="21"
               SelectionBackground="#ffe6ff"
               SelectionForeground="#660066"
               TodayBackground="#b3b3ff"
               TodayFontAttributes="Bold"
               TodayBorderBrush="#9900e6"
               TodayForeground="#730099" />