RadCalendar Week View Styling

The Week view mode practically is the same as Month view mode, that's why the same rules and requirements for Month view styling are applicable. In order to apply custom style for this mode, you need to initialize the weekViewStyle property of RadCalendar with instance of CalendarWeekViewStyle.

Example

Here's a code snippet demonstrating the usage of the properties of the Style objects mentioned above:

<rc:RadCalendar.weekViewStyle>
    <rc:CalendarWeekViewStyle backgroundColor="#dd855c" showTitle="true" showWeekNumbers="true" showDayNames="true" >
        <rc:CalendarWeekViewStyle.todayCellStyle>
            <rc:DayCellStyle cellBackgroundColor="#dd855c" cellBorderWidth="1" cellBorderColor="#f1e8ca" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="14" />
        </rc:CalendarWeekViewStyle.todayCellStyle>

        <rc:CalendarWeekViewStyle.dayCellStyle>
            <rc:DayCellStyle showEventsText="true" eventTextColor="White" eventFontName="Times New Roman" eventFontStyle="BoldItalic" eventTextSize="8"
                                    cellAlignment="VerticalCenter" cellPaddingHorizontal="10" cellPaddingVertical="5" cellBackgroundColor="#9ebd9e"
                                    cellBorderWidth="1" cellBorderColor="#f1e8ca" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" ios:cellTextSize="12" android:cellTextSize="10"/>
        </rc:CalendarWeekViewStyle.dayCellStyle>

        <rc:CalendarWeekViewStyle.weekendCellStyle>
            <rc:DayCellStyle eventTextColor="BlueViolet" eventFontName="Times New Roman" eventFontStyle="BoldItalic" eventTextSize="8"
                                    cellAlignment="VerticalCenter" cellPaddingHorizontal="10" cellPaddingVertical="5" cellBackgroundColor="#f1e8ca"
                                    cellBorderWidth="1" cellBorderColor="#f1e8ca" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="12" />
        </rc:CalendarWeekViewStyle.weekendCellStyle>

        <rc:CalendarWeekViewStyle.selectedDayCellStyle>
            <rc:DayCellStyle eventTextColor="Blue" eventFontName="Times New Roman" eventFontStyle="Bold" eventTextSize="8"
                                    cellAlignment="VerticalCenter" cellPaddingHorizontal="10" cellPaddingVertical="5" cellBackgroundColor="#745151"
                                    cellBorderWidth="2" cellBorderColor="#f1e8ca" cellTextColor="Black" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="18" />
        </rc:CalendarWeekViewStyle.selectedDayCellStyle>

        <rc:CalendarWeekViewStyle.weekNumberCellStyle>
            <rc:CellStyle cellBackgroundColor="#bbcbdb" cellBorderWidth="2" cellBorderColor="#745151" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="8" />
        </rc:CalendarWeekViewStyle.weekNumberCellStyle>

        <rc:CalendarWeekViewStyle.dayNameCellStyle>
            <rc:CellStyle  cellBackgroundColor="#bbcbdb" cellBorderWidth="1" cellBorderColor="#f1e8ca" cellTextColor="#745151" cellTextFontName="Times New Roman" cellTextFontStyle="Bold" cellTextSize="10" />
        </rc:CalendarWeekViewStyle.dayNameCellStyle>

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

    </rc:CalendarWeekViewStyle>

</rc:RadCalendar.weekViewStyle>

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.

Styling Example

NativeScript Core

RadCalendar Week View Styling

Example

References