Styling: MonthNames view mode

In order to apply custom style for this mode, you need to initialize the monthNamesViewStyle property of RadCalendar with instance of CalendarMonthNamesViewStyle.
In this view we have two cell types that can be customized: the title bar cell and the month name cell. To apply custom style to title you need to initialize the titleCellStyle with instance of CellStyle class. To apply custom style to title you need to initialize the monthNameCellStyle with instance of CellStyle class.

All properties of CellStyle class are applicable to these two cells:

Example

<rc:RadCalendar.monthNamesViewStyle>
    <rc:CalendarMonthNamesViewStyle>
        <rc:CalendarMonthNamesViewStyle.titleCellStyle>
            <rc:CellStyle cellBackgroundColor="#dd855c" cellBorderWidth="2" cellBorderColor="#f1e8ca" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="18" />
        </rc:CalendarMonthNamesViewStyle.titleCellStyle>

        <rc:CalendarMonthNamesViewStyle.monthNameCellStyle>
            <rc:CellStyle cellBackgroundColor="#9ebd9e" cellBorderWidth="2" cellBorderColor="#f1e8ca" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="20"  />        
        </rc:CalendarMonthNamesViewStyle.monthNameCellStyle>

    </rc:CalendarMonthNamesViewStyle>
</rc:RadCalendar.monthNamesViewStyle>

This is how the calendar looks like now:

Calendar year view styling Calendar year view styling

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: