CalendarCardModded

type: custom:mod-card
style: |
  ha-card {
    border: 1px solid rgba(255, 255, 255, .1);
    background-color: rgba(0, 0, 0, .1); /* Set the entire background color */
    border-radius: 30px;
    z-index: 8;
    }
card:
  type: custom:layout-card
  layout_type: custom:grid-layout
  layout:
    /grid-template-columns: 1fr 1fr
    /grid-gap: 8px
  cards:
    - type: custom:layout-card
      layout_type: custom:grid-layout
      cards:
        - type: custom:week-planner-card
          calendars:
            - entity: calendar.INSERTCALENDARHERE1
              color: rgba(81, 170, 242);
              name: Calendar1
            - entity: calendar.INSERTCALENDARHERE2
              color: rgba(192,119, 219);
              name: Calendar2
          startingDayOffset: 0
          hideWeekend: false
          noCardBackground: true
          compact: false
          weather:
            showCondition: false
            showTemperature: false
            showLowTemperature: false
            useTwiceDaily: false
          locale: en
          showLocation: false
          hidePastEvents: false
          hideDaysWithoutEvents: false
          hideTodayWithoutEvents: false
          combineSimilarEvents: true
          showLegend: false
          title: null
          eventBackground: rgba(0, 0, 0, 0)
          legendToggle: false
          texts:
            fullDay: " "
            noEvents: " "
            today: null
            tomorrow: null
            yesterday: null
          showTitle: true
          days: month
          startingDay: sunday
          showDescription: false
          hold_action: null
          card_mod:
            style:
              .: |
                ha-card {
                  margin-top: -10px;
                  top: 0;
                  font-size: 15px !important;
                  background-color: rgba(0, 0, 0, 0) !important;
                  border-color: rgba(0, 0, 0, 0);
                  --primary-text-color: white !important;

                }
                .event.past {
                  opacity: 0.2;
                }

                .event {
                  transform: translateY(-20px); /* Moves the icons up by 10px */
                   z-index: 2;

                }

                .container .day {
                  width: calc((100% - 6 * var(--days-spacing)) /7) !important;
                  height: 200px;
                  background-color: rgba(255, 255, 255, .06);
                  border-radius: 20px;
                  overflow: auto;
                }
                .container .day .date {
                  display: flex;
                  font-size: 8px !important;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  text-align: center;
                }
                  /* Fixed Day Labels */.container::before {
                  content:  '  Sunday          Monday         Tuesday     Wednesday     Thursday         Friday          Saturday';
                  position: sticky; /* Keeps labels fixed at the top while scrolling */
                  width: 100%;
                  margin-top: -10px;
                  top: 0;           /* Anchors labels to the top of the viewport */
                  z-index: 8;      /* Ensures labels are above other elements */
                  white-space: pre;       /* Preserves spaces exactly as written */
                  isolation: isolate;
                  /text-shadow: 1px 1px 15px black;
                  /color: white;
                  /border-radius: 16px;
                  font-weight: bold;
                  font-size: 27px;
                  padding: 12px;
                  /background-color: rgba(0, 0, 0, .2) !important;
                  backdrop-filter: blur(10px);
                 /box-shadow: 0px 6px 2px -2px rgba(11, 26, 55, 1);;
                }

                .today .date .number {
                  background-color: #ff0000 !important;
                  border-radius: 16px 16px 0px 0px;
                  width: 100%;
                }
                .container .day:nth-child(n+0) .date .text {
                  display: none;
                }
      grid_options:
        columns: full
      layout:
        height: 46vh;
grid_options:
  columns: full
column_span: 3
layout:
  height: 100vh;
visibility:
  - condition: screen
    media_query: "(min-width: 768px)"