Sass Variables
The Telerik and Kendo UI Scheduler is a composite UI component. To configure and customize its appearance, use not only its dedicated Sass variables but also the Toolbar Sass variables, as well as the Sass variables provided by the Button, ButtonGroup, and Calendar components.
| Variable | Default Value | Computed Value | Value |
|---|---|---|---|
kendo-scheduler-border-width | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The width of the border around the Scheduler. | |||
kendo-scheduler-font-family | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) | Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit) |
| Description: The font family of the Scheduler. | |||
kendo-scheduler-font-size | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) | Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit) |
| Description: The font size of the Scheduler. | |||
kendo-scheduler-line-height | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) | Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal) |
| Description: The line height of the Scheduler. | |||
kendo-scheduler-bg | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) | Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff) |
| Description: The background color of the Scheduler. | |||
kendo-scheduler-text | $kendo-component-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Scheduler. | |||
kendo-scheduler-border | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Scheduler. | |||
kendo-scheduler-toolbar-bg | $kendo-toolbar-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-toolbar-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the Scheduler ToolBar. | |||
kendo-scheduler-toolbar-text | $kendo-toolbar-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-toolbar-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Scheduler ToolBar. | |||
kendo-scheduler-toolbar-border | $kendo-toolbar-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-toolbar-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Scheduler ToolBar. | |||
kendo-scheduler-toolbar-gradient | $kendo-toolbar-gradient | null | Default: $kendo-toolbar-gradientComputed: null |
| Description: The gradient of the Scheduler ToolBar. | |||
kendo-scheduler-footer-bg | $kendo-toolbar-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-toolbar-bgComputed: var(--kendo-color-surface, #fafafa) |
| Description: The background color of the Scheduler footer. | |||
kendo-scheduler-footer-text | $kendo-toolbar-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-toolbar-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Scheduler footer. | |||
kendo-scheduler-footer-border | $kendo-toolbar-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) | Default: $kendo-toolbar-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
| Description: The border color of the Scheduler footer. | |||
kendo-scheduler-footer-gradient | $kendo-toolbar-gradient | null | Default: $kendo-toolbar-gradientComputed: null |
| Description: The gradient of the Scheduler footer. | |||
kendo-scheduler-event-min-height | 25px | 25px | Default: 25pxComputed: 25px |
| Description: The minimum height of the Scheduler event. | |||
kendo-scheduler-event-border-radius | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border radius of the Scheduler event. | |||
kendo-scheduler-event-line-height | calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) | calc(25px - 2 * var(--kendo-spacing-1, 0.25rem)) | Default: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) )Computed: calc(25px - 2 * var(--kendo-spacing-1, 0.25rem)) |
| Description: The line height of the Scheduler event. | |||
kendo-scheduler-event-bg | if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) | var(--kendo-color-primary, #ff6358) | Default: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 ))Computed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the Scheduler event. | |||
kendo-scheduler-event-text | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the Scheduler event. | |||
kendo-scheduler-event-border | null | null | Default: nullComputed: null |
| Description: The border color of the Scheduler event. | |||
kendo-scheduler-event-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the Scheduler event. | |||
kendo-scheduler-event-shadow | null | null | Default: nullComputed: null |
| Description: The shadow of the Scheduler event. | |||
kendo-scheduler-event-hover-bg | null | null | Default: nullComputed: null |
| Description: The background color of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-text | null | null | Default: nullComputed: null |
| Description: The text color of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-border | null | null | Default: nullComputed: null |
| Description: The border color of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-shadow | null | null | Default: nullComputed: null |
| Description: The shadow of the hovered Scheduler event. | |||
kendo-scheduler-event-selected-bg | if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg) | var(--kendo-color-primary-active, #d45349) | Default: if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg)Computed: var(--kendo-color-primary-active, #d45349) |
| Description: The background color of the selected Scheduler event. | |||
kendo-scheduler-event-selected-text | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The text color of the selected Scheduler event. | |||
kendo-scheduler-event-selected-border | null | null | Default: nullComputed: null |
| Description: The border color of the selected Scheduler event. | |||
kendo-scheduler-event-selected-gradient | null | null | Default: nullComputed: null |
| Description: The gradient of the selected Scheduler event. | |||
kendo-scheduler-event-selected-shadow | inset 0 0 0 2px rgba(0, 0, 0, .13) | inset 0 0 0 2px rgba(0, 0, 0, 0.13) | Default: inset 0 0 0 2px rgba(0, 0, 0, .13)Computed: inset 0 0 0 2px rgba(0, 0, 0, 0.13) |
| Description: The shadow of the selected Scheduler event. | |||
kendo-scheduler-event-ongoing-shadow | inset 0px 0px 0px 1px #ff0000 | inset 0px 0px 0px 1px #ff0000 | Default: inset 0px 0px 0px 1px #ff0000Computed: inset 0px 0px 0px 1px #ff0000 |
| Description: The shadow of the ongoing Scheduler event. | |||
kendo-scheduler-cell-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Scheduler cell. | |||
kendo-scheduler-cell-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Scheduler cell. | |||
kendo-scheduler-cell-height | $kendo-line-height-em | calc(1.4285714286 * 1em) | Default: $kendo-line-height-emComputed: calc(1.4285714286 * 1em) |
| Description: The height of the Scheduler cell. | |||
kendo-scheduler-datecolumn-width | 12em | 12em | Default: 12emComputed: 12em |
| Description: The width of the Scheduler date column. | |||
kendo-scheduler-timecolumn-width | 11em | 11em | Default: 11emComputed: 11em |
| Description: The width of the Scheduler time column. | |||
kendo-scheduler-nonwork-bg | if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) | var(--kendo-color-base, #f5f5f5) | Default: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 ))Computed: var(--kendo-color-base, #f5f5f5) |
| Description: The background color of the non-working hours in the Scheduler. | |||
kendo-scheduler-nonwork-text | null | null | Default: nullComputed: null |
| Description: The text color of the non-working hours in the Scheduler. | |||
kendo-scheduler-weekend-bg | null | null | Default: nullComputed: null |
| Description: The background color of the weekends in the Scheduler. | |||
kendo-scheduler-weekend-text | null | null | Default: nullComputed: null |
| Description: The text color of the weekends in the Scheduler. | |||
kendo-scheduler-othermonth-bg | if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) | var(--kendo-color-base, #f5f5f5) | Default: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 ))Computed: var(--kendo-color-base, #f5f5f5) |
| Description: The background color of the preceding/subsequent month cells in the Calendar. | |||
kendo-scheduler-othermonth-text | null | null | Default: nullComputed: null |
| Description: The text color of the preceding/subsequent month cells in the Calendar. | |||
kendo-scheduler-yearview-padding-x | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The horizontal padding of the year view in the Scheduler. | |||
kendo-scheduler-yearview-padding-y | $kendo-scheduler-yearview-padding-x | var(--kendo-spacing-3, 0.75rem) | Default: $kendo-scheduler-yearview-padding-xComputed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical padding of the year view in the Scheduler. | |||
kendo-scheduler-yearview-calendar-gap | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The spacing between the calendars of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-size | 3px | 3px | Default: 3pxComputed: 3px |
| Description: The days with events indicator size of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-calc-offset-top | calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) | calc(32px - 0.25em * 2) | Default: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2))Computed: calc(32px - 0.25em * 2) |
| Description: The top position of the days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-calc-offset-left | calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} ) | calc(50% - 1.5px) | Default: calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} )Computed: calc(50% - 1.5px) |
| Description: The left position of the days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-border-radius | 50% | 50% | Default: 50%Computed: 50% |
| Description: The border radius of the days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-bg | $kendo-color-primary | var(--kendo-color-primary, #ff6358) | Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358) |
| Description: The background color of the days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-selected-bg | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-color-primary-contrastComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The background color of the selected days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-tooltip-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-padding-y | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The vertical padding of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-border-width | 0 | 0 | Default: 0Computed: 0 |
| Description: The width of the border of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-bg | $kendo-color-primary-contrast | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-color-primary-contrastComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The background color of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-text | $kendo-base-text | var(--kendo-color-on-app-surface, #3d3d3d) | Default: $kendo-base-textComputed: var(--kendo-color-on-app-surface, #3d3d3d) |
| Description: The text color of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-border | null | null | Default: nullComputed: null |
| Description: The border color of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-shadow | k-elevation(2) | var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)) | Default: k-elevation(2)Computed: var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12)) |
| Description: The shadow of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-title-margin-y | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) | Default: k-spacing(3)Computed: var(--kendo-spacing-3, 0.75rem) |
| Description: The vertical margin of the Scheduler Tooltip title. | |||
kendo-scheduler-tooltip-month-font-size | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) | Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit) |
| Description: The font size of the month inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-day-font-size | calc( var( --kendo-font-size-sm, .75rem ) * 2 ) | calc(var(--kendo-font-size-sm, 0.75rem) * 2) | Default: calc( var( --kendo-font-size-sm, .75rem ) * 2 )Computed: calc(var(--kendo-font-size-sm, 0.75rem) * 2) |
| Description: The font size of the day inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-events-max-height | 250px | 250px | Default: 250pxComputed: 250px |
| Description: The max height of the events inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-events-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing between the events inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-event-padding-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem) |
| Description: The horizontal padding of the events inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-event-padding-y | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The vertical padding of the events inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-event-border-radius | k-border-radius(md) | var(--kendo-border-radius-md, 0.25rem) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem) |
| Description: The border radius of the events inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-event-gap | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem) |
| Description: The spacing between the events items inside the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-callout-text | $kendo-scheduler-tooltip-bg | var(--kendo-color-on-primary, #ffffff) | Default: $kendo-scheduler-tooltip-bgComputed: var(--kendo-color-on-primary, #ffffff) |
| Description: The color of the Scheduler Tooltip callout. | |||
