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		`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		`k-get-theme-color-var( primary-100 )`
Description Background color of the scheduler event.
$kendo-scheduler-event-text		`$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		`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		`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		`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		`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		`$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		`$kendo-color-white`
Description Background color of the scheduler tooltip.
$kendo-scheduler-tooltip-text		`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		`k-get-theme-color-var( primary-100 )`
Description Color of the scheduler marquee.

Customizing Scheduler

Variables

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Customizing Scheduler

Variables

Suggested Links

In this article

Not finding the help you need?

Is this article helpful?

Thank you for your feedback!