Learn how to customize the Vue Calendar component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.
Each panel is a .calendar element carrying its position in data-coreui-calendar-index, counted from 0, and the content of every cell names the view it belongs to: .calendar-cell-inner.day, .month, .quarter or .year. The navigation buttons carry the class of their action: .btn-double-prev, .btn-prev, .btn-month, .btn-year, .btn-next and .btn-double-next. The vanilla, React and Vue calendars carry the same hooks, so a stylesheet written against one fits the others.
CSS variables
The Vue Calendar uses local CSS variables on .calendar for real-time customization. Values for these CSS variables are set via Sass, but they can also be overridden directly in the component for dynamic styling.
$calendar-tokens: defaults(
(
--cui-calendar-table-margin: .5rem,
--cui-calendar-table-cell-size: 2.75rem,
--cui-calendar-nav-padding-y: .5rem,
--cui-calendar-nav-padding-x: .5rem,
--cui-calendar-nav-border-color: var(--cui-border-color),
--cui-calendar-nav-border: var(--cui-border-width) solid var(--cui-calendar-nav-border-color),
--cui-calendar-nav-btn-padding-x: .5rem,
--cui-calendar-nav-btn-padding-y: .25rem,
--cui-calendar-nav-btn-font-size: var(--cui-font-size-sm),
--cui-calendar-nav-btn-bg: transparent,
--cui-calendar-nav-btn-border-width: 1px,
--cui-calendar-nav-btn-border-color: transparent,
--cui-calendar-nav-btn-border-radius: var(--cui-radius-4),
--cui-calendar-nav-btn-hover-bg: transparent,
--cui-calendar-nav-btn-hover-border-color: transparent,
--cui-calendar-nav-btn-focus-border-color: transparent,
--cui-calendar-nav-date-font-weight: 600,
--cui-calendar-nav-date-color: var(--cui-fg-body),
--cui-calendar-nav-date-hover-color: var(--cui-primary-base),
--cui-calendar-nav-icon-width: 1rem,
--cui-calendar-nav-icon-height: 1rem,
--cui-calendar-nav-icon-color: var(--cui-fg-3),
--cui-calendar-nav-icon-hover-color: var(--cui-fg-body),
--cui-calendar-cell-header-inner-font-weight: 600,
--cui-calendar-cell-header-inner-color: var(--cui-fg-3),
--cui-calendar-cell-week-number-font-weight: 600,
--cui-calendar-cell-week-number-color: var(--cui-fg-2),
--cui-calendar-cell-border-radius: var(--cui-radius-4),
--cui-calendar-cell-hover-color: var(--cui-fg-body),
--cui-calendar-cell-hover-bg: var(--cui-bg-2),
--cui-calendar-cell-disabled-color: var(--cui-fg-4),
--cui-calendar-cell-selected-color: var(--cui-primary-contrast),
--cui-calendar-cell-selected-bg: var(--cui-primary-base),
--cui-calendar-cell-selected-hover-color: var(--cui-calendar-cell-selected-color),
--cui-calendar-cell-selected-hover-bg: oklch(from var(--cui-calendar-cell-selected-bg) calc(l * var(--cui-theme-hover-lightness)) calc(c * var(--cui-theme-hover-chroma)) h),
--cui-calendar-cell-selected-adjacent-color: var(--cui-primary-fg-emphasis),
--cui-calendar-cell-selected-adjacent-bg: var(--cui-primary-bg-subtle),
--cui-calendar-cell-selected-adjacent-hover-color: var(--cui-calendar-cell-selected-adjacent-color),
--cui-calendar-cell-selected-adjacent-hover-bg: var(--cui-primary-bg-muted),
--cui-calendar-cell-range-bg: var(--cui-primary-bg-subtle),
--cui-calendar-cell-range-hover-border-color: var(--cui-primary-base),
--cui-calendar-cell-today-color: var(--cui-danger-base),
),
$calendar-tokens
);How to use CSS variables
<template>
<CCalendar :style="vars">...</CCalendar>
</template>
<script setup>
const vars = {
'--cui-calendar-nav-border-color': '#333',
'--cui-calendar-nav-btn-bg': '#f8f9fa',
}
</script>