New to Kendo UI for Vue? Start a free 30-day trial
Customizing Scheduler
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-scheduler-border-width | 1px | ||
Description
Width of the border around the scheduler. | |||
| $kendo-scheduler-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the scheduler. | |||
| $kendo-scheduler-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the scheduler. | |||
| $kendo-scheduler-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the scheduler. | |||
| $kendo-scheduler-bg | var( --kendo-component-bg, initial ) | ||
Description
Background color of the scheduler. | |||
| $kendo-scheduler-text | var( --kendo-component-text, initial ) | ||
Description
Text color of the scheduler. | |||
| $kendo-scheduler-border | var( --kendo-component-border, initial ) | ||
Description
Border color of the scheduler. | |||
| $kendo-scheduler-selected-bg | if($kendo-enable-color-system, k-color( primary-subtle ), k-get-theme-color-var( primary-20 )) | ||
Description
Background color of the selected row in scheduler. | |||
| $kendo-scheduler-selected-text | $kendo-scheduler-text | ||
Description
Text color of the selected row in scheduler. | |||
| $kendo-scheduler-selected-border | $kendo-scheduler-border | ||
Description
Border color of the selected row in scheduler. | |||
| $kendo-scheduler-toolbar-bg | var( --kendo-toolbar-bg, $kendo-toolbar-bg ) | ||
Description
Background color of the scheduler toolbar. | |||
| $kendo-scheduler-toolbar-text | var( --kendo-toolbar-text, $kendo-toolbar-text ) | ||
Description
Text color of the scheduler toolbar. | |||
| $kendo-scheduler-toolbar-border | var( --kendo-toolbar-border, $kendo-toolbar-border ) | ||
Description
Border color of the scheduler toolbar. | |||
| $kendo-scheduler-toolbar-gradient | null | ||
Description
Gradient of the scheduler toolbar. | |||
| $kendo-scheduler-footer-bg | var( --kendo-toolbar-bg, $kendo-toolbar-bg ) | ||
Description
Background color of the scheduler footer. | |||
| $kendo-scheduler-footer-text | var( --kendo-toolbar-text, $kendo-toolbar-text ) | ||
Description
Text color of the scheduler footer. | |||
| $kendo-scheduler-footer-border | var( --kendo-toolbar-border, $kendo-toolbar-border ) | ||
Description
Border color of the scheduler footer. | |||
| $kendo-scheduler-footer-gradient | null | ||
Description
Gradient of the scheduler footer. | |||
| $kendo-scheduler-event-border-radius | var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) | ||
Description
Border radius of the scheduler event. | |||
| $kendo-scheduler-event-line-height | $kendo-scheduler-line-height | ||
Description
Line height of the scheduler event. | |||
| $kendo-scheduler-event-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the scheduler event. | |||
| $kendo-scheduler-event-padding-y | map.get( $kendo-spacing, 0.5 ) | ||
Description
Vertical padding of the scheduler event. | |||
| $kendo-scheduler-event-min-height | calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) | ||
Description
Minumum height of the scheduler event. | |||
| $kendo-scheduler-event-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background color of the scheduler event. | |||
| $kendo-scheduler-event-text | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Text color of the scheduler event. | |||
| $kendo-scheduler-event-border | $kendo-scheduler-event-bg | ||
Description
Border color of the scheduler event. | |||
| $kendo-scheduler-event-gradient | null | ||
Description
Gradient of the scheduler event. | |||
| $kendo-scheduler-event-shadow | null | ||
Description
Shadow of the scheduler event. | |||
| $kendo-scheduler-event-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the hovered scheduler event. | |||
| $kendo-scheduler-event-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Text color of the hovered scheduler event. | |||
| $kendo-scheduler-event-hover-border | var( --kendo-hover-border, inherit ) | ||
Description
Boeswe color of the hovered scheduler event. | |||
| $kendo-scheduler-event-hover-gradient | null | ||
Description
Gradient of the hovered scheduler event. | |||
| $kendo-scheduler-event-hover-shadow | null | ||
Description
Shadow of the hovered scheduler event. | |||
| $kendo-scheduler-event-selected-bg | if($kendo-enable-color-system, k-color( primary-active ), k-get-theme-color-var( primary-120 )) | ||
Description
Background color of the selected scheduler event. | |||
| $kendo-scheduler-event-selected-text | $kendo-scheduler-event-text | ||
Description
Text color of the selected scheduler event. | |||
| $kendo-scheduler-event-selected-border | $kendo-scheduler-event-bg | ||
Description
Border color of the selected scheduler event. | |||
| $kendo-scheduler-event-selected-gradient | null | ||
Description
Gradient of the selected scheduler event. | |||
| $kendo-scheduler-event-selected-shadow | none | ||
Description
Shadow of the selected scheduler event. | |||
| $kendo-scheduler-event-ongoing-shadow | inset 0px 0px 0px 1px #ff0000 | ||
Description
Shadow of the ongoing scheduler event. | |||
| $kendo-scheduler-cell-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the scheduler cell. | |||
| $kendo-scheduler-cell-padding-y | map.get( $kendo-spacing, 2 ) | ||
Description
Vertical padding of the scheduler cell. | |||
| $kendo-scheduler-cell-height | $kendo-line-height-em | ||
Description
Height of the scheduler cell. | |||
| $kendo-scheduler-datecolumn-width | 12em | ||
Description
Width of the scheduler date column. | |||
| $kendo-scheduler-timecolumn-width | 11em | ||
Description
Width of the scheduler time column. | |||
| $kendo-scheduler-nonwork-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the non-working hours in the scheduler. | |||
| $kendo-scheduler-nonwork-text | null | ||
Description
Text color of the non-working hours in the scheduler. | |||
| $kendo-scheduler-weekend-bg | null | ||
Description
Background color of the weekends in the scheduler. | |||
| $kendo-scheduler-weekend-text | null | ||
Description
Text color of the weekends in the scheduler. | |||
| $kendo-scheduler-othermonth-bg | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | ||
Description
Background color of the other months in the scheduler. | |||
| $kendo-scheduler-othermonth-text | null | ||
Description
Text color of the other months in the scheduler. | |||
| $kendo-scheduler-yearview-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the scheduler year view. | |||
| $kendo-scheduler-yearview-padding-y | $kendo-scheduler-yearview-padding-x | ||
Description
Vertical padding of the scheduler year view. | |||
| $kendo-scheduler-yearview-calendar-gap | map.get( $kendo-spacing, 3 ) | ||
Description
Spacing between the calendars in the scheduler year view. | |||
| $kendo-scheduler-yearview-indicator-size | 3px | ||
Description
Days with events indicator size in the scheduler year view. | |||
| $kendo-scheduler-yearview-indicator-calc-offset-top | calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2) ) | ||
Description
Top position of the days with events indicator in the scheduler year view. | |||
| $kendo-scheduler-yearview-indicator-calc-offset-left | calc( 50% - (#{$kendo-scheduler-yearview-indicator-size} / 2) ) | ||
Description
Left position of the days with events indicator in the scheduler year view. | |||
| $kendo-scheduler-yearview-indicator-border-radius | 50% | ||
Description
Border radius of the days with events indicator in the scheduler year view. | |||
| $kendo-scheduler-yearview-indicator-bg | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Background color of the days with events indicator in the scheduler year view. | |||
| $kendo-scheduler-yearview-indicator-selected-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Background color of the selected days with events indicator in the scheduler year view. | |||
| $kendo-scheduler-tooltip-padding-x | map.get( $kendo-spacing, 2 ) | ||
Description
Horizontal padding of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-padding-y | $kendo-scheduler-tooltip-padding-x | ||
Description
Vertical padding of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-border-width | 0 | ||
Description
Width of the border of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-bg | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | ||
Description
Background color of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-text | if($kendo-enable-color-system, k-color( subtle ), k-get-theme-color-var( neutral-130 )) | ||
Description
Text color of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-border | null | ||
Description
Border color of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-shadow | k-elevation(5) | ||
Description
Shadow of the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-title-margin-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical spacing of the scheduler tooltip title. | |||
| $kendo-scheduler-tooltip-month-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the month inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-day-font-size | calc( $kendo-scheduler-tooltip-month-font-size * 2 ) | ||
Description
Font size of the day inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-events-max-height | 250px | ||
Description
Max height of the events inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-events-gap | map.get( $kendo-spacing, 2 ) | ||
Description
Spacing between the events inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-event-padding-x | $kendo-scheduler-event-padding-x | ||
Description
Horizontal padding of the events inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-event-padding-y | $kendo-scheduler-event-padding-y | ||
Description
Vertical padding of the events inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-event-border-radius | $kendo-scheduler-event-border-radius | ||
Description
Border radius of the events inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-event-gap | map.get( $kendo-spacing, 0.5 ) | ||
Description
Spacing between the events items inside the scheduler tooltip. | |||
| $kendo-scheduler-tooltip-callout-color | $kendo-scheduler-tooltip-bg | ||
Description
Color of the scheduler tooltip callout. | |||
| $kendo-scheduler-resize-handle-width | 2em | ||
Description
Width of the scheduler resize handle. | |||
| $kendo-scheduler-more-btn-height | 13px | ||
Description
Height of the scheduler more events button. | |||
| $kendo-scheduler-marquee-color | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | ||
Description
Color of the scheduler marquee. | |||
