Customizing Scheduler

Variables

The following table lists the available variables for customization.

Name	Type	Default value	Computed value
$kendo-scheduler-border-width	Number	1px	1px
Description The width of the border around the Scheduler.
$kendo-scheduler-font-family	String	var( --kendo-font-family, inherit )	var(--kendo-font-family, inherit)
Description The font family of the Scheduler.
$kendo-scheduler-font-size	String	var( --kendo-font-size, inherit )	var(--kendo-font-size, inherit)
Description The font size of the Scheduler.
$kendo-scheduler-line-height	String	var( --kendo-line-height, normal )	var(--kendo-line-height, normal)
Description The line height of the Scheduler.
$kendo-scheduler-bg	String	$kendo-component-bg	var(--kendo-color-surface-alt, #ffffff)
Description The background color of the Scheduler.
$kendo-scheduler-text	String	$kendo-component-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler.
$kendo-scheduler-border	String	$kendo-component-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Scheduler.
$kendo-scheduler-toolbar-bg	String	$kendo-toolbar-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-text	String	$kendo-toolbar-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-border	String	$kendo-toolbar-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Scheduler ToolBar.
$kendo-scheduler-toolbar-gradient	Null	$kendo-toolbar-gradient	null
Description The gradient of the Scheduler ToolBar.
$kendo-scheduler-footer-bg	String	$kendo-toolbar-bg	var(--kendo-color-surface, #fafafa)
Description The background color of the Scheduler footer.
$kendo-scheduler-footer-text	String	$kendo-toolbar-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler footer.
$kendo-scheduler-footer-border	String	$kendo-toolbar-border	var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description The border color of the Scheduler footer.
$kendo-scheduler-footer-gradient	Null	$kendo-toolbar-gradient	null
Description The gradient of the Scheduler footer.
$kendo-scheduler-event-min-height	Number	25px	25px
Description The minimum height of the Scheduler event.
$kendo-scheduler-event-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the Scheduler event.
$kendo-scheduler-event-line-height	Calculation	calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) )	calc(25px - 2 * var(--kendo-spacing-1, 0.25rem))
Description The line height of the Scheduler event.
$kendo-scheduler-event-bg	String	if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 ))	var(--kendo-color-primary, #ff6358)
Description The background color of the Scheduler event.
$kendo-scheduler-event-text	String	$kendo-selected-text	var(--kendo-color-on-primary, #ffffff)
Description The text color of the Scheduler event.
$kendo-scheduler-event-border	Null	null	null
Description The border color of the Scheduler event.
$kendo-scheduler-event-gradient	Null	null	null
Description The gradient of the Scheduler event.
$kendo-scheduler-event-shadow	Null	null	null
Description The shadow of the Scheduler event.
$kendo-scheduler-event-hover-bg	Null	null	null
Description The background color of the hovered Scheduler event.
$kendo-scheduler-event-hover-text	Null	null	null
Description The text color of the hovered Scheduler event.
$kendo-scheduler-event-hover-border	Null	null	null
Description The border color of the hovered Scheduler event.
$kendo-scheduler-event-hover-gradient	Null	null	null
Description The gradient of the hovered Scheduler event.
$kendo-scheduler-event-hover-shadow	Null	null	null
Description The shadow of the hovered Scheduler event.
$kendo-scheduler-event-selected-bg	String	if($kendo-enable-color-system, k-color( primary-active ), $kendo-selected-bg)	var(--kendo-color-primary-active, #d45349)
Description The background color of the selected Scheduler event.
$kendo-scheduler-event-selected-text	String	$kendo-selected-text	var(--kendo-color-on-primary, #ffffff)
Description The text color of the selected Scheduler event.
$kendo-scheduler-event-selected-border	Null	null	null
Description The border color of the selected Scheduler event.
$kendo-scheduler-event-selected-gradient	Null	null	null
Description The gradient of the selected Scheduler event.
$kendo-scheduler-event-selected-shadow	List	inset 0 0 0 2px rgba(0, 0, 0, .13)	inset 0 0 0 2px rgba(0, 0, 0, 0.13)
Description The shadow of the selected Scheduler event.
$kendo-scheduler-event-ongoing-shadow	List	inset 0px 0px 0px 1px #ff0000	inset 0px 0px 0px 1px #ff0000
Description The shadow of the ongoing Scheduler event.
$kendo-scheduler-cell-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Scheduler cell.
$kendo-scheduler-cell-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Scheduler cell.
$kendo-scheduler-cell-height	Calculation	$kendo-line-height-em	calc(1.4285714286 * 1em)
Description The height of the Scheduler cell.
$kendo-scheduler-datecolumn-width	Number	12em	12em
Description The width of the Scheduler date column.
$kendo-scheduler-timecolumn-width	Number	11em	11em
Description The width of the Scheduler time column.
$kendo-scheduler-nonwork-bg	String	if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 ))	var(--kendo-color-base, #f5f5f5)
Description The background color of the non-working hours in the Scheduler.
$kendo-scheduler-nonwork-text	Null	null	null
Description The text color of the non-working hours in the Scheduler.
$kendo-scheduler-weekend-bg	Null	null	null
Description The background color of the weekends in the Scheduler.
$kendo-scheduler-weekend-text	Null	null	null
Description The text color of the weekends in the Scheduler.
$kendo-scheduler-othermonth-bg	String	if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 ))	var(--kendo-color-base, #f5f5f5)
Description The background color of the preceding/subsequent month cells in the Calendar.
$kendo-scheduler-othermonth-text	Null	null	null
Description The text color of the preceding/subsequent month cells in the Calendar.
$kendo-scheduler-yearview-padding-x	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The horizontal padding of the year view in the Scheduler.
$kendo-scheduler-yearview-padding-y	String	$kendo-scheduler-yearview-padding-x	var(--kendo-spacing-3, 0.75rem)
Description The vertical padding of the year view in the Scheduler.
$kendo-scheduler-yearview-calendar-gap	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The spacing between the calendars of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-size	Number	3px	3px
Description The days with events indicator size of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-calc-offset-top	Calculation	calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2))	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	Calculation	calc( 50% - #{k-math-div( $kendo-scheduler-yearview-indicator-size, 2 )} )	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	Number	50%	50%
Description The border radius of the days with events indicator of the year view in the Scheduler.
$kendo-scheduler-yearview-indicator-bg	String	$kendo-color-primary	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	String	$kendo-color-primary-contrast	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	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the Scheduler Tooltip.
$kendo-scheduler-tooltip-padding-y	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The vertical padding of the Scheduler Tooltip.
$kendo-scheduler-tooltip-border-width	Number	0	0
Description The width of the border of the Scheduler Tooltip.
$kendo-scheduler-tooltip-bg	String	$kendo-color-primary-contrast	var(--kendo-color-on-primary, #ffffff)
Description The background color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-text	String	$kendo-base-text	var(--kendo-color-on-app-surface, #3d3d3d)
Description The text color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-border	Null	null	null
Description The border color of the Scheduler Tooltip.
$kendo-scheduler-tooltip-shadow	String	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))
Description The shadow of the Scheduler Tooltip.
$kendo-scheduler-tooltip-title-margin-y	String	k-spacing(3)	var(--kendo-spacing-3, 0.75rem)
Description The vertical margin of the Scheduler Tooltip title.
$kendo-scheduler-tooltip-month-font-size	String	var( --kendo-font-size-sm, inherit )	var(--kendo-font-size-sm, inherit)
Description The font size of the month inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-day-font-size	Calculation	calc( var( --kendo-font-size-sm, .75rem ) * 2 )	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	Number	250px	250px
Description The max height of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-events-gap	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The spacing between the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-padding-x	String	k-spacing(2)	var(--kendo-spacing-2, 0.5rem)
Description The horizontal padding of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-padding-y	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The vertical padding of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-border-radius	String	k-border-radius(md)	var(--kendo-border-radius-md, 0.25rem)
Description The border radius of the events inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-event-gap	String	k-spacing(1)	var(--kendo-spacing-1, 0.25rem)
Description The spacing between the events items inside the Scheduler Tooltip.
$kendo-scheduler-tooltip-callout-text	String	$kendo-scheduler-tooltip-bg	var(--kendo-color-on-primary, #ffffff)
Description The color of the Scheduler Tooltip callout.

Suggested Links

• Styling Overview
• Web Font Icons
• Preview of the Themed Components