# Styling

## Content



Calendar offers different ways of styling the UI of the Calendar control. It allows you to use different styling properties available in the [C1Calendar](/componentone/api/maui/online-maui/dotnet-api/C1.Maui.Calendar/C1.Maui.Calendar.C1Calendar.html) class which helps in styling all visual aspects of the control. The following image showcases Calendar control with various styles applied on it.

![MAUI Calendar control styles using C1Calendar styling properties](https://cdn.mescius.io/document-site-files/images/4e85e507-742e-4a29-b3fe-f23b37c29164/images/calendar-style.png)

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" />
```