Compatibility with UIX (previously Card Mod)

Compatibility with UIX (formerly Card Mod)

skylight-calendar-card has been refactored in v3.0.0 to support UIX natively.

If you find something that is not exposed or modifiable in the way you would expect, please open an issue.

Share your customizations:

Installation Instructions

To install UIX, follow the instructions found here: https://uix.lf.technology/quick-start/

---

Example: Customize event display in Week mode

YAML

type: custom:skylight-calendar-card
title: Family Calendar
entities:
  - calendar.test1
  - calendar.test2
default_view: week-compact
combine_calendars: true
combine_style: stripes
uix:
  style: >
    .week-compact-event {
      display: flex !important;
      flex-direction: column !important;
      border-radius: 10px !important;
      /* Preserve --combine-left-offset so bars/dots still have room */
      padding: 6px 6px 8px calc(6px + var(--combine-left-offset, 0px)) !important;
      overflow: visible !important;
      position: relative !important;
      box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25) !important;
      /* NO background-image override — let the card's inline style handle bars/stripes/dots */
    }


    /* White tint as an overlay, so it sits on top of bars/stripes/dots without
    replacing them */

    .week-compact-event::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      border-radius: 10px !important;
      background: rgba(255,255,255,0.6) !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }


    .week-compact-event-title {
      position: relative !important;
      z-index: 1 !important;
      order: 1 !important;
      font-weight: 700 !important;
      font-size: 1em !important;
      text-align: center !important;
      margin-bottom: 6px !important;
      padding: 5px 10px !important;
      background-color: rgba(0,0,0,0.18) !important;
      border-radius: 6px !important;
    }


    .week-compact-event-time {
      position: relative !important;
      z-index: 1 !important;
      order: 2 !important;
      font-weight: 400 !important;
      opacity: 1 !important;
      padding: 0 4px !important;
    }

---

Example: Move event time and title in agenda view onto the same row for maximum vertical space savings

YAML

type: custom:skylight-calendar-card
entities:
  - calendar.test
uix:
  style: |
    /* ── Agenda View: title + time on one row ── */
    .agenda-event {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-items: baseline !important;
      gap: 0 8px !important;
      height: auto !important;      /* override the inline fixed height */
      padding: 8px 64px 8px calc(12px + var(--combine-left-offset, 0px)) !important;
    }

    .agenda-event-title {
      flex: 1 1 auto !important;
      min-height: unset !important;
      font-size: var(--event-bubble-font-size, 16px) !important;
      font-weight: 700 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }

    .agenda-event-time {
      flex: 0 0 auto !important;
      min-height: unset !important;
      margin-bottom: 0 !important;
      font-size: var(--event-time-font-size, 10px) !important;
      font-weight: 600 !important;
      opacity: 0.9 !important;
      white-space: nowrap !important;
    }

    /* Location wraps to its own full-width row below */
    .agenda-event-location {
      flex: 0 0 100% !important;
      min-height: unset !important;
    }

    .agenda-day-date {
      font-size: 16px
    }

    .agenda-day-label {
      margin-bottom: 2px;
      padding-bottom: 2px;
    }

---

Notes

• Behavior may vary by Skylight Calendar Card / Home Assistant / Card Mod version. Any change by any of these may break functionality.
• CSS selectors may break if the card internals change in future releases.
• If something stops working after an update, re-check selectors using Card Mod debug tools. If that doesn't fix it, open an issue.