Blazor | ComponentOne
Controls / Calendar / Customize Icons
In This Topic
    Customize Icons
    In This Topic

    Calendar allows you to customize the icons for its expand and collapse button, navigation buttons and today icon. It provides you the following properties in the C1Calendar class which can be used to customize the icons in Calendar control.

    Properties Description
    CollapseViewIconTemplate The template which is used to create icons for month expanse/collapse button in expanded state
    ExpandViewIconTemplate The template which is used to create icons for month expanse button in collapsed state
    NextIconTemplate The template which is used to create icons for next button.
    PrevIconTemplate The template which is used to create icons for previous button.
    TodayIconTemplate The template which is used to create icons for Today button.

    All these properties mentioned above create icons for different elements of the Calendar control using C1IconTemplate class. The following images displays different icons used in the Calendar control for depicting the expand/collapse and navigation buttons along with the today icon.

    Calendar control with customized icons

    The following code demonstrates how you can use the properties listed in the table above to change the icons in the Calendar control.

    Razor
    Copy Code
    <C1Calendar ExpandViewIconTemplate="@C1.Blazor.Core.C1IconTemplate.ArrowDown"
                CollapseViewIconTemplate="@C1.Blazor.Core.C1IconTemplate.ArrowUp"
                TodayIconTemplate="@C1.Blazor.Core.C1IconTemplate.Asterisk"
                NextIconTemplate="@C1.Blazor.Core.C1IconTemplate.TriangleRight"
                PrevIconTemplate="@C1.Blazor.Core.C1IconTemplate.TriangleLeft">
    </C1Calendar>