New to Kendo UI for Angular? Start a free 30-day trial
Customizing Calendar
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-calendar-border-width | 1px | ||
Description
Width of the border around the calendar. | |||
| $kendo-calendar-font-family | var( --kendo-font-family, inherit ) | ||
Description
Font family of the calendar. | |||
| $kendo-calendar-font-size | var( --kendo-font-size, inherit ) | ||
Description
Font size of the calendar. | |||
| $kendo-calendar-line-height | var( --kendo-line-height, normal ) | ||
Description
Line height of the calendar. | |||
| $kendo-calendar-cell-size | 28px | ||
Description
Size of the calendar cell. | |||
| $kendo-calendar-bg | var( --kendo-component-bg, initial) | ||
Description
Background color of the calendar. | |||
| $kendo-calendar-text | var( --kendo-component-text, initial) | ||
Description
Text color of the calendar. | |||
| $kendo-calendar-border | var( --kendo-component-border, initial) | ||
Description
Border color of the calendar. | |||
| $kendo-calendar-header-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the calendar header. | |||
| $kendo-calendar-header-padding-y | map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) | ||
Description
Vertical padding of the calendar header. | |||
| $kendo-calendar-header-border-width | 1px | ||
Description
Width of the bottom border of the calendar header. | |||
| $kendo-calendar-header-bg | 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-gap | 0 | ||
Description
Spacing between the navigation buttons of the calendar. | |||
| $kendo-calendar-footer-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the calendar footer. | |||
| $kendo-calendar-footer-padding-y | map.get( $kendo-spacing, 3 ) | ||
Description
Vertical padding of the calendar footer. | |||
| $kendo-calendar-cell-font-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the calendar cell. | |||
| $kendo-calendar-cell-padding-x | map.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-radius | var( --kendo-border-radius-md, 0) | ||
Description
Border radius of the calendar cell. | |||
| $kendo-calendar-header-cell-padding-x | 0 | ||
Description
Horizontal padding of the calendar header cell. | |||
| $kendo-calendar-header-cell-padding-y | 0 | ||
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-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the calendar header cell. | |||
| $kendo-calendar-header-cell-line-height | 2 | ||
Description
Line height of the calendar header cell. | |||
| $kendo-calendar-header-cell-bg | inherit | ||
Description
Background color of the calendar header cell. | |||
| $kendo-calendar-header-cell-text | inherit | ||
Description
Text color of the calendar header cell. | |||
| $kendo-calendar-caption-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the calendar captions. | |||
| $kendo-calendar-caption-padding-y | map.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-size | var( --kendo-font-size-sm, inherit ) | ||
Description
Font size of the calendar captions. | |||
| $kendo-calendar-caption-line-height | normal | ||
Description
Line height of the calendar captions. | |||
| $kendo-calendar-caption-font-weight | bold | ||
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-end | map.get( $kendo-spacing, 3 ) | ||
Description
Bottom padding of calendar views. | |||
| $kendo-calendar-view-gap | map.get( $kendo-spacing, 4 ) | ||
Description
Spacing between the views in the multiview calendar. | |||
| $kendo-calendar-weekend-bg | inherit | ||
Description
Background color of the calendar weekend cell. | |||
| $kendo-calendar-weekend-text | inherit | ||
Description
Text color of the calendar weekend cell. | |||
| $kendo-calendar-today-text | $kendo-color-white | ||
Description
Text color of the calendar today cell. | |||
| $kendo-calendar-today-bg | k-get-theme-color-var( primary-100 ) | ||
Description
Background color of the calendar today cell. | |||
| $kendo-calendar-today-hover-text | $kendo-color-white | ||
Description
Text color of the calendar today cell when hovered. | |||
| $kendo-calendar-today-hover-bg | k-get-theme-color-var( primary-120 ) | ||
Description
Background color of the calendar today cell when hovered. | |||
| $kendo-calendar-today-border-radius | 9999px | ||
Description
Border radius of the calendar today cell. | |||
| $kendo-calendar-week-number-bg | inherit | ||
Description
Background color of the calendar week number cell. | |||
| $kendo-calendar-week-number-text | var( --kendo-subtle-text, inherit ) | ||
Description
Text color of the calendar week number cell. | |||
| $kendo-calendar-other-month-bg | inherit | ||
Description
Background color of the other months calendar cells. | |||
| $kendo-calendar-other-month-text | var( --kendo-disabled-text, inherit ) | ||
Description
Text color of the other months calendar cells. | |||
| $kendo-calendar-cell-bg | inherit | ||
Description
Background color of the calendar cells. | |||
| $kendo-calendar-cell-text | inherit | ||
Description
Text color of the calendar cells. | |||
| $kendo-calendar-cell-hover-bg | var( --kendo-hover-bg, inherit ) | ||
Description
Background color of the calendar cells when hovered. | |||
| $kendo-calendar-cell-hover-text | var( --kendo-hover-text, inherit ) | ||
Description
Text color of the calendar cells when hovered. | |||
| $kendo-calendar-cell-selected-bg | var( --kendo-selected-bg, inherit ) | ||
Description
Background color of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-text | var( --kendo-selected-text, inherit ) | ||
Description
Text color of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-border | var( --kendo-selected-border, inherit ) | ||
Description
Border color of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-shadow | inset 0 0 0 1px $kendo-calendar-cell-selected-border | ||
Description
Shadow of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-hover-bg | var( --kendo-selected-hover-bg, inherit ) | ||
Description
Background color of the selected calendar cell when hovered. | |||
| $kendo-calendar-cell-selected-hover-text | var( --kendo-selected-hover-text, inherit ) | ||
Description
Text color of the selected calendar cell when hovered. | |||
| $kendo-calendar-cell-focus-shadow | inset 0 0 0 1px 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-width | 5em | ||
Description
Width of the navigation in the infinite calendar. | |||
| $kendo-calendar-navigation-item-height | 2em | ||
Description
Height of the navigation items in the infinite calendar. | |||
| $kendo-calendar-navigation-bg | 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-x | map.get( $kendo-spacing, 3 ) | ||
Description
Background color of the navigation in the infinite calendar. | |||
| $kendo-infinite-calendar-header-padding-y | map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) | ||
Description
Background color of the navigation in the infinite calendar. | |||
| $kendo-infinite-calendar-view-padding-x | map.get( $kendo-spacing, 3 ) | ||
Description
Horizontal padding of the infinite calendar. | |||
| $kendo-infinite-calendar-view-padding-y | 0px | ||
Description
Vertical padding of the infinite calendar. | |||
| $kendo-calendar-range-bg | k-get-theme-color-var( neutral-30 ) | ||
Description
Background color of the range selection in the calendar. | |||
| $kendo-calendar-range-text | inherit | ||
Description
Text color of the range selection in the calendar. | |||
| $kendo-calendar-range-border | k-get-theme-color-var( neutral-130 ) | ||
Description
Border color of the range selection in the calendar. | |||
| $kendo-calendar-start-range-hover-shadow | inset 1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) | ||
Description
Hover shadow of the start range selection in the calendar. | |||
| $kendo-calendar-mid-range-hover-shadow | inset 0 -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) | ||
Description
Hover shadow of the mid range selection in the calendar. | |||
| $kendo-calendar-end-range-hover-shadow | inset -1px -1px 0 0 k-get-theme-color-var( neutral-130 ), inset 0 1px 0 0 k-get-theme-color-var( neutral-130 ) | ||
Description
Hover shadow of the end range selection in the calendar. | |||
