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-border-radius | null | null | Default: nullComputed: null |
| Description: The border radius of the Scheduler. | |||
kendo-scheduler-font-family | var(--kendo-font-family) | var(--kendo-font-family) | Default: var(--kendo-font-family)Computed: var(--kendo-font-family) |
| Description: The font family of the Scheduler. | |||
kendo-scheduler-font-size | var(--kendo-font-size) | var(--kendo-font-size) | Default: var(--kendo-font-size)Computed: var(--kendo-font-size) |
| Description: The font size of the Scheduler. | |||
kendo-scheduler-line-height | var(--kendo-line-height) | var(--kendo-line-height) | Default: var(--kendo-line-height)Computed: var(--kendo-line-height) |
| Description: The line height of the Scheduler. | |||
kendo-scheduler-bg | k-color(surface-alt) | var(--kendo-color-surface-alt) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt) |
| Description: The background color of the Scheduler. | |||
kendo-scheduler-text | k-color(on-app-surface) | var(--kendo-color-on-app-surface) | Default: k-color(on-app-surface)Computed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Scheduler. | |||
kendo-scheduler-border | k-color(border) | var(--kendo-color-border) | Default: k-color(border)Computed: var(--kendo-color-border) |
| Description: The border color of the Scheduler. | |||
kendo-scheduler-toolbar-bg | k-color(surface-alt) | var(--kendo-color-surface-alt) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt) |
| Description: The background color of the Scheduler ToolBar. | |||
kendo-scheduler-toolbar-text | $kendo-toolbar-text | var(--kendo-color-on-app-surface) | Default: $kendo-toolbar-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Scheduler ToolBar. | |||
kendo-scheduler-toolbar-border | $kendo-toolbar-border | var(--kendo-color-border) | Default: $kendo-toolbar-borderComputed: var(--kendo-color-border) |
| 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 | k-color(surface-alt) | var(--kendo-color-surface-alt) | Default: k-color(surface-alt)Computed: var(--kendo-color-surface-alt) |
| Description: The background color of the Scheduler footer. | |||
kendo-scheduler-footer-text | $kendo-toolbar-text | var(--kendo-color-on-app-surface) | Default: $kendo-toolbar-textComputed: var(--kendo-color-on-app-surface) |
| Description: The text color of the Scheduler footer. | |||
kendo-scheduler-footer-border | $kendo-toolbar-border | var(--kendo-color-border) | Default: $kendo-toolbar-borderComputed: var(--kendo-color-border) |
| 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 | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The minimum height of the Scheduler event. | |||
kendo-scheduler-event-border-radius | k-border-radius(md) | var(--kendo-border-radius-md) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md) |
| Description: The border radius of the Scheduler event. | |||
kendo-scheduler-event-title-font-size | var(--kendo-font-size-sm) | var(--kendo-font-size-sm) | Default: var(--kendo-font-size-sm)Computed: var(--kendo-font-size-sm) |
| Description: The font size of the Scheduler event title. | |||
kendo-scheduler-event-title-line-height | var(--kendo-line-height-sm) | var(--kendo-line-height-sm) | Default: var(--kendo-line-height-sm)Computed: var(--kendo-line-height-sm) |
| Description: The line height of the Scheduler event title. | |||
kendo-scheduler-event-title-padding-top | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The top padding of the Scheduler event title. | |||
kendo-scheduler-event-title-padding-bottom | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The bottom padding of the Scheduler event title. | |||
kendo-scheduler-event-time-font-size | var(--kendo-font-size-xs) | var(--kendo-font-size-xs) | Default: var(--kendo-font-size-xs)Computed: var(--kendo-font-size-xs) |
| Description: The font size of the Scheduler event time. | |||
kendo-scheduler-event-time-line-height | var(--kendo-line-height-sm) | var(--kendo-line-height-sm) | Default: var(--kendo-line-height-sm)Computed: var(--kendo-line-height-sm) |
| Description: The line height of the Scheduler event time. | |||
kendo-scheduler-event-time-padding-top | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The top padding of the Scheduler event time. | |||
kendo-scheduler-event-time-padding-bottom | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The bottom padding of the Scheduler event time. | |||
kendo-scheduler-event-bg | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The background color of the Scheduler event. | |||
kendo-scheduler-event-text | k-color(on-primary) | var(--kendo-color-on-primary) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary) |
| 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-readonly-bg | k-color(primary-subtle) | var(--kendo-color-primary-subtle) | Default: k-color(primary-subtle)Computed: var(--kendo-color-primary-subtle) |
| Description: The background color of the read-only Scheduler event. | |||
kendo-scheduler-event-readonly-text | k-color(primary-on-subtle) | var(--kendo-color-primary-on-subtle) | Default: k-color(primary-on-subtle)Computed: var(--kendo-color-primary-on-subtle) |
| Description: The text color of the read-only Scheduler event. | |||
kendo-scheduler-event-readonly-border | k-color(primary-emphasis) | var(--kendo-color-primary-emphasis) | Default: k-color(primary-emphasis)Computed: var(--kendo-color-primary-emphasis) |
| Description: The border color of the read-only 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 | k-color(primary-active) | var(--kendo-color-primary-active) | Default: k-color(primary-active)Computed: var(--kendo-color-primary-active) |
| Description: The background color of the selected Scheduler event. | |||
kendo-scheduler-event-selected-text | k-color(on-primary) | var(--kendo-color-on-primary) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary) |
| 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 k-color(border-alt) | (inset 0 0 0 2px var(--kendo-color-border-alt)) | Default: inset 0 0 0 2px k-color(border-alt)Computed: (inset 0 0 0 2px var(--kendo-color-border-alt)) |
| 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-resizer-size | 0.5em | 0.5em | Default: 0.5emComputed: 0.5em |
| Description: The size of the Scheduler resize handle hit area. | |||
kendo-scheduler-resize-handle-size | 12px | 12px | Default: 12pxComputed: 12px |
| Description: The length of the Scheduler resize handle visual indicator. | |||
kendo-scheduler-resize-handle-thickness | 1px | 1px | Default: 1pxComputed: 1px |
| Description: The thickness of the Scheduler resize handle visual indicator. | |||
kendo-scheduler-resize-handle-border-radius | k-border-radius(full) | var(--kendo-border-radius-full) | Default: k-border-radius(full)Computed: var(--kendo-border-radius-full) |
| Description: The border radius of the Scheduler resize handle. | |||
kendo-scheduler-resize-handle-border-width | 0 | 0 | Default: 0Computed: 0 |
| Description: The border width of the Scheduler resize handle. | |||
kendo-scheduler-resize-handle-bg | k-color(primary-subtle) | var(--kendo-color-primary-subtle) | Default: k-color(primary-subtle)Computed: var(--kendo-color-primary-subtle) |
| Description: The background color of the Scheduler resize handle. | |||
kendo-scheduler-cell-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the Scheduler cell. | |||
kendo-scheduler-cell-padding-y | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| 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 | k-color(base) | var(--kendo-color-base) | Default: k-color(base)Computed: var(--kendo-color-base) |
| 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-othermonth-bg | k-color(base) | var(--kendo-color-base) | Default: k-color(base)Computed: var(--kendo-color-base) |
| 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) | Default: k-spacing(3)Computed: var(--kendo-spacing-3) |
| 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) | Default: $kendo-scheduler-yearview-padding-xComputed: var(--kendo-spacing-3) |
| Description: The vertical padding of the year view in the Scheduler. | |||
kendo-scheduler-yearview-calendar-gap | k-spacing(3) | var(--kendo-spacing-3) | Default: k-spacing(3)Computed: var(--kendo-spacing-3) |
| 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% - #{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 | k-color(primary) | var(--kendo-color-primary) | Default: k-color(primary)Computed: var(--kendo-color-primary) |
| Description: The background color of the days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-yearview-indicator-selected-bg | k-color(on-primary) | var(--kendo-color-on-primary) | Default: k-color(on-primary)Computed: var(--kendo-color-on-primary) |
| Description: The background color of the selected days with events indicator of the year view in the Scheduler. | |||
kendo-scheduler-popover-month-font-size | var(--kendo-font-size-sm) | var(--kendo-font-size-sm) | Default: var(--kendo-font-size-sm)Computed: var(--kendo-font-size-sm) |
| Description: The font size of the month inside the Scheduler Popover. | |||
kendo-scheduler-popover-day-font-size | calc( var(--kendo-font-size-sm) * 2 ) | calc(var(--kendo-font-size-sm) * 2) | Default: calc( var(--kendo-font-size-sm) * 2 )Computed: calc(var(--kendo-font-size-sm) * 2) |
| Description: The font size of the day inside the Scheduler Popover. | |||
kendo-scheduler-popover-events-max-height | 250px | 250px | Default: 250pxComputed: 250px |
| Description: The max height of the events inside the Scheduler Popover. | |||
kendo-scheduler-popover-events-gap | k-spacing(1.5) | var(--kendo-spacing-1\.5) | Default: k-spacing(1.5)Computed: var(--kendo-spacing-1\.5) |
| Description: The spacing between the events inside the Scheduler Popover. | |||
kendo-scheduler-popover-event-min-height | 25px | 25px | Default: 25pxComputed: 25px |
| Description: The minimum height of the events inside the Scheduler Popover. | |||
kendo-scheduler-popover-event-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the events inside the Scheduler Popover. | |||
kendo-scheduler-popover-event-padding-y | null | null | Default: nullComputed: null |
| Description: The vertical padding of the events inside the Scheduler Popover. | |||
kendo-scheduler-popover-event-border-radius | k-border-radius(md) | var(--kendo-border-radius-md) | Default: k-border-radius(md)Computed: var(--kendo-border-radius-md) |
| Description: The border radius of the events inside the Scheduler Popover. | |||
kendo-scheduler-popover-event-gap | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The spacing between the events items inside the Scheduler Popover. | |||
kendo-scheduler-event-template-padding-x | k-spacing(2) | var(--kendo-spacing-2) | Default: k-spacing(2)Computed: var(--kendo-spacing-2) |
| Description: The horizontal padding of the Scheduler event template. | |||
kendo-scheduler-event-template-padding-y | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The vertical padding of the Scheduler event template. | |||
kendo-scheduler-marquee-label-inset-x | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The inline inset of the Scheduler marquee labels. | |||
kendo-scheduler-marquee-label-inset-y | k-spacing(0.5) | var(--kendo-spacing-0\.5) | Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5) |
| Description: The block inset of the Scheduler marquee labels. | |||
kendo-scheduler-nav-item-icon-spacing | k-spacing(1) | var(--kendo-spacing-1) | Default: k-spacing(1)Computed: var(--kendo-spacing-1) |
| Description: The spacing between icon and text in Scheduler navigation items. | |||
kendo-scheduler-header-bg | k-color(surface) | var(--kendo-color-surface) | Default: k-color(surface)Computed: var(--kendo-color-surface) |
| Description: The background color of the Scheduler header. | |||
