Calendar Widget — Custom CSS

Custom CSS in the Calendar Widget

The widget runs inside Shadow DOM, so styles from the host page do not reach it. Use the customCss mount option to inject your own rules after the built-in stylesheet.

window.CalendarWidget.mount('#calendar-widget', {
  calendarId: 'your-calendar-id',
  customCss: `
    .cw-variables-root {
      --primary: #0066cc;
      --border-radius-cards: 16px;
    }
    .cw-event-card__title { font-weight: 600; }
  `,
});

Naming convention

All widget classes use the cw- prefix (Calendar Widget). BEM-style naming is used throughout:

Pattern Example Meaning
Block .cw-event-card Component root
Element .cw-event-card__title Part of a component
Modifier .cw-event-card--type-tile Variant or state
Utility .cw-reset, .cw-is-featured Shared helpers or flags

Start with CSS custom properties on .cw-variables-root. They cascade through buttons, inputs, cards, and popovers and survive internal refactors better than targeting many individual selectors.

Override specific selectors when you need layout or one-off visual changes.

CSS custom properties

Set these on .cw-variables-root unless noted otherwise.

Brand & semantic colors

Variable Purpose
--primary Main brand color (buttons, accents, date badges, links)
--primary-rgb-code Comma-separated RGB values for rgba() tints (e.g. 7, 17, 105)
--primary-hover Primary color on hover
--primary-active Primary color on active/pressed state
--primary-text-inside Text color on primary-colored backgrounds
--primary-focus-ring Focus outline ring around interactive controls
--secondary Secondary surface / chip background
--secondary-text-inside Text on secondary backgrounds
--danger Error and destructive actions
--danger-hover, --danger-active Danger button hover/active
--danger-text-inside Text on danger backgrounds
--surface Main content background
--surface-secondary Subtle page/section background
--surface-popover Dropdown and popover background

Text & borders

Variable Purpose
--color-text Default body text
--color-text-secondary Muted text, placeholders
--color-text-danger Inline error text
--color-divider Section and list dividers
--color-stroke Input and control borders
--color-stroke-hover, --color-stroke-active Border colors on hover/focus
--color-stroke-popover Popover border
--color-backdrop Modal/popup overlay
--color-surface Alias for main surface
--color-control-bg Input and textarea background

Typography

Variable Purpose
--ff-main Primary font stack (default: Lato)
--ff-secondary Headings font stack (default: Nunito)
--font-size-text-xs, --font-size-text-s, --font-size-text-m Body text sizes
--font-size-heading-s … --font-size-heading-xxl Heading scale

Layout & shape

Variable Purpose
--height-control-xs … --height-control-l Control heights (inputs, buttons, chips)
--padding-container-x Horizontal page padding
--border-radius Base corner radius
--border-radius-controls Inputs, buttons, chips
--border-radius-cards Event cards and panels
--border-radius-popup Modal dialogs
--border-radius-popover Dropdowns and popovers
--shadow-place-card Card elevation shadow
--shadow-popover Popover/dropdown shadow
--opacity-disabled-field Disabled input opacity

Button theming (per variant)

Each button color variant exposes local variables on .cw-btn. Example for primary:

Variable Purpose
--primary-btn-Color Label color
--primary-btn-Bg Background
--primary-btn-Bg--hover, --primary-btn-Bg--active Hover/active backgrounds
--primary-btn-BorderColor Border
--primary-btn-ShadowColor--focus Focus ring

Similar sets exist for transparent-inverted, semitransparent-inverted, ghost, ghost-inverted, ghost-dark, and ghost-secondary.

Per-instance sizing on .cw-btn:

Variable Purpose
--btnWidth, --btnHeight Button dimensions
--btnPaddingLeft, --btnPaddingRight Horizontal padding
--btnBorderRadius Corner radius
--btnFS, --btnFW, --btnLH Label typography

Root & layout

Selector Purpose
.cw-root Outermost widget wrapper; enables container queries (cw-app)
.cw-root--is-popup Full-screen popup mode (fixed overlay)
.cw-root--app-mode Standalone app layout context
.cw-layout Main content width container
.cw-variables-root Theme variable scope; base font, text color, background
.cw-pointer-events-none Disables pointer events on an element
.cw-sm-hidden Hidden on small screens

Pages

Event list — .cw-page-list

Home view with search, filters, view switcher, and event grid/map/calendar.

