Begin first day of the month with month abbreviation.

[bluk10]

I would like the first day of the month to replace "1" with the month abbreviation ex. Sep. Please see image below. Thank you for your work on this amazing card.

[FamousWolf]

I think this is a bit too niche to add an option for it, but it's already possible with card_mod by adding the following configuration:

dayFormat: '''<span data-date="''d''"><span class="number">''d''</span><span class="month">''MMM''</span></span>'''
card_mod:
  style: |
    .container .day .date span .month {
      display: none;
      font-size: var(--day-date-number-font-size);
      line-height: var(--day-date-number-line-height);
    }
    .container .day .date span[data-date="1"] .number {
      display: none;
    }
    .container .day .date span[data-date="1"] .month {
      display: inline;
    }

The dayFormat option replaces the default date number with <span data="[current date number]"><span class="number">[current date number</span><span class="month">[current month]</span></span>. CSS then hides the month span by default and shows it if the current date number is 1.

[bluk10]

Agree, very niche. Am very thankful you took the time to share the CSS. It works excellent. Thank you

[bluk10]

@FamousWolf Quick clarification- I previously had the day of the week across the top, wonder if you might know how to bring that back? before:

after:

YAML for reference:

type: custom:week-planner-card
calendars:
  - entity: calendar.name
    color: rgb(129, 216, 208)
  - entity: calendar.garbage
    color: hsl(80,60%,35%)
days: month
startingDay: sunday
dayFormat: >-
  '<span data-date="'d'"><span class="number">'d'</span><span
  class="month">'MMM'</span></span>'
texts:
  noEvents: ' '
  sunday: S
  monday: M
  tuesday: T
  wednesday: W
  thursday: Th
  friday: F
  saturday: S
  today: null
  tomorrow: null
  yesterday: null
card_mod:
  style:
    .: |
      .container .day .date span .month {
        display: none;
        font-size: var(--day-date-number-font-size);
        line-height: var(--day-date-number-line-height);
      }
      .container .day .date span[data-date="1"] .number {
        display: none;
      }
      .container .day .date span[data-date="1"] .month {
        display: inline;
        background-color: #ff0000 !important;
        border-radius: 50%;
      }
      .container .day .events .event .time {
        font-weight: 700;
      }
      .container { 
        row-gap: 0px !important;
        column-gap: 5px !important;
      }
      ha-card {
        border-radius: 0px;
        margin-top: 0px;
        font-size: 10px !important;
        overflow: hidden;
        --days-spacing: 10px;
        --event-padding: 2px !important;
        --events-margin-top: 1px;
        --event-border-width: 2px;
        background-color: black;
      }
      .event.past {
        opacity: 0.3;
      }
      .none {
        background-color: transparent !important;
      }
      .container .day {
        width: calc((100% - 6 * var(--days-spacing)) / 7) !important;
        margin: 0px !important
      }
      .container .day .date {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .container .day .date .number {
        order: 2;
        height: 40px;
        width: 40px;
        padding: 8px;
        margin-top: 5px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-weight: 100;
        font-family: "Roboto", sans-serif;
      }
      .container .day .date .text {
        order: 1;
        font-weight: 300;
        font-family: "Roboto", sans-serif;
        font-size: 35px !important;
        margin-bottom: 8px;
        transform: scale(1, 1.2);
      }
      .today .date .number {
        background-color: #ff0000 !important;
        border-radius: 50%;
      }
      .container .day:nth-child(n+8) .date .text {
        display: none;
      }
      .container .day .events .event[data-entity="calendar.name"] {
        color: black;
        --secondary-text-color: black;
        background-color: hsla(174,53%,68%,0.75) !important;
      }
      .container .day .events .event[data-entity="calendar.garbage"] {
        color: black;
        --secondary-text-color: black;
        background-color: hsl(80,60%,35%,0.65) !important;
      }

[bluk10]

Resolved it with:

dayFormat: >-
  '<span class="text">'ccc'</span><span data-date="'d'"><span
  class="number">'d'</span><span class="month">'MMM'</span></span>'

Cheers!