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 | 38px | 38px |
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, #212529) |
Description
The text color of the Calendar. | |||
| $kendo-calendar-border | String | $kendo-component-border | var(--kendo-color-border, #dee2e6) |
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 | 1px | 1px |
Description
The border width of the header in the Calendar. | |||
| $kendo-calendar-header-bg | String | $kendo-component-header-bg | var(--kendo-color-surface, #f8f9fa) |
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, #212529) |
Description
The text color of the header in the Calendar. | |||
| $kendo-calendar-header-border | String | $kendo-component-header-border | var(--kendo-color-border, #dee2e6) |
Description
The border color of the header in the Calendar. | |||
| $kendo-calendar-header-gradient | Null | $kendo-component-header-gradient | null |
Description
The gradient of the header in the Calendar. | |||
| $kendo-calendar-header-shadow | String | none | none |
Description
The box 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 | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The horizontal padding of the cells in the Calendar. | |||
| $kendo-calendar-cell-padding-y | String | k-spacing(1) | var(--kendo-spacing-1, 0.25rem) |
Description
The vertical padding of the cells in the Calendar. | |||
| $kendo-calendar-cell-line-height | String | $kendo-calendar-line-height | var(--kendo-line-height, normal) |
Description
The line height of the cells in the Calendar. | |||
| $kendo-calendar-cell-border-radius | String | k-border-radius(md) | var(--kendo-border-radius-md, 0.375rem) |
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 | 38px |
Description
The width of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-height | Number | $kendo-calendar-cell-size | 38px |
Description
The height of the header cells in the Calendar. | |||
| $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 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, #606970) |
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(3) | var(--kendo-spacing-3, 0.75rem) |
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 | 38px |
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.875rem |
Description
The font size of the week number cells in the Calendar. | |||
| $kendo-calendar-view-width | Number | ($kendo-calendar-cell-size * 8) | 304px |
Description
The width of the Calendar view. | |||
| $kendo-calendar-view-height | Number | ($kendo-calendar-cell-size * 7) | 266px |
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-weekend-text | Null | null | null |
Description
The text color of the weekend cells in the Calendar. | |||
| $kendo-calendar-today-style | String | box | box |
Description
The style of the current day in the Calendar. | |||
| $kendo-calendar-today-color | String | $kendo-color-primary | var(--kendo-color-primary, #0d6efd) |
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, #606970) |
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, #606970) |
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-subtle-hover, #dee2e6) |
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, #212529) |
Description
The text color of the hovered cells in the Calendar. | |||
| $kendo-calendar-cell-hover-border | String | $kendo-hover-border | var(--kendo-color-border, #dee2e6) |
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-selected-bg | var(--kendo-color-primary, #0d6efd) |
Description
The background color of the selected cells in the Calendar. | |||
| $kendo-calendar-cell-selected-text | String | $kendo-selected-text | var(--kendo-color-on-primary, #ffffff) |
Description
The text color of the selected cells in the Calendar. | |||
| $kendo-calendar-cell-selected-border | String | $kendo-selected-border | var(--kendo-color-primary, #0d6efd) |
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 | $kendo-selected-hover-bg | var(--kendo-color-primary-hover, #0b5ed7) |
Description
The background color of the selected and hovered cells in the Calendar. | |||
| $kendo-calendar-cell-selected-hover-text | String | $kendo-selected-hover-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 | String | $kendo-selected-hover-border | var(--kendo-color-border, #dee2e6) |
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 | List | inset $kendo-button-focus-shadow | inset (0 0 0 0.25rem color-mix(in srgb, var(--kendo-color-border, #dee2e6) 50%, transparent)) |
Description
The shadow of the focused cells in the Calendar. | |||
| $kendo-calendar-cell-selected-focus-shadow | List | inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary-active ) 50%, transparent), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) | inset 0 0 0 2px color-mix(in srgb, var(--kendo-color-primary-active, #0a58ca) 50%, transparent) |
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 | $kendo-calendar-header-bg | var(--kendo-color-surface, #f8f9fa) |
Description
The background color of the Calendar navigation. | |||
| $kendo-calendar-navigation-text | String | $kendo-calendar-header-text | var(--kendo-color-on-app-surface, #212529) |
Description
The text color of the Calendar navigation. | |||
| $kendo-calendar-navigation-border | String | $kendo-calendar-header-border | var(--kendo-color-border, #dee2e6) |
Description
The border color of the Calendar navigation. | |||
| $kendo-calendar-navigation-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #0b5ed7) |
Description
The text color of the hovered items in 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 ) | 342px |
Description
The height of the Calendar view in the Infinite Calendar. | |||
| $kendo-calendar-range-cell-border-radius | String | k-border-radius(lg) | var(--kendo-border-radius-lg, 0.5rem) |
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 | 34px | 34px |
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 | 38px | 38px |
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 | 42px | 42px |
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: 34px, 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: 38px, 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: 42px, 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. | |||