Selector Purpose
.cw-page-list Page root; vertical layout and padding
.cw-page-list__head-wrap Header + toolbar stack
.cw-page-list__head Top row: search and actions
.cw-page-list__search-form Search input + submit button
.cw-page-list__head-right Right-side header slot (e.g. submit button)
.cw-page-list__toolbar Filters, view switcher, active filter chips
.cw-page-list__toolbar-filters-wrap Category, region, date filter group
.cw-page-list__toolbar-filter Individual filter control wrapper
.cw-page-list__toolbar-view-switcher-wrap List / map / calendar toggle
.cw-page-list__toolbar-chips-wrap Active filter chips row
.cw-page-list__items Event cards grid
.cw-page-list__empty-wrap Empty state container
.cw-page-list__map-wrap Map view container
.cw-page-list__calendar-wrap Calendar view container
.cw-page-list__pagination Pagination bar

Event details — .cw-page-details

Single-event page with hero, metadata, and related events.

Selector Purpose
.cw-page-details Page root
.cw-page-details__preview-toolbar Preview-mode warning bar (admin)
.cw-page-details__preview-toolbar-title Preview bar label
.cw-page-details__preview-toolbar-btns Preview bar action buttons
.cw-page-details__logo-wrap Calendar logo area
.cw-page-details__logo Logo image
.cw-page-details__intro Hero section (primary-colored background)
.cw-page-details__intro-left Text column: title, tags, actions
.cw-page-details__intro-meta Title, subtitle, tags block
.cw-page-details__intro-toolbar Back/share toolbar
.cw-page-details__intro-toolbar-item Circular icon button in toolbar
.cw-page-details__intro-tags Category/tag row
.cw-page-details__intro-tag Single tag; .cw-is-feature for featured badge
.cw-page-details__intro-past-label "Past event" badge
.cw-page-details__intro-title Event title (Nunito heading)
.cw-page-details__intro-subtitle Event subtitle
.cw-page-details__intro-btns CTA row (register, add to calendar, etc.)
.cw-page-details__intro-media-wrap Hero image container
.cw-page-details__intro-media Hero background image
.cw-page-details__intro-media-cover Bottom blur overlay on hero
.cw-page-details__intro-gallery-trigger "View gallery" button
.cw-page-details__body Content area below hero
.cw-page-details__body-container Centered content column
.cw-page-details__section Content section with top border
.cw-page-details__section-title Section heading
.cw-page-details__tags Tag list in body
.cw-page-details__related-list Related events grid

Submission form — .cw-page-form

Event submission flow (SubmitFormWidget).

Selector Purpose
.cw-page-form Form page background
.cw-page-form__container Centered form column
.cw-page-form__inner White form card
.cw-page-form__inner-head Logo and intro rich text
.cw-page-form__inner-head-logo Form header logo
.cw-page-form__inner-head-rich-text Intro HTML block
.cw-page-form__fetch-form "Fetch event by URL" step
.cw-page-form__fetch-form-title Fetch step heading
.cw-page-form__fetch-form-items URL input + button grid
.cw-page-form__fetch-form-input URL input field
.cw-page-form__fetch-form-btn Fetch submit button
.cw-page-form__main-form-wrap Main multi-step form
.cw-page-form__back-btn Back navigation button

Thank-you page — .cw-page-success

Selector Purpose
.cw-page-success Success page background
.cw-page-success__inner Centered success card
.cw-page-success__icon Checkmark icon circle
.cw-page-success__title Main thank-you heading
.cw-page-success__subtitle Secondary message (e.g. email confirmation)

Blocks

Event card — .cw-event-card

Used in list, grid, map popup, and related events.

Selector Purpose
.cw-event-card Card root
.cw-event-card--type-tile Grid/card layout (vertical)
.cw-event-card--type-list Compact horizontal row layout
.cw-is-featured Featured event; adds primary accent bar
.cw-is-not-featured Non-featured state marker
.cw-event-card__img-wrap Image container
.cw-event-card__img Background image
.cw-event-card__date Date badge overlay
.cw-event-card__date-month Month abbreviation
.cw-event-card__date-day Day number
.cw-event-card__label "Recurring" label
.cw-event-card__past-label "Past" badge
.cw-event-card__body Text content area
.cw-event-card__meta Tags, title, time group
.cw-event-card__tags Tag row
.cw-event-card__tag Category tag; .cw-is-feature for featured
.cw-event-card__tag--has-popover Tag that opens a popover
.cw-event-card__tag-popover Extra tags popover content
.cw-event-card__title Event title link
.cw-event-card__time Start/end time
.cw-event-card__address-wrap Location row
.cw-event-card__address-icon Map pin icon
.cw-event-card__address Place name

Events calendar view — .cw-events-calendar

Month/week calendar with event bars (wraps vue-cal).

Selector Purpose
.cw-events-calendar Calendar view root
.cw-events-calendar__head Navigation header
.cw-events-calendar__head-nav Prev/next buttons group
.cw-events-calendar__head-current-label Current period label
.cw-events-calendar__item Event bar in calendar grid
.cw-events-calendar__item-inner Clickable event bar inner
.cw-events-calendar__item-title Event title in bar
.cw-events-calendar__item-subtitle Secondary line in bar
.cw-events-calendar__item-icon Decorative icon on bar

