Show day / date / month on different lines

[marksie1988]

If you want to show the left hand day / date / month on separate lines, use the below code:

Before:

After:

card_mod:
  style: |
    .event-left{
      display: flex;
      flex-direction: column !important;
      align-items: center;
    }

[vmcosco]

In the event mode screenshot you show the weekday (Wed) and the date (Dec 28) on two lines. Is that possible with card-mod?

[modo1302]

Yes! It was this way in the provious versions (no card-mod necessary). The layout changed 2-3 versions ago and it drives me nuts. I've been trying to achieve this layout with css for over a week now, with no luck. Can we somehow revert to the old layout? The weekday on one line + day&month on the next line was looking soooo much better!

[Maximus97]

Hi. I also preferred to have the option to have weekday and date on seperate lines, @marksie1988 is there any plan to add it back without having to use card-mod?

[modo1302]

In the event mode screenshot you show the weekday (Wed) and the date (Dec 28) on two lines. Is that possible with card-mod?

I achieved this with card-mod by setting a bit larger min-width of the event-date-week-day so that it breaks the line and puts the day+month below.

[vmcosco]

this doesn't work for me. It just shifts over the event text rather than creating a new row. Can you show your full card-mod section for your card?

[moryoav]

This works great, however now the column ".event-left" looks very wide. How do I change the width of this left column? I tried "width" and "min-width", it didn't seem to work.

[marksie1988]

try adding !important to the css e.g. width: 10px !important

[RaceFanWNY]

Did anyone ever get this working without manipulating the day min-width? I wanted some extra spacing between events, this is what I currently use but agree that I would much rather have:
Weekday
Month Day

`type: custom:atomic-calendar-revive
enableModeChange: true
entities:

• entity: calendar.home_2
  name: Home
  color: deepskyblue
  maxDaysToShow: 7
  icon: mdi:account

• entity: calendar.work_2
  icon: mdi:chair-rolling
  color: orangered
  name: Work
  maxDaysToShow: 7

• entity: calendar.vacalendar
  name: VA
  color: orangered
  maxDaysToShow: 7
  icon: mdi:chair-rolling
  firstDayOfWeek: 0
  eventDateFormat: ddd MMM D
  showMonth: false
  showProgressBar: false
  showDescription: false
  hoursOnSameLine: false
  dimFinishedEvents: true
  defaultMode: Event
  showLocation: true
  hideFinishedEvents: true
  showCurrentEventLine: false
  showEventIcon: true
  card_mod:
  style: |

  .current-day {
  color: orange !important;
  }
  .single-event-container {
  display: grid;
  grid-template-columns: 0.5fr 2fr;
  gap: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  }
  `