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 | 32px | 32px |
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, #3d3d3d) |
Description
The text color of the Calendar. | |||
| $kendo-calendar-border | String | $kendo-component-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
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, #fafafa) |
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, #3d3d3d) |
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.08)) |
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 | List | 0 1px 3px 1px rgba(black, .1) | 0 1px 3px 1px rgba(0, 0, 0, 0.1) |
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 | 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.25rem) |
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 | 32px |
Description
The width of the header cells in the Calendar. | |||
| $kendo-calendar-header-cell-height | Number | $kendo-calendar-cell-size | 32px |
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, #666666) |
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(2) | var(--kendo-spacing-2, 0.5rem) |
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 | 32px |
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 | var( --kendo-font-weight-bold, normal ) | var(--kendo-font-weight-bold, normal) |
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) | 256px |
Description
The width of the Calendar view. | |||
| $kendo-calendar-view-height | Number | ($kendo-calendar-cell-size * 7) | 224px |
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 | color | color |
Description
The style of the current day in the Calendar. | |||
| $kendo-calendar-today-color | String | $kendo-color-primary | var(--kendo-color-primary, #ff6358) |
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, #666666) |
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, #666666) |
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, #3d3d3d) |
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.08)) |
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, #ff6358) |
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-border, rgba(0, 0, 0, 0.08)) |
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, #ea5a51) |
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 | 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 | List | inset 0 0 0 2px rgba( $kendo-color-black, .08 ) | inset 0 0 0 2px rgba(0, 0, 0, 0.08) |
Description
The shadow of the focused cells in the Calendar. | |||
| $kendo-calendar-cell-selected-focus-shadow | List | $kendo-calendar-cell-focus-shadow | inset 0 0 0 2px rgba(0, 0, 0, 0.08) |
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, #fafafa) |
Description
The background color of the Calendar navigation. | |||
| $kendo-calendar-navigation-text | String | $kendo-calendar-header-text | var(--kendo-color-on-app-surface, #3d3d3d) |
Description
The text color of the Calendar navigation. | |||
| $kendo-calendar-navigation-border | String | $kendo-calendar-header-border | var(--kendo-color-border, rgba(0, 0, 0, 0.08)) |
Description
The border color of the Calendar navigation. | |||
| $kendo-calendar-navigation-hover-text | String | $kendo-link-hover-text | var(--kendo-color-primary-hover, #ea5a51) |
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 ) | 288px |
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.375rem) |
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 | 28px | 28px |
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 | 32px | 32px |
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(2) | var(--kendo-spacing-2, 0.5rem) |
Description
The horizontal padding of the cells in the large Calendar. | |||
| $kendo-calendar-lg-cell-padding-y | String | k-spacing(2) | var(--kendo-spacing-2, 0.5rem) |
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
)
) |
|
Description
The sizes Map of the Calendar. | |||