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 | Number | 1px | 1px |
Description
The width of the border around the Calendar. | |||
| $kendo-calendar-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Calendar. | |||
| $kendo-calendar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Calendar. | |||
| $kendo-calendar-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the Calendar. | |||
| $kendo-calendar-cell-size | Number | 28px | 28px |
Description
The size of the calendar cell. | |||
| $kendo-calendar-bg | String | var( --kendo-component-bg, initial) | var(--kendo-component-bg, initial) |
Description
The background color of the Calendar. | |||
| $kendo-calendar-text | String | var( --kendo-component-text, initial) | var(--kendo-component-text, initial) |
Description
The text color of the Calendar. | |||
| $kendo-calendar-border | String | var( --kendo-component-border, initial) | var(--kendo-component-border, initial) |
Description
The border color of the Calendar. | |||
| $kendo-calendar-header-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the calendar header. | |||
| $kendo-calendar-header-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the calendar header. | |||
| $kendo-calendar-header-border-width | Number | 1px | 1px |
Description
Width of the bottom border of the calendar header. | |||
| $kendo-calendar-header-bg | String | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the calendar header. | |||
| $kendo-calendar-header-text | String | $kendo-calendar-text | var(--kendo-component-text, initial) |
Description
The text color of the calendar header. | |||
| $kendo-calendar-header-border | String | $kendo-calendar-border | var(--kendo-component-border, initial) |
Description
The border color of the calendar header. | |||
| $kendo-calendar-nav-gap | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The spacing between the navigation buttons of the Calendar. | |||
| $kendo-calendar-footer-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the calendar footer. | |||
| $kendo-calendar-footer-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the calendar footer. | |||
| $kendo-calendar-cell-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the calendar cell. | |||
| $kendo-calendar-cell-padding-x | String | k-spacing(1.5) | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The horizontal padding of the calendar cell. | |||
| $kendo-calendar-cell-padding-y | String | $kendo-calendar-cell-padding-x | var(--kendo-spacing-1\.5, 0.375rem) |
Description
The vertical padding of the calendar cell. | |||
| $kendo-calendar-cell-line-height | String | $kendo-calendar-line-height | var(--kendo-line-height, normal) |
Description
The line height of the calendar cell. | |||
| $kendo-calendar-cell-border-radius | String | var( --kendo-border-radius-md, 0) | var(--kendo-border-radius-md, 0) |
Description
The border radius of the calendar cell. | |||
| $kendo-calendar-header-cell-padding-x | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The horizontal padding of the calendar header cell. | |||
| $kendo-calendar-header-cell-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
Th vertical padding of the calendar header cell. | |||
| $kendo-calendar-header-cell-width | Number | $kendo-calendar-cell-size | 28px |
Description
The width of the calendar header cell. | |||
| $kendo-calendar-header-cell-height | Number | $kendo-calendar-cell-size | 28px |
Description
The height of the calendar header cell. | |||
| $kendo-calendar-header-cell-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the calendar header cell. | |||
| $kendo-calendar-header-cell-line-height | Number | 2 | 2 |
Description
The line height of the calendar header cell. | |||
| $kendo-calendar-header-cell-bg | String | inherit | inherit |
Description
The background color of the calendar header cell. | |||
| $kendo-calendar-header-cell-text | String | inherit | inherit |
Description
The text color of the calendar header cell. | |||
| $kendo-calendar-caption-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the calendar captions. | |||
| $kendo-calendar-caption-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the calendar captions. | |||
| $kendo-calendar-caption-height | Number | $kendo-calendar-cell-size | 28px |
Description
The height of the calendar captions. | |||
| $kendo-calendar-caption-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the calendar captions. | |||
| $kendo-calendar-caption-line-height | String | normal | normal |
Description
The line height of the calendar captions. | |||
| $kendo-calendar-caption-font-weight | String | bold | bold |
Description
Font weight of the calendar captions. | |||
| $kendo-calendar-caption-color | String | $kendo-subtle-text | var(--kendo-color-subtle, #605e5c) |
Description
The text color of the calendar captions. | |||
| $kendo-calendar-view-width | Number | ($kendo-calendar-cell-size * 7) | 196px |
Description
The width of the Calendar view. | |||
| $kendo-calendar-view-height | Number | ($kendo-calendar-cell-size * 7) | 196px |
Description
The height of the Calendar view. | |||
| $kendo-calendar-view-padding-block-end | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The bottom padding of Calendar views. | |||
| $kendo-calendar-view-gap | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The spacing between the views in the multiview Calendar. | |||
| $kendo-calendar-weekend-bg | String | inherit | inherit |
Description
The background color of the calendar weekend cell. | |||
| $kendo-calendar-weekend-text | String | inherit | inherit |
Description
The text color of the calendar weekend cell. | |||
| $kendo-calendar-today-text | String | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | var(--kendo-color-app-surface, #ffffff) |
Description
The text color of the calendar today cell. | |||
| $kendo-calendar-today-bg | String | if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) | var(--kendo-color-primary, #0078d4) |
Description
The background color of the calendar today cell. | |||
| $kendo-calendar-today-hover-text | String | if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) | var(--kendo-color-app-surface, #ffffff) |
Description
The text color of the calendar today cell when hovered. | |||
| $kendo-calendar-today-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-get-theme-color-var( primary-120 )) | var(--kendo-color-primary-hover, #106ebe) |
Description
The background color of the calendar today cell when hovered. | |||
| $kendo-calendar-today-border-radius | Number | 9999px | 9999px |
Description
The border radius of the calendar today cell. | |||
| $kendo-calendar-week-number-bg | String | inherit | inherit |
Description
The background color of the calendar week number cell. | |||
| $kendo-calendar-week-number-text | String | var( --kendo-subtle-text, inherit ) | var(--kendo-subtle-text, inherit) |
Description
The text color of the calendar week number cell. | |||
| $kendo-calendar-other-month-bg | String | inherit | inherit |
Description
The background color of the other months calendar cells. | |||
| $kendo-calendar-other-month-text | String | var( --kendo-disabled-text, inherit ) | var(--kendo-disabled-text, inherit) |
Description
The text color of the other months calendar cells. | |||
| $kendo-calendar-cell-bg | String | inherit | inherit |
Description
The background color of the calendar cells. | |||
| $kendo-calendar-cell-text | String | inherit | inherit |
Description
The text color of the calendar cells. | |||
| $kendo-calendar-cell-hover-bg | String | var( --kendo-hover-bg, inherit ) | var(--kendo-hover-bg, inherit) |
Description
The background color of the calendar cells when hovered. | |||
| $kendo-calendar-cell-hover-text | String | var( --kendo-hover-text, inherit ) | var(--kendo-hover-text, inherit) |
Description
The text color of the calendar cells when hovered. | |||
| $kendo-calendar-cell-selected-bg | String | var( --kendo-selected-bg, inherit ) | var(--kendo-selected-bg, inherit) |
Description
The background color of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-text | String | var( --kendo-selected-text, inherit ) | var(--kendo-selected-text, inherit) |
Description
The text color of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-border | String | var( --kendo-selected-border, inherit ) | var(--kendo-selected-border, inherit) |
Description
The border color of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-shadow | List | inset 0 0 0 1px $kendo-calendar-cell-selected-border | inset 0 0 0 1px var(--kendo-selected-border, inherit) |
Description
The shadow of the selected calendar cell. | |||
| $kendo-calendar-cell-selected-hover-bg | String | var( --kendo-selected-hover-bg, inherit ) | var(--kendo-selected-hover-bg, inherit) |
Description
The background color of the selected calendar cell when hovered. | |||
| $kendo-calendar-cell-selected-hover-text | String | var( --kendo-selected-hover-text, inherit ) | var(--kendo-selected-hover-text, inherit) |
Description
The text color of the selected calendar cell when hovered. | |||
| $kendo-calendar-cell-focus-shadow | List | inset 0 0 0 1px if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) | inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) |
Description
The shadow of the selected calendar cell when focused. | |||
| $kendo-calendar-cell-selected-focus-shadow | List | $kendo-calendar-cell-focus-shadow | inset 0 0 0 1px var(--kendo-color-base-emphasis, #605e5c) |
Description
The shadow of the selected calendar cell when selected and focused. | |||
| $kendo-calendar-navigation-width | Number | 5em | 5em |
Description
The width of the navigation in the infinite Calendar. | |||
| $kendo-calendar-navigation-item-height | Number | 2em | 2em |
Description
The height of the navigation items in the infinite Calendar. | |||
| $kendo-calendar-navigation-bg | String | if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) | var(--kendo-color-surface, #faf9f8) |
Description
The background color of the navigation in the infinite Calendar. | |||
| $kendo-calendar-navigation-text | String | $kendo-calendar-header-text | var(--kendo-component-text, initial) |
Description
The text color of the navigation in the infinite Calendar. | |||
| $kendo-calendar-navigation-border | String | $kendo-calendar-header-border | var(--kendo-component-border, initial) |
Description
The border color of the navigation in the infinite Calendar. | |||
| $kendo-calendar-navigation-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #106ebe) |
Description
The text color of the hovered items in the calendar navigation. | |||
| $kendo-infinite-calendar-header-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The background color of the navigation in the infinite Calendar. | |||
| $kendo-infinite-calendar-header-padding-y | List | k-spacing(3) k-spacing(1) | var(--kendo-spacing-3, 0.75rem) var(--kendo-spacing-1, 0.25rem) |
Description
The background color of the navigation in the infinite Calendar. | |||
| $kendo-infinite-calendar-view-padding-x | String | k-spacing(3) | var(--kendo-spacing-3, 0.75rem) |
Description
The horizontal padding of the infinite Calendar. | |||
| $kendo-infinite-calendar-view-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the infinite Calendar. | |||
| $kendo-infinite-calendar-view-height | Number | ( $kendo-calendar-cell-size * 9 ) | 252px |
Description
The height of the infinite Calendar view. | |||
| $kendo-calendar-range-bg | String | if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) | var(--kendo-color-base-active, #edebe9) |
Description
The background color of the range selection in the Calendar. | |||
| $kendo-calendar-range-text | String | inherit | inherit |
Description
The text color of the range selection in the Calendar. | |||
| $kendo-calendar-range-border | String | if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | var(--kendo-color-base-emphasis, #605e5c) |
Description
The border color of the range selection in the Calendar. | |||
| $kendo-calendar-start-range-hover-shadow | List | inset 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 )) | inset 1px -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset 0 1px 0 0 var(--kendo-color-base-emphasis, #605e5c) |
Description
The shadow of the hovered start range selection in the Calendar. | |||
| $kendo-calendar-mid-range-hover-shadow | List | inset 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 )) | inset 0 -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset 0 1px 0 0 var(--kendo-color-base-emphasis, #605e5c) |
Description
The shadow of the hovered mid range selection in the Calendar. | |||
| $kendo-calendar-end-range-hover-shadow | List | inset -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 )) | inset -1px -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset 0 1px 0 0 var(--kendo-color-base-emphasis, #605e5c) |
Description
The shadow of the hovered end range selection in the Calendar. | |||
| $kendo-calendar-start-end-range-hover-shadow | List | inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset -1px 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) | inset 1px -1px 0 0 var(--kendo-color-base-emphasis, #605e5c), inset -1px 1px 0 0 var(--kendo-color-base-emphasis, #605e5c) |
Description
The shadow of the hovered start-end range selection in the Calendar. | |||
| $kendo-calendar-sm-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the small Calendar. | |||
| $kendo-calendar-sm-line-height | String | var( --kendo-line-height-sm, normal ) | var(--kendo-line-height-sm, normal) |
Description
The line height of the small Calendar. | |||
| $kendo-calendar-sm-cell-size | Number | 24px | 24px |
Description
The size of the cells in the small Calendar. | |||
| $kendo-calendar-sm-cell-padding-x | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The horizontal padding of the cells in the small Calendar. | |||
| $kendo-calendar-sm-cell-padding-y | String | k-spacing(0.5) | var(--kendo-spacing-0\.5, 0.125rem) |
Description
The vertical padding of the cells in the small Calendar. | |||
| $kendo-calendar-sm-cell-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the cells in the small Calendar. | |||
| $kendo-calendar-md-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the medium Calendar. | |||
| $kendo-calendar-md-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the medium Calendar. | |||
| $kendo-calendar-md-cell-size | Number | 28px | 28px |
Description
The size of the cells in the medium Calendar. | |||
| $kendo-calendar-md-cell-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the cells in the medium Calendar. | |||
| $kendo-calendar-md-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the cells in the medium Calendar. | |||
| $kendo-calendar-md-cell-font-size | String | var( --kendo-font-size-sm, inherit ) | var(--kendo-font-size-sm, inherit) |
Description
The font size of the cells in the medium Calendar. | |||
| $kendo-calendar-lg-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the large Calendar. | |||
| $kendo-calendar-lg-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the large Calendar. | |||
| $kendo-calendar-lg-cell-size | Number | 32px | 32px |
Description
The size of the cells in the large Calendar. | |||
| $kendo-calendar-lg-cell-padding-x | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the cells in the large Calendar. | |||
| $kendo-calendar-lg-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the cells in the large Calendar. | |||
| $kendo-calendar-lg-cell-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the cells in the large Calendar. | |||
| $kendo-calendar-sizes | Map | (
sm: (
font-size: $kendo-calendar-sm-font-size,
line-height: $kendo-calendar-sm-line-height,
cell-size: $kendo-calendar-sm-cell-size,
cell-padding-x: $kendo-calendar-sm-cell-padding-y,
cell-padding-y: $kendo-calendar-sm-cell-padding-x,
cell-font-size: $kendo-calendar-sm-cell-font-size
),
md: (
font-size: $kendo-calendar-md-font-size,
line-height: $kendo-calendar-md-line-height,
cell-size: $kendo-calendar-md-cell-size,
cell-padding-x: $kendo-calendar-md-cell-padding-y,
cell-padding-y: $kendo-calendar-md-cell-padding-x,
cell-font-size: $kendo-calendar-md-cell-font-size
),
lg: (
font-size: $kendo-calendar-lg-font-size,
line-height: $kendo-calendar-lg-line-height,
cell-size: $kendo-calendar-lg-cell-size,
cell-padding-x: $kendo-calendar-lg-cell-padding-y,
cell-padding-y: $kendo-calendar-lg-cell-padding-x,
cell-font-size: $kendo-calendar-lg-cell-font-size
)
) | (sm: (font-size: var(--kendo-font-size-sm, inherit), line-height: var(--kendo-line-height-sm, normal), cell-size: 24px, cell-padding-x: var(--kendo-spacing-0\.5, 0.125rem), cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem), cell-font-size: var(--kendo-font-size-sm, inherit)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 28px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), cell-font-size: var(--kendo-font-size-sm, inherit)), lg: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 32px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem), cell-font-size: var(--kendo-font-size, inherit))) |
Description
The sizes Map of the Calendar. | |||
