RadCalendar Day View Styling

In order to apply custom style for this mode, you need to initialize the dayViewStyle property of RadCalendar with instance of CalendarDayViewStyle. To apply custom style to the cells that are displayed at the top you can use the same properties as in the styling of the month view. Additionally the CalendarDayViewStyle has dayEventsViewStyle and allDayEventsViewStyle .

The dayEventsViewStyle should be used with a DayEventsViewStyle instance which has properties for the following styling options:

backgroundColor - defines the background color for the view with the events
timeLabelFormat - defines the format used to display the time labels in the timeline
timeLabelTextColor - defines the text color used to display the time labels in the timeline
timeLabelTextSize - defines the text size used to display the time labels in the timeline

The allDayEventsViewStyle should be used with a AllDayEventsViewStyle instance which has properties for the following styling options:

backgroundColor - defines the background color for the area where all day events are presented
allDayText - defines the text that notifies that the top area contains all day events
allDayTextIsVisible - defines wether the text that notifies that the top area contains all day events should be visible

Example

Here's an example of using the properties mentioned above:

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

        <rc:CalendarDayViewStyle.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:CalendarDayViewStyle.dayCellStyle>

        <rc:CalendarDayViewStyle.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:CalendarDayViewStyle.weekendCellStyle>

        <rc:CalendarDayViewStyle.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:CalendarDayViewStyle.selectedDayCellStyle>

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

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

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

        <rc:CalendarDayViewStyle.dayEventsViewStyle>
            <rc:DayEventsViewStyle backgroundColor="#B5B5F9"
                timeLabelFormat="HH:mm" timeLabelTextColor="#0023ff"
                timeLabelTextSize="12"/>
        </rc:CalendarDayViewStyle.dayEventsViewStyle>

        <rc:CalendarDayViewStyle.allDayEventsViewStyle>
            <rc:AllDayEventsViewStyle backgroundColor="#00ffff"
                allDayText="DAILY" allDayTextIsVisible="true" />
        </rc:CalendarDayViewStyle.allDayEventsViewStyle>

    </rc:CalendarDayViewStyle>

</rc:RadCalendar.dayViewStyle>

This is how the calendar looks like in that case:

Calendar day 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.

Styling Example

NativeScript Core

RadCalendar Day View Styling

Example

References