Third-party calendar classes (inside .cw-events-calendar):

Selector Purpose
.cv-wrapper vue-cal root wrapper
.cv-header-days, .cv-header-day Weekday header row
.cv-weeks, .cv-week, .cv-day Day grid cells
.cv-day.outsideOfMonth Days outside current month
.cv-day.today Today highlight
.cv-day-number Day number label
.cv-item Event slot in day cell

Date picker calendar — .cw-calendar

Inline calendar used in date filters and form fields.

Selector Purpose
.cw-calendar Calendar block root
.cw-calendar__inner Scrollable calendar body
.cw-calendar__popover Popover wrapper
.cw-calendar__header Month/year navigation
.cw-calendar__title, .cw-calendar__title-btn Current month/year label
.cw-calendar__btn Navigation arrow buttons
.cw-calendar__days Days grid table
.cw-calendar__days-head-cell Weekday header cell
.cw-calendar__days-body-cell Day cell
.cw-calendar__days-body-cell-day Day number button
.cw-calendar__months, .cw-calendar__month Month picker
.cw-calendar__years, .cw-calendar__year Year picker
.cw-calendar__timepicker Time selection area

Event details panel — .cw-event-details

Date, time, location, and map on the details page.

Selector Purpose
.cw-event-details Two-column layout root
.cw-event-details__meta Left metadata panel
.cw-event-details__item Single info row (date, time, etc.)
.cw-event-details__item-icon Row icon
.cw-event-details__item-meta Row label and value
.cw-event-details__map-wrap Embedded map column

Other blocks

Selector Purpose
.cw-paginator Pagination control root
.cw-paginator__page, __prev, __next, __first, __last Page and navigation buttons; active page has [data-p-active="true"]
.cw-add-to-calendar "Add to calendar" dropdown
.cw-add-to-calendar__popover-option Calendar provider link; .is-danger for destructive style
.cw-google-map Google Maps container
.cw-map-marker-popup Map marker popup list
.cw-map-marker-popup__list List of cards inside marker popup
.cw-popover Generic popover surface
.cw-accordion Expandable sections on details page
.cw-accordion__item Single accordion section
.cw-accordion__item-head Clickable section header
.cw-accordion__item-body-inner Section content
.cw-upcoming-dates Upcoming occurrence list
.cw-upcoming-dates__item Single date row
.cw-upcoming-dates__item-title Date label; .cw-is-link when clickable
.cw-time-period-picker Date range filter control
.cw-time-period-picker__popover Range picker popover
.cw-rich-text Rendered HTML content (descriptions, form intro)
.cw-gallery-popup Full-screen image gallery modal
.cw-gallery-popup__head, __body, __close-btn Gallery header, swiper, close
.cw-fullscreen-gallery Gallery slider and thumbnails
.cw-fullscreen-gallery__slider-btn.cw-is-prev, .cw-is-next Gallery nav arrows
.cw-file-picker Image upload dropzone
.cw-file-picker__inner Drop area; .cw-dragover, .cw-disabled, .cw-loading states
.cw-file-picker__item, __item-img, __item-btn Uploaded image preview
.cw-repeat-form Recurrence rule builder
.cw-repeat-form__section Recurrence section card
.cw-repeat-form__checkbox Segmented option; .cw-is-active when selected
.cw-calendar-loader Loading state while calendar settings fetch
.cw-calendar-error Error state when settings fail to load

UI kit

Buttons — .cw-btn

Selector / modifier Purpose
.cw-btn Button root
.cw-btn--size-xs, --size-s, --size-m, --size-l Size variants
.cw-btn--color-primary Filled primary button
.cw-btn--color-ghost Text/ghost on light background
.cw-btn--color-ghost-inverted Ghost on dark/hero background
.cw-btn--color-ghost-dark Ghost with dark text
.cw-btn--color-ghost-secondary Muted ghost
.cw-btn--color-transparent-inverted Outlined on dark background
.cw-btn--color-semitransparent Tinted primary background
.cw-btn--color-semitransparent-dark Dark semi-transparent
.cw-btn--icon-only Square icon button
.cw-btn--full-width 100% width
.cw-btn--round Circular button
.cw-btn--disabled, .cw-btn--loading Disabled and loading states
.cw-btn__text Label
.cw-btn__prepend-icon, __append-icon, __single-icon Icon slots
.cw-btn__loader Inline spinner

Form controls

