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 | Number | k-math-div( 20, 14 ) | 1.4285714286 |
Description
The line height of the Calendar. | |||
| $kendo-calendar-cell-size | Number | 36px | 36px |
Description
The size of the cells in the Calendar. | |||
| $kendo-calendar-bg | String | $kendo-component-bg | var(--kendo-color-surface-alt, #ffffff) |
Description
The background color of the Calendar. | |||
| $kendo-calendar-text | String | $kendo-component-text | var(--kendo-color-on-app-surface, #212121) |
Description
The text color of the Calendar. | |||
| $kendo-calendar-border | String | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
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 header in the Calendar. | |||
| $kendo-calendar-header-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the header in the Calendar. | |||
| $kendo-calendar-header-border-width | Number | 0px | 0px |
Description
The height of the header in the Calendar. | |||
| $kendo-calendar-header-bg | Null | null | null |
Description
The background color of the header in the Calendar. | |||
| $kendo-calendar-header-text | String | $kendo-component-header-text | var(--kendo-color-on-app-surface, #212121) |
Description
The text color of the header in the Calendar. | |||
| $kendo-calendar-header-border | String | $kendo-component-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
Description
The border color of the header in the Calendar. | |||
| $kendo-calendar-header-gradient | Null | null | null |
Description
The gradient of the header in the Calendar. | |||
| $kendo-calendar-header-shadow | Null | null | null |
Description
The shadow of the header in the Calendar. | |||
| $kendo-calendar-nav-gap | Null | null | null |
Description
The gap between the items in the navigation of the Calendar. | |||
| $kendo-calendar-footer-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the footer in the Calendar. | |||
| $kendo-calendar-footer-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the footer in the Calendar. | |||
| $kendo-calendar-cell-padding-x | Number | .25em | 0.25em |
Description
The horizontal padding of the cells in the Calendar. | |||
| $kendo-calendar-cell-padding-y | Number | $kendo-calendar-cell-padding-x | 0.25em |
Description
The vertical padding of the cells in the Calendar. | |||
| $kendo-calendar-cell-line-height | Number | $kendo-calendar-line-height | 1.4285714286 |
Description
The line height of the cells in the Calendar. | |||
| $kendo-calendar-cell-border-radius | Number | 100px | 100px |
Description
The border radius of the cells in the Calendar. | |||
| $kendo-calendar-header-cell-padding-x | Null | null | null |
Description
The horizontal padding of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-padding-y | Null | null | null |
Description
The vertical padding of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-width | Number | $kendo-calendar-cell-size | 36px |
Description
The width of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-height | Number | $kendo-calendar-cell-size | 36px |
Description
The height of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-font-size | String | var( --kendo-font-size-sm, inherit )!default | var(--kendo-font-size-sm, inherit) |
Description
The font size of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-line-height | Number | 2 | 2 |
Description
The line height of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-bg | Null | null | null |
Description
The background color of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-text | String | $kendo-subtle-text | var(--kendo-color-subtle, #757575) |
Description
The text color of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-opacity | Null | null | null |
Description
The opacity of the header cells in the Calendar. | |||
| $kendo-calendar-caption-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the caption in the Calendar. | |||
| $kendo-calendar-caption-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the caption in the Calendar. | |||
| $kendo-calendar-caption-height | Number | $kendo-calendar-cell-size | 36px |
Description
The height of the caption in the Calendar. | |||
| $kendo-calendar-caption-font-size | Null | null | null |
Description
The font size of the caption in the Calendar. | |||
| $kendo-calendar-caption-line-height | Null | null | null |
Description
The line height of the caption in the Calendar. | |||
| $kendo-calendar-caption-font-weight | String | bold | bold |
Description
The font weight of the caption in the Calendar. | |||
| $kendo-calendar-week-number-font-size | Number | $kendo-font-size-sm | 0.75rem |
Description
The font size of the week number cells in the Calendar. | |||
| $kendo-calendar-view-width | Number | ($kendo-calendar-cell-size * 8) | 288px |
Description
The width of the Calendar view. | |||
| $kendo-calendar-view-height | Number | ($kendo-calendar-cell-size * 7) | 252px |
Description
The height of the Calendar view. | |||
| $kendo-calendar-view-gap | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The gap between the items in the Calendar view. | |||
| $kendo-calendar-weekend-bg | Null | null | null |
Description
The background color of the weekend cells in the Calendar. | |||
| $kendo-calendar-today-style | String | color | color |
Description
The style of the current day in the Calendar. | |||
| $kendo-calendar-today-color | String | $kendo-color-primary | var(--kendo-color-primary, #3f51b5) |
Description
The color of the current day in the Calendar. | |||
| $kendo-calendar-week-number-bg | Null | null | null |
Description
The background color of the week number cells in the Calendar. | |||
| $kendo-calendar-week-number-text | String | $kendo-calendar-header-cell-text | var(--kendo-color-subtle, #757575) |
Description
The text color of the week number cells in the Calendar. | |||
| $kendo-calendar-other-month-bg | Null | null | null |
Description
The background color of the preceding/subsequent month cells in the Calendar. | |||
| $kendo-calendar-other-month-text | String | $kendo-calendar-header-cell-text | var(--kendo-color-subtle, #757575) |
Description
The text color of the preceding/subsequent month cells in the Calendar. | |||
| $kendo-calendar-cell-bg | Null | null | null |
Description
The background color of the cells in the Calendar. | |||
| $kendo-calendar-cell-text | Null | null | null |
Description
The text color of the cells in the Calendar. | |||
| $kendo-calendar-cell-border | Null | null | null |
Description
The border color of the cells in the Calendar. | |||
| $kendo-calendar-cell-gradient | Null | null | null |
Description
The gradient of the cells in the Calendar. | |||
| $kendo-calendar-cell-hover-bg | String | $kendo-hover-bg | var(--kendo-color-base-hover, #ebebeb) |
Description
The background color of the hovered cells in the Calendar. | |||
| $kendo-calendar-cell-hover-text | String | $kendo-hover-text | var(--kendo-color-on-app-surface, #212121) |
Description
The text color of the hovered cells in the Calendar. | |||
| $kendo-calendar-cell-hover-border | String | $kendo-hover-border | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
Description
The border color of the hovered cells in the Calendar. | |||
| $kendo-calendar-cell-hover-gradient | Null | null | null |
Description
The gradient of the hovered cells in the Calendar. | |||
| $kendo-calendar-cell-selected-bg | String | $kendo-color-primary | var(--kendo-color-primary, #3f51b5) |
Description
The background color of the selected cells in the Calendar. | |||
| $kendo-calendar-cell-selected-text | String | if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-calendar-cell-selected-bg )) | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected cells in the Calendar. | |||
| $kendo-calendar-cell-selected-border | String | $kendo-calendar-cell-selected-bg | var(--kendo-color-primary, #3f51b5) |
Description
The border color of the selected cells in the Calendar. | |||
| $kendo-calendar-cell-selected-gradient | Null | null | null |
Description
The gradient of the selected cells in the Calendar. | |||
| $kendo-calendar-cell-selected-hover-bg | String | if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-calendar-cell-selected-bg, .5 )) | var(--kendo-color-primary-hover, #3a4ba7) |
Description
The background color of the selected and hovered cells in the Calendar. | |||
| $kendo-calendar-cell-selected-hover-text | String | $kendo-calendar-cell-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected and hovered cells in the Calendar. | |||
| $kendo-calendar-cell-selected-hover-border | Null | null | null |
Description
The border color of the selected and hovered cells in the Calendar. | |||
| $kendo-calendar-cell-selected-hover-gradient | Null | null | null |
Description
The gradient of the selected and hovered cells in the Calendar. | |||
| $kendo-calendar-cell-focus-shadow | Null | $kendo-list-item-focus-shadow | null |
Description
The shadow of the focused cells in the Calendar. | |||
| $kendo-calendar-cell-selected-focus-shadow | Null | $kendo-calendar-cell-focus-shadow | null |
Description
The shadow of the selected and focused cells in the Calendar. | |||
| $kendo-calendar-navigation-width | Number | 5em | 5em |
Description
The width of the Calendar navigation. | |||
| $kendo-calendar-navigation-item-height | Number | 2em | 2em |
Description
The height of the items in the Calendar navigation. | |||
| $kendo-calendar-navigation-bg | String | if($kendo-enable-color-system, k-color( surface ), k-true-mix( $kendo-calendar-text, $kendo-calendar-bg, 3)) | var(--kendo-color-surface, #f5f5f5) |
Description
The background color of the Calendar navigation. | |||
| $kendo-calendar-navigation-text | String | $kendo-calendar-text | var(--kendo-color-on-app-surface, #212121) |
Description
The text color of the Calendar navigation. | |||
| $kendo-calendar-navigation-border | String | $kendo-calendar-border | var(--kendo-color-border, rgba(0, 0, 0, 0.12)) |
Description
The border color of the Calendar navigation. | |||
| $kendo-infinite-calendar-header-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the header in the Infinite Calendar. | |||
| $kendo-infinite-calendar-header-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The vertical padding of the header in the Infinite Calendar. | |||
| $kendo-infinite-calendar-view-padding-x | String | k-spacing(4) | var(--kendo-spacing-4, 1rem) |
Description
The horizontal padding of the Calendar view in the Infinite Calendar. | |||
| $kendo-infinite-calendar-view-padding-y | String | k-spacing(0) | var(--kendo-spacing-0, 0px) |
Description
The vertical padding of the Calendar view in the Infinite Calendar. | |||
| $kendo-infinite-calendar-view-height | Number | ( $kendo-calendar-cell-size * 9 ) | 324px |
Description
The height of the Calendar view in the Infinite Calendar. | |||
| $kendo-calendar-range-cell-border-radius | String | k-border-radius(full) | var(--kendo-border-radius-full, 9999px) |
Description
The border radius of the range cells in the Multiview Calendar. | |||
| $kendo-calendar-sm-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the small Calendar. | |||
| $kendo-calendar-sm-line-height | String | var( --kendo-line-height, normal ) | var(--kendo-line-height, normal) |
Description
The line height of the small Calendar. | |||
| $kendo-calendar-sm-cell-size | Number | 32px | 32px |
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-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 | 36px | 36px |
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-lg-font-size | String | var( --kendo-font-size-lg, inherit ) | var(--kendo-font-size-lg, inherit) |
Description
The font size of the large Calendar. | |||
| $kendo-calendar-lg-line-height | String | var( --kendo-line-height-lg, normal ) | var(--kendo-line-height-lg, normal) |
Description
The line height of the large Calendar. | |||
| $kendo-calendar-lg-cell-size | Number | 40px | 40px |
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-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
),
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
),
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
)
) | (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 32px, cell-padding-x: var(--kendo-spacing-0\.5, 0.125rem), cell-padding-y: var(--kendo-spacing-0\.5, 0.125rem)), md: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 36px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem)), lg: (font-size: var(--kendo-font-size-lg, inherit), line-height: var(--kendo-line-height-lg, normal), cell-size: 40px, cell-padding-x: var(--kendo-spacing-1, 0.25rem), cell-padding-y: var(--kendo-spacing-1, 0.25rem))) |
Description
The sizes Map of the Calendar. | |||
