Styling: Day view

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

Related articles you might find useful: