Telerik UI for Windows 8 HTML

This article about RadScheduler for Windows 8 HTML will show you how to customize the look of the control using CSS. It includes a number of CSS rules that can be used separately to address certain parts of the control or together—if you want to modify the overall scheduler appearance.

This topic contains the following sections.

Customize the Time Slots

You can use the CSS selectors in Code Listing 1 to style the time slots in the scheduler. These are the cells where you can place events and their corresponding minor and major time headers. The result is shown in Figure 1.

Code Listing 1: Coloring the Time Slots in Scheduler Copy imageCopy
.k-scheduler-layout tr + tr .k-scheduler-times tr:nth-child(even) th,
.k-scheduler-content .k-scheduler-table tr td {
        background-color: #cdf8ae;
}

.k-scheduler-layout > tbody > tr + tr th,
.k-scheduler-content .k-scheduler-table tr:nth-child(odd) td {
        background-color: #dce5d9;
}
Figure 1: Coloring the Time Slots in Scheduler
scheduler-styling-time-slots

Customize the Header

The CSS selectors in Code Listing 2 allow you to style the scheduler header. Note that this selector excludes the all day slot. The result of applying a color to the header is shown in Figure 2.

Code Listing 2: Coloring the Header in Scheduler Copy imageCopy
.k-scheduler-layout > tbody > tr:first-child th:not(.k-scheduler-times-all-day), 
.k-scheduler-header-wrap th { 
        background-color: #e1cefa;
}
Figure 2: Coloring the Header in Scheduler
scheduler-styling-header

Customize the All Day Slot

Code Listing 3 shows the CSS selector that can be used to apply custom styles to the all day slot. The result of applying a color to this slot is shown in Figure 3.

Code Listing 3: Coloring the All Day Slot in Scheduler Copy imageCopy
.k-scheduler-times .k-scheduler-times-all-day,
.k-scheduler table.k-scheduler-layout .k-scheduler-header-all-day td {
        background-color: #f7d7b9;
}
Figure 3: Coloring the All Day Slot in Scheduler
scheduler-styling-all-day

Customize the Footer

Code Listing 4 shows the CSS selector that can be used to colorize the scheduler footer. Figure 4 displays the result of the applied rule.

Code Listing 4: Coloring the Footer in Scheduler Copy imageCopy
.k-scheduler-footer {
        background-color: #aedefa;
}
Figure 4: Coloring the Footer in Scheduler
scheduler-styling-footer

Customize the Views Buttons

Code Listing 5 shows the CSS selectors that can be used to colorize the scheduler views buttons. The first one addresses the normal state of the buttons while the second applies its styles only when the buttons are selected or hovered. Figure 5 displays the result of the applied rules.

Code Listing 5: Coloring the Views Buttons in Scheduler Copy imageCopy
.k-scheduler-views li {
        color: pink;
        border-color: pink;
}

.k-scheduler-views li.k-state-selected,
.k-scheduler-views li.k-state-hover {
        background-color: pink;
        color: white;
        border-color: #f16dba;
}
Figure 5: Coloring the Views Buttons in Scheduler
scheduler-styling-views

Customize the Navigation Buttons

You can use the CSS selectors in Code Listing 6 to customize the scheduler navigation buttons. The last selector applies its styles only when the buttons are hovered. Figure 6 displays the result of the applied rules.

Code Listing 6: Coloring the Navigation Buttons in Scheduler Copy imageCopy
.k-scheduler-navigation li {
        background-color: pink;
        border-color: pink;
}

.k-scheduler-navigation .k-nav-prev .k-link:before,
.k-scheduler-navigation .k-nav-next .k-link:before,
.k-scheduler-navigation .k-nav-today .k-link:before {
        color: #fff;
}

.k-scheduler-navigation li.k-state-hover {
        background-color: #f16dba;
}
Figure 6: Coloring the Navigation Buttons in Scheduler
scheduler-styling-navigation

Customize the Header Text

You can use the CSS selector in Code Listing 7 to colorize the scheduler header text. Figure 7 illustrates the result from this customization.

Code Listing 7: Coloring the Header Text in Scheduler Copy imageCopy
.k-scheduler-navigation .k-nav-current .k-link {
        color: #4194f8;
}
Figure 7: Coloring the Header Text in Scheduler
scheduler-styling-header-text

See Also