Selector Purpose
.cw-ui-input Text input
.cw-ui-textarea Multiline input
.cw-ui-select Select/dropdown trigger; .cw-is-disabled, .cw-ui-select--menu-visible
.cw-ui-select__label Selected value; --placeholder modifier for empty state
.cw-ui-select__arrow Chevron; --flipped when menu open
.cw-ui-select-menu Dropdown panel (teleported)
.cw-ui-select-menu__option Menu item; [data-p-selected="true"], [data-p-focused="true"]
.cw-ui-select-menu__filter-wrap Search filter inside menu
.cw-ui-autocomplete Autocomplete wrapper
.cw-ui-date-picker Date picker field; --has-value, --no-value
.cw-ui-date-picker__custom-trigger Visible date input
.cw-ui-date-picker__clear-btn Clear selection button
.cw-ui-icon-field Input with icon slot; --width-full
.cw-ui-icon-field__prepend, __append Icon positions
.cw-ui-checkbox Checkbox control
.cw-ui-checkbox-field Checkbox with label
.cw-ui-editor Rich text editor (Quill); .is-disabled
.cw-ui-editor__toolbar, __content Editor toolbar and editing area

Form layout

Selector Purpose
.cw-ui-form Form wrapper
.cw-ui-form__title, __subtitle Form heading
.cw-ui-form__btns Submit/action button row
.cw-ui-form__btns--direction-column, --direction-row Button layout
.cw-ui-form-section Grouped fields; --divided adds separator
.cw-ui-form-section__title, __subtitle Section heading
.cw-ui-form-section__items Fields grid
.cw-ui-form-item Single field row
.cw-ui-form-field Label + control + errors; --size-m, --size-l
.cw-ui-form-field__label Field label; .is-required adds asterisk
.cw-ui-form-field__control--error Error state wrapper
.cw-ui-form-field__msg Validation error message

Tags, chips & feedback

Selector Purpose
.cw-ui-tag Static tag/badge; --size-xs, --size-m, --rounded, --color-secondary
.cw-ui-chip Removable filter chip; --size-xs/s/m, --color-primary
.cw-ui-chip__delete-btn Chip remove button
.cw-ui-counter Numeric badge; --size-xs, --color-primary
.cw-ui-empty Empty state block
.cw-ui-empty__icon-wrap, __title, __subtitle Empty state content
.cw-ui-empty--direction-column, --direction-row Layout variants
.cw-ui-msg-box Inline alert banner
.cw-ui-msg-box--color-primary, --color-danger, --color-secondary Alert variants
.cw-ui-loader Spinner or skeleton; --type-spinner, --type-skeleton

Overlays

Selector Purpose
.cw-ui-popup Modal dialog
.cw-ui-popup__backdrop Dimmed overlay
.cw-ui-popup__head, __body, __footer Modal sections
.cw-ui-popup__head-title, __head-subtitle Modal title area
.cw-ui-popup__close-btn Close button

Shared state classes

Class Purpose
.cw-is-featured Featured event styling
.cw-is-feature Featured tag/badge
.cw-is-disabled Disabled interactive element
.cw-is-active Selected/active toggle (e.g. recurrence options)
.cw-is-link Clickable text link styling
.cw-is-prev, .cw-is-next Gallery navigation direction
.is-highlighted Pressed/active button state
.is-opened Open popover trigger state
.is-required Required field label marker
.is-danger Destructive menu item
.is-disabled Disabled editor state

Examples

Rebrand with CSS variables

.cw-variables-root {
  --primary: #e11d48;
  --primary-rgb-code: 225, 29, 72;
  --primary-hover: #be123c;
  --primary-active: #9f1239;
  --border-radius-cards: 12px;
  --border-radius-controls: 8px;
  --ff-secondary: "Georgia", serif;
}

Customize event cards

.cw-event-card--type-tile {
  box-shadow: none;
  border: 1px solid var(--color-divider);
}
.cw-event-card--type-tile .cw-event-card__body {
  padding: 20px;
}
.cw-event-card__title {
  font-family: var(--ff-secondary);
}

Style filter chips and pagination

.cw-ui-chip--color-primary {
  --chip-main-color: #333;
  border-color: #333;
  color: #333;
}
.cw-paginator__page[data-p-active="true"] {
  background-color: #333;
}

Hide elements

.cw-page-list__toolbar-view-switcher-wrap {
  display: none;
}
.cw-event-card__past-label {
  display: none;
}

Notes

  • Specificity: customCss is injected after the default stylesheet, so equal-specificity rules win without !important.
  • Primary color from API: The widget loads the calendar primary color from the API and applies it via inline styles on .cw-variables-root. Your customCss can override those variables.
  • Fonts: Google Fonts (Lato, Nunito) are loaded into the host page <head> automatically. Override --ff-main / --ff-secondary to use different families (ensure the fonts are available).
  • Stability: Class names are part of the public customization surface, but new modifiers or elements may be added in future releases. Prefer CSS variables for colors, spacing, and radii when possible.
  • Source: Styles live in src/styles/; this document reflects the current class structure in that directory.