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: 1px Computed: 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-bg Computed: 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-text Computed: 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-border Computed: 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-bg Computed: 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-text Computed: 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-border Computed: 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-gradient Computed: null |
Description: The gradient of the Scheduler ToolBar. | |||
kendo-scheduler-footer-bg | $kendo-toolbar-bg | var(--kendo-color-surface, #fafafa) | Default: $kendo-toolbar-bg Computed: 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-text Computed: 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-border Computed: 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-gradient Computed: null |
Description: The gradient of the Scheduler footer. | |||
kendo-scheduler-event-min-height | 25px | 25px | Default: 25px Computed: 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 * #{k-spacing(1)}) ) | calc(25px - 2 * var(--kendo-spacing-1, 0.25rem)) | Default: calc( #{$kendo-scheduler-event-min-height} - (2 * #{k-spacing(1)}) ) 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-text Computed: var(--kendo-color-on-primary, #ffffff) |
Description: The text color of the Scheduler event. | |||
kendo-scheduler-event-border | null | null | Default: null Computed: null |
Description: The border color of the Scheduler event. | |||
kendo-scheduler-event-gradient | null | null | Default: null Computed: null |
Description: The gradient of the Scheduler event. | |||
kendo-scheduler-event-shadow | null | null | Default: null Computed: null |
Description: The shadow of the Scheduler event. | |||
kendo-scheduler-event-hover-bg | null | null | Default: null Computed: null |
Description: The background color of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-text | null | null | Default: null Computed: null |
Description: The text color of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-border | null | null | Default: null Computed: null |
Description: The border color of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-gradient | null | null | Default: null Computed: null |
Description: The gradient of the hovered Scheduler event. | |||
kendo-scheduler-event-hover-shadow | null | null | Default: null Computed: 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-text Computed: var(--kendo-color-on-primary, #ffffff) |
Description: The text color of the selected Scheduler event. | |||
kendo-scheduler-event-selected-border | null | null | Default: null Computed: null |
Description: The border color of the selected Scheduler event. | |||
kendo-scheduler-event-selected-gradient | null | null | Default: null Computed: 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 #ff0000 Computed: (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-em Computed: calc(1.4285714286 * 1em) |
Description: The height of the Scheduler cell. | |||
kendo-scheduler-datecolumn-width | 12em | 12em | Default: 12em Computed: 12em |
Description: The width of the Scheduler date column. | |||
kendo-scheduler-timecolumn-width | 11em | 11em | Default: 11em Computed: 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: null Computed: null |
Description: The text color of the non-working hours in the Scheduler. | |||
kendo-scheduler-weekend-bg | null | null | Default: null Computed: null |
Description: The background color of the weekends in the Scheduler. | |||
kendo-scheduler-weekend-text | null | null | Default: null Computed: 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: null Computed: 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-x Computed: 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: 3px Computed: 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% - #{math.div( $kendo-scheduler-yearview-indicator-size, 2 )} ) | calc(50% - 1.5px) | Default: calc( 50% - #{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-primary Computed: 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-contrast Computed: 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: 0 Computed: 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-contrast Computed: 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-text Computed: var(--kendo-color-on-app-surface, #3d3d3d) |
Description: The text color of the Scheduler Tooltip. | |||
kendo-scheduler-tooltip-border | null | null | Default: null Computed: 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: 250px Computed: 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-bg Computed: var(--kendo-color-on-primary, #ffffff) |
Description: The color of the Scheduler Tooltip callout. | |||
kendo-scheduler-appointments-padding | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The padding of the Scheduler appointments. | |||
kendo-scheduler-event-template-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 event template. | |||
kendo-scheduler-event-template-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 Scheduler event template. | |||
kendo-scheduler-event-actions-inset-x | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) | Default: k-spacing(2) Computed: var(--kendo-spacing-2, 0.5rem) |
Description: The inline inset of the Scheduler event actions. | |||
kendo-scheduler-indicators-margin | k-spacing(0.5) .4ex 0 k-spacing(1) | (var(--kendo-spacing-0\.5, 0.125rem) 0.4ex 0 var(--kendo-spacing-1, 0.25rem)) | Default: k-spacing(0.5) .4ex 0 k-spacing(1) Computed: (var(--kendo-spacing-0\.5, 0.125rem) 0.4ex 0 var(--kendo-spacing-1, 0.25rem)) |
Description: The margin of the Scheduler event indicators. | |||
kendo-scheduler-rtl-indicators-margin | k-spacing(0.5) k-spacing(1) 0 .4ex | (var(--kendo-spacing-0\.5, 0.125rem) var(--kendo-spacing-1, 0.25rem) 0 0.4ex) | Default: k-spacing(0.5) k-spacing(1) 0 .4ex Computed: (var(--kendo-spacing-0\.5, 0.125rem) var(--kendo-spacing-1, 0.25rem) 0 0.4ex) |
Description: The margin of the Scheduler event indicators in rtl. | |||
kendo-scheduler-marquee-label-inset-x | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) | Default: k-spacing(1) Computed: var(--kendo-spacing-1, 0.25rem) |
Description: The inline inset of the Scheduler marquee labels. | |||
kendo-scheduler-marquee-label-inset-y | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) | Default: k-spacing(0.5) Computed: var(--kendo-spacing-0\.5, 0.125rem) |
Description: The block inset of the Scheduler marquee labels. |