Appearance Settings
This article outlines the available Calendar parameters, which control its appearance.
Size
You can increase or decrease the size of the Calendar by setting the Size attribute to a member of the Telerik.Blazor.ThemeConstants.Calendar.Size class:
| Class member | Manual declaration |
|---|---|
Small | sm |
Medium | md |
Large | lg |
This configuration affects the size of the whole Calendar and its inner elements - header, navigation buttons, cells. The elements' size, padding and font-size vary depending on the selected Calendar size.
The built-in Calendar sizes
@{
var fields = typeof(Telerik.Blazor.ThemeConstants.Calendar.Size)
.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static
| System.Reflection.BindingFlags.FlattenHierarchy)
.Where(field => field.IsLiteral && !field.IsInitOnly).ToList();
foreach (var field in fields)
{
string size = field.GetValue(null).ToString();
<div style="float:left; margin: 20px;">
<TelerikCalendar @bind-Value="@DateValue" Size="@size"></TelerikCalendar>
</div>
}
}
@code {
private DateTime DateValue { get; set; } = DateTime.Now;
}ThemeBuilder
To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using ThemeBuilder.
ThemeBuilder is a web application that enables you to create new themes and customize existing ones. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the styles for your theme and use them in your Blazor app.