New to Kendo UI for Vue? Start a free 30-day trial

Customizing Calendar

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-calendar-border-width1px
Description
Width of the border around the calendar.
$kendo-calendar-font-familyvar( --kendo-font-family, inherit )
Description
Font family of the calendar.
$kendo-calendar-font-sizevar( --kendo-font-size, inherit )
Description
Font size of the calendar.
$kendo-calendar-line-heightvar( --kendo-line-height, normal )
Description
Line height of the calendar.
$kendo-calendar-cell-size28px
Description
Size of the calendar cell.
$kendo-calendar-bgvar( --kendo-component-bg, initial)
Description
Background color of the calendar.
$kendo-calendar-textvar( --kendo-component-text, initial)
Description
Text color of the calendar.
$kendo-calendar-bordervar( --kendo-component-border, initial)
Description
Border color of the calendar.
$kendo-calendar-header-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the calendar header.
$kendo-calendar-header-padding-ymap.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 )
Description
Vertical padding of the calendar header.
$kendo-calendar-header-border-width1px
Description
Width of the bottom border of the calendar header.
$kendo-calendar-header-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the calendar header.
$kendo-calendar-header-text$kendo-calendar-text
Description
Text color of the calendar header.
$kendo-calendar-header-border$kendo-calendar-border
Description
Border color of the calendar header.
$kendo-calendar-nav-gap0
Description
Spacing between the navigation buttons of the calendar.
$kendo-calendar-footer-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the calendar footer.
$kendo-calendar-footer-padding-ymap.get( $kendo-spacing, 3 )
Description
Vertical padding of the calendar footer.
$kendo-calendar-cell-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the calendar cell.
$kendo-calendar-cell-padding-xmap.get( $kendo-spacing, 1.5 )
Description
Horizontal padding of the calendar cell.
$kendo-calendar-cell-padding-y$kendo-calendar-cell-padding-x
Description
Vertical padding of the calendar cell.
$kendo-calendar-cell-line-height$kendo-calendar-line-height
Description
Line height of the calendar cell.
$kendo-calendar-cell-border-radiusvar( --kendo-border-radius-md, 0)
Description
Border radius of the calendar cell.
$kendo-calendar-header-cell-padding-x0
Description
Horizontal padding of the calendar header cell.
$kendo-calendar-header-cell-padding-y0
Description
Vertical padding of the calendar header cell.
$kendo-calendar-header-cell-width$kendo-calendar-cell-size
Description
Width of the calendar header cell.
$kendo-calendar-header-cell-height$kendo-calendar-cell-size
Description
Height of the calendar header cell.
$kendo-calendar-header-cell-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the calendar header cell.
$kendo-calendar-header-cell-line-height2
Description
Line height of the calendar header cell.
$kendo-calendar-header-cell-bginherit
Description
Background color of the calendar header cell.
$kendo-calendar-header-cell-textinherit
Description
Text color of the calendar header cell.
$kendo-calendar-caption-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the calendar captions.
$kendo-calendar-caption-padding-ymap.get( $kendo-spacing, 1 )
Description
Vertical padding of the calendar captions.
$kendo-calendar-caption-height$kendo-calendar-cell-size
Description
Height of the calendar captions.
$kendo-calendar-caption-font-sizevar( --kendo-font-size-sm, inherit )
Description
Font size of the calendar captions.
$kendo-calendar-caption-line-heightnormal
Description
Line height of the calendar captions.
$kendo-calendar-caption-font-weightbold
Description
Font weight of the calendar captions.
$kendo-calendar-caption-color$kendo-subtle-text
Description
Text color of the calendar captions.
$kendo-calendar-view-padding-block-endmap.get( $kendo-spacing, 3 )
Description
Bottom padding of calendar views.
$kendo-calendar-view-gapmap.get( $kendo-spacing, 4 )
Description
Spacing between the views in the multiview calendar.
$kendo-calendar-weekend-bginherit
Description
Background color of the calendar weekend cell.
$kendo-calendar-weekend-textinherit
Description
Text color of the calendar weekend cell.
$kendo-calendar-today-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the calendar today cell.
$kendo-calendar-today-bgif($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ))
Description
Background color of the calendar today cell.
$kendo-calendar-today-hover-textif($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)
Description
Text color of the calendar today cell when hovered.
$kendo-calendar-today-hover-bgif($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 ))
Description
Background color of the calendar today cell when hovered.
$kendo-calendar-today-border-radius9999px
Description
Border radius of the calendar today cell.
$kendo-calendar-week-number-bginherit
Description
Background color of the calendar week number cell.
$kendo-calendar-week-number-textvar( --kendo-subtle-text, inherit )
Description
Text color of the calendar week number cell.
$kendo-calendar-other-month-bginherit
Description
Background color of the other months calendar cells.
$kendo-calendar-other-month-textvar( --kendo-disabled-text, inherit )
Description
Text color of the other months calendar cells.
$kendo-calendar-cell-bginherit
Description
Background color of the calendar cells.
$kendo-calendar-cell-textinherit
Description
Text color of the calendar cells.
$kendo-calendar-cell-hover-bgvar( --kendo-hover-bg, inherit )
Description
Background color of the calendar cells when hovered.
$kendo-calendar-cell-hover-textvar( --kendo-hover-text, inherit )
Description
Text color of the calendar cells when hovered.
$kendo-calendar-cell-selected-bgvar( --kendo-selected-bg, inherit )
Description
Background color of the selected calendar cell.
$kendo-calendar-cell-selected-textvar( --kendo-selected-text, inherit )
Description
Text color of the selected calendar cell.
$kendo-calendar-cell-selected-bordervar( --kendo-selected-border, inherit )
Description
Border color of the selected calendar cell.
$kendo-calendar-cell-selected-shadowinset 0 0 0 1px $kendo-calendar-cell-selected-border
Description
Shadow of the selected calendar cell.
$kendo-calendar-cell-selected-hover-bgvar( --kendo-selected-hover-bg, inherit )
Description
Background color of the selected calendar cell when hovered.
$kendo-calendar-cell-selected-hover-textvar( --kendo-selected-hover-text, inherit )
Description
Text color of the selected calendar cell when hovered.
$kendo-calendar-cell-focus-shadowinset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130))
Description
Shadow of the selected calendar cell when focused.
$kendo-calendar-cell-selected-focus-shadow$kendo-calendar-cell-focus-shadow
Description
Shadow of the selected calendar cell when selected and focused.
$kendo-calendar-navigation-width5em
Description
Width of the navigation in the infinite calendar.
$kendo-calendar-navigation-item-height2em
Description
Height of the navigation items in the infinite calendar.
$kendo-calendar-navigation-bgif($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 ))
Description
Background color of the navigation in the infinite calendar.
$kendo-calendar-navigation-text$kendo-calendar-header-text
Description
Text color of the navigation in the infinite calendar.
$kendo-calendar-navigation-border$kendo-calendar-header-border
Description
Border color of the navigation in the infinite calendar.
$kendo-infinite-calendar-header-padding-xmap.get( $kendo-spacing, 3 )
Description
Background color of the navigation in the infinite calendar.
$kendo-infinite-calendar-header-padding-ymap.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 )
Description
Background color of the navigation in the infinite calendar.
$kendo-infinite-calendar-view-padding-xmap.get( $kendo-spacing, 3 )
Description
Horizontal padding of the infinite calendar.
$kendo-infinite-calendar-view-padding-y0px
Description
Vertical padding of the infinite calendar.
$kendo-calendar-range-bgif($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 ))
Description
Background color of the range selection in the calendar.
$kendo-calendar-range-textinherit
Description
Text color of the range selection in the calendar.
$kendo-calendar-range-borderif($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Border color of the range selection in the calendar.
$kendo-calendar-start-range-hover-shadowinset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Hover shadow of the start range selection in the calendar.
$kendo-calendar-mid-range-hover-shadowinset 0 -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Hover shadow of the mid range selection in the calendar.
$kendo-calendar-end-range-hover-shadowinset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))
Description
Hover shadow of the end range selection in the calendar.

In this article

Not finding the help you need?