Calendar

The Calendar component is a UI tool that displays a graphical Gregorian calendar, enabling date selection and navigation.

Sass Variables

The Telerik and Kendo UI Calendar enables you to configure and customize its appearance through the available Sass variables.

VariableDefault ValueComputed ValueValue
kendo-calendar-border-width1px1pxDefault: 1pxComputed: 1px
Description: The width of the border around the Calendar.
kendo-calendar-font-familyvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)Default: var( --kendo-font-family, inherit )Computed: var(--kendo-font-family, inherit)
Description: The font family of the Calendar.
kendo-calendar-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the Calendar.
kendo-calendar-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the Calendar.
kendo-calendar-cell-size32px32pxDefault: 32pxComputed: 32px
Description: The size of the cells in the Calendar.
kendo-calendar-bg$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)Default: $kendo-component-bgComputed: var(--kendo-color-surface-alt, #ffffff)
Description: The background color of the Calendar.
kendo-calendar-text$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Calendar.
kendo-calendar-border$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Calendar.
kendo-calendar-header-padding-xk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the header in the Calendar.
kendo-calendar-header-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the header in the Calendar.
kendo-calendar-header-border-width1px1pxDefault: 1pxComputed: 1px
Description: The border width of the header in the Calendar.
kendo-calendar-header-bg$kendo-component-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-component-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the header in the Calendar.
kendo-calendar-header-text$kendo-component-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-component-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the header in the Calendar.
kendo-calendar-header-border$kendo-component-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-component-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the header in the Calendar.
kendo-calendar-header-gradient$kendo-component-header-gradientnullDefault: $kendo-component-header-gradientComputed: null
Description: The gradient of the header in the Calendar.
kendo-calendar-header-shadow0 1px 3px 1px rgba(black, .1)(0 1px 3px 1px rgba(0, 0, 0, 0.1))Default: 0 1px 3px 1px rgba(black, .1)Computed: (0 1px 3px 1px rgba(0, 0, 0, 0.1))
Description: The shadow of the header in the Calendar.
kendo-calendar-nav-gapnullnullDefault: nullComputed: null
Description: The gap between the items in the navigation of the Calendar.
kendo-calendar-footer-padding-xk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the footer in the Calendar.
kendo-calendar-footer-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the footer in the Calendar.
kendo-calendar-cell-padding-x.25em0.25emDefault: .25emComputed: 0.25em
Description: The horizontal padding of the cells in the Calendar.
kendo-calendar-cell-padding-y$kendo-calendar-cell-padding-x0.25emDefault: $kendo-calendar-cell-padding-xComputed: 0.25em
Description: The vertical padding of the cells in the Calendar.
kendo-calendar-cell-line-height$kendo-calendar-line-heightvar(--kendo-line-height, normal)Default: $kendo-calendar-line-heightComputed: var(--kendo-line-height, normal)
Description: The line height of the cells in the Calendar.
kendo-calendar-cell-border-radiusk-border-radius(md)var(--kendo-border-radius-md, 0.25rem)Default: k-border-radius(md)Computed: var(--kendo-border-radius-md, 0.25rem)
Description: The border radius of the cells in the Calendar.
kendo-calendar-header-cell-padding-xnullnullDefault: nullComputed: null
Description: The horizontal padding of the header cells in the Calendar.
kendo-calendar-header-cell-padding-ynullnullDefault: nullComputed: null
Description: The vertical padding of the header cells in the Calendar.
kendo-calendar-header-cell-width$kendo-calendar-cell-size32pxDefault: $kendo-calendar-cell-sizeComputed: 32px
Description: The width of the header cells in the Calendar.
kendo-calendar-header-cell-height$kendo-calendar-cell-size32pxDefault: $kendo-calendar-cell-sizeComputed: 32px
Description: The height of the header cells in the Calendar.
kendo-calendar-header-cell-font-sizevar( --kendo-font-size-sm, inherit )var(--kendo-font-size-sm, inherit)Default: var( --kendo-font-size-sm, inherit )Computed: var(--kendo-font-size-sm, inherit)
Description: The font size of the header cells in the Calendar.
kendo-calendar-header-cell-line-height22Default: 2Computed: 2
Description: The line height of the header cells in the Calendar.
kendo-calendar-header-cell-bgnullnullDefault: nullComputed: null
Description: The background color of the header cells in the Calendar.
kendo-calendar-header-cell-text$kendo-subtle-textvar(--kendo-color-subtle, #666666)Default: $kendo-subtle-textComputed: var(--kendo-color-subtle, #666666)
Description: The text color of the header cells in the Calendar.
kendo-calendar-header-cell-opacitynullnullDefault: nullComputed: null
Description: The opacity of the header cells in the Calendar.
kendo-calendar-caption-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the caption in the Calendar.
kendo-calendar-caption-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the caption in the Calendar.
kendo-calendar-caption-height$kendo-calendar-cell-size32pxDefault: $kendo-calendar-cell-sizeComputed: 32px
Description: The height of the caption in the Calendar.
kendo-calendar-caption-font-sizenullnullDefault: nullComputed: null
Description: The font size of the caption in the Calendar.
kendo-calendar-caption-line-heightnullnullDefault: nullComputed: null
Description: The line height of the caption in the Calendar.
kendo-calendar-caption-font-weightvar( --kendo-font-weight-bold, normal )var(--kendo-font-weight-bold, normal)Default: var( --kendo-font-weight-bold, normal )Computed: var(--kendo-font-weight-bold, normal)
Description: The font weight of the caption in the Calendar.
kendo-calendar-week-number-font-size$kendo-font-size-sm0.75remDefault: $kendo-font-size-smComputed: 0.75rem
Description: The font size of the week number cells in the Calendar.
kendo-calendar-view-width($kendo-calendar-cell-size * 8)256pxDefault: ($kendo-calendar-cell-size * 8)Computed: 256px
Description: The width of the Calendar view.
kendo-calendar-view-height($kendo-calendar-cell-size * 7)224pxDefault: ($kendo-calendar-cell-size * 7)Computed: 224px
Description: The height of the Calendar view.
kendo-calendar-view-gapk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The gap between the items in the Calendar view.
kendo-calendar-weekend-bgnullnullDefault: nullComputed: null
Description: The background color of the weekend cells in the Calendar.
kendo-calendar-weekend-textnullnullDefault: nullComputed: null
Description: The text color of the weekend cells in the Calendar.
kendo-calendar-today-stylecolorcolorDefault: colorComputed: color
Description: The style of the current day in the Calendar.
kendo-calendar-today-color$kendo-color-primaryvar(--kendo-color-primary, #ff6358)Default: $kendo-color-primaryComputed: var(--kendo-color-primary, #ff6358)
Description: The color of the current day in the Calendar.
kendo-calendar-week-number-bgnullnullDefault: nullComputed: null
Description: The background color of the week number cells in the Calendar.
kendo-calendar-week-number-text$kendo-calendar-header-cell-textvar(--kendo-color-subtle, #666666)Default: $kendo-calendar-header-cell-textComputed: var(--kendo-color-subtle, #666666)
Description: The text color of the week number cells in the Calendar.
kendo-calendar-other-month-bgnullnullDefault: nullComputed: null
Description: The background color of the preceding/subsequent month cells in the Calendar.
kendo-calendar-other-month-text$kendo-calendar-header-cell-textvar(--kendo-color-subtle, #666666)Default: $kendo-calendar-header-cell-textComputed: var(--kendo-color-subtle, #666666)
Description: The text color of the preceding/subsequent month cells in the Calendar.
kendo-calendar-cell-bgnullnullDefault: nullComputed: null
Description: The background color of the cells in the Calendar.
kendo-calendar-cell-textnullnullDefault: nullComputed: null
Description: The text color of the cells in the Calendar.
kendo-calendar-cell-bordernullnullDefault: nullComputed: null
Description: The border color of the cells in the Calendar.
kendo-calendar-cell-gradientnullnullDefault: nullComputed: null
Description: The gradient of the cells in the Calendar.
kendo-calendar-cell-hover-bg$kendo-hover-bgvar(--kendo-color-base-hover, #ebebeb)Default: $kendo-hover-bgComputed: var(--kendo-color-base-hover, #ebebeb)
Description: The background color of the hovered cells in the Calendar.
kendo-calendar-cell-hover-text$kendo-hover-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-hover-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the hovered cells in the Calendar.
kendo-calendar-cell-hover-border$kendo-hover-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-hover-borderComputed: 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-gradientnullnullDefault: nullComputed: null
Description: The gradient of the hovered cells in the Calendar.
kendo-calendar-cell-selected-bg$kendo-selected-bgvar(--kendo-color-primary, #ff6358)Default: $kendo-selected-bgComputed: var(--kendo-color-primary, #ff6358)
Description: The background color of the selected cells in the Calendar.
kendo-calendar-cell-selected-text$kendo-selected-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-selected-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of the selected cells in the Calendar.
kendo-calendar-cell-selected-border$kendo-selected-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-selected-borderComputed: 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-gradientnullnullDefault: nullComputed: null
Description: The gradient of the selected cells in the Calendar.
kendo-calendar-cell-selected-hover-bg$kendo-selected-hover-bgvar(--kendo-color-primary-hover, #ea5a51)Default: $kendo-selected-hover-bgComputed: 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$kendo-selected-hover-textvar(--kendo-color-on-primary, #ffffff)Default: $kendo-selected-hover-textComputed: var(--kendo-color-on-primary, #ffffff)
Description: The text color of the selected and hovered cells in the Calendar.
kendo-calendar-cell-selected-hover-bordernullnullDefault: nullComputed: null
Description: The border color of the selected and hovered cells in the Calendar.
kendo-calendar-cell-selected-hover-gradientnullnullDefault: nullComputed: null
Description: The gradient of the selected and hovered cells in the Calendar.
kendo-calendar-cell-focus-shadowinset 0 0 0 2px rgba( $kendo-color-black, .08 )(inset 0 0 0 2px rgba(0, 0, 0, 0.08))Default: inset 0 0 0 2px rgba( $kendo-color-black, .08 )Computed: (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$kendo-calendar-cell-focus-shadow(inset 0 0 0 2px rgba(0, 0, 0, 0.08))Default: $kendo-calendar-cell-focus-shadowComputed: (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-width5em5emDefault: 5emComputed: 5em
Description: The width of the Calendar navigation.
kendo-calendar-navigation-item-height2em2emDefault: 2emComputed: 2em
Description: The height of the items in the Calendar navigation.
kendo-calendar-navigation-bg$kendo-calendar-header-bgvar(--kendo-color-surface, #fafafa)Default: $kendo-calendar-header-bgComputed: var(--kendo-color-surface, #fafafa)
Description: The background color of the Calendar navigation.
kendo-calendar-navigation-text$kendo-calendar-header-textvar(--kendo-color-on-app-surface, #3d3d3d)Default: $kendo-calendar-header-textComputed: var(--kendo-color-on-app-surface, #3d3d3d)
Description: The text color of the Calendar navigation.
kendo-calendar-navigation-border$kendo-calendar-header-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))Default: $kendo-calendar-header-borderComputed: var(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description: The border color of the Calendar navigation.
kendo-calendar-navigation-hover-text$kendo-link-hover-textvar(--kendo-color-primary-hover, #ea5a51)Default: $kendo-link-hover-textComputed: var(--kendo-color-primary-hover, #ea5a51)
Description: The text color of the hovered items in the Calendar navigation.
kendo-infinite-calendar-header-padding-xk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the header in the Infinite Calendar.
kendo-infinite-calendar-header-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the header in the Infinite Calendar.
kendo-infinite-calendar-view-padding-xk-spacing(4)var(--kendo-spacing-4, 1rem)Default: k-spacing(4)Computed: var(--kendo-spacing-4, 1rem)
Description: The horizontal padding of the Calendar view in the Infinite Calendar.
kendo-infinite-calendar-view-padding-yk-spacing(0)var(--kendo-spacing-0, 0px)Default: k-spacing(0)Computed: var(--kendo-spacing-0, 0px)
Description: The vertical padding of the Calendar view in the Infinite Calendar.
kendo-infinite-calendar-view-height( $kendo-calendar-cell-size * 9 )288pxDefault: ( $kendo-calendar-cell-size * 9 )Computed: 288px
Description: The height of the Calendar view in the Infinite Calendar.
kendo-calendar-range-cell-border-radiusk-border-radius(lg)var(--kendo-border-radius-lg, 0.375rem)Default: k-border-radius(lg)Computed: var(--kendo-border-radius-lg, 0.375rem)
Description: The border radius of the range cells in the Multiview Calendar.
kendo-calendar-sm-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the small Calendar.
kendo-calendar-sm-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the small Calendar.
kendo-calendar-sm-cell-size28px28pxDefault: 28pxComputed: 28px
Description: The size of the cells in the small Calendar.
kendo-calendar-sm-cell-padding-xk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem)
Description: The horizontal padding of the cells in the small Calendar.
kendo-calendar-sm-cell-padding-yk-spacing(0.5)var(--kendo-spacing-0\.5, 0.125rem)Default: k-spacing(0.5)Computed: var(--kendo-spacing-0\.5, 0.125rem)
Description: The vertical padding of the cells in the small Calendar.
kendo-calendar-md-font-sizevar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)Default: var( --kendo-font-size, inherit )Computed: var(--kendo-font-size, inherit)
Description: The font size of the medium Calendar.
kendo-calendar-md-line-heightvar( --kendo-line-height, normal )var(--kendo-line-height, normal)Default: var( --kendo-line-height, normal )Computed: var(--kendo-line-height, normal)
Description: The line height of the medium Calendar.
kendo-calendar-md-cell-size32px32pxDefault: 32pxComputed: 32px
Description: The size of the cells in the medium Calendar.
kendo-calendar-md-cell-padding-xk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The horizontal padding of the cells in the medium Calendar.
kendo-calendar-md-cell-padding-yk-spacing(1)var(--kendo-spacing-1, 0.25rem)Default: k-spacing(1)Computed: var(--kendo-spacing-1, 0.25rem)
Description: The vertical padding of the cells in the medium Calendar.
kendo-calendar-lg-font-sizevar( --kendo-font-size-lg, inherit )var(--kendo-font-size-lg, inherit)Default: var( --kendo-font-size-lg, inherit )Computed: var(--kendo-font-size-lg, inherit)
Description: The font size of the large Calendar.
kendo-calendar-lg-line-heightvar( --kendo-line-height-lg, normal )var(--kendo-line-height-lg, normal)Default: var( --kendo-line-height-lg, normal )Computed: var(--kendo-line-height-lg, normal)
Description: The line height of the large Calendar.
kendo-calendar-lg-cell-size40px40pxDefault: 40pxComputed: 40px
Description: The size of the cells in the large Calendar.
kendo-calendar-lg-cell-padding-xk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The horizontal padding of the cells in the large Calendar.
kendo-calendar-lg-cell-padding-yk-spacing(2)var(--kendo-spacing-2, 0.5rem)Default: k-spacing(2)Computed: var(--kendo-spacing-2, 0.5rem)
Description: The vertical padding of the cells in the large Calendar.
kendo-calendar-sizes( 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: 28px, 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: 32px, 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-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem)))Default: ( 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 ) )Computed: (sm: (font-size: var(--kendo-font-size, inherit), line-height: var(--kendo-line-height, normal), cell-size: 28px, 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: 32px, 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-2, 0.5rem), cell-padding-y: var(--kendo-spacing-2, 0.5rem)))
Description: The sizes Map of the Calendar.
Feedback