Feature Request: Ability to display entire month and choose Starting Day

[lanceblaise]

I want the calendar to start on Sunday, like a typical wall calendar does in the US. Currently I can only set it so the month starts on the starting day. So for the month of November, November 1st is on a Saturday and the calendar for this month goes Saturday - Sunday each week, instead of Sunday - Saturday like a normal wall calendar in the USA would. Look at the attached image. I want the calendar to be shifted so it starts on a Sunday, not Saturday. Saturday, Nov 1st should be put all the way to the right on the first row by itself, and Nov 2nd should be first on the next row so it starts with a Sunday. Then show all 30 days of the month.

MY current settings are:
days: 31
startingDay: month

If I were to set the startingDay to : sunday, then I wouldn't be able to get the entire month. I have tried may different ways to program it but none seem to give the results I am after.

[shaunadam]

Came here to open this issue, found it already opened. Plus 1, would like the same.

[moshulu]

+1, this would be a very useful feature to have

[brions]

You can already do this by setting startingDay: sunday on the card.

If you wish to get the whole month starting on Sunday, you'll need to also set the startingDayOffset to a negative value from the current day. This is a little tricky because to make sure it stays on Sunday, you have to only subtract weeks at a time (factors of 7).

So you can create a variable that does the calculation using JavaScript and then use that value as the startingDayOffset. For example something like:

variables:
  offset: |
    (() => {
      const today = new Date();
      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
      const firstSundayOffset = ((7 - firstDayOfMonth.getDay()) % 7);
      return firstSundayOffset;
    })()
card:
  startingDay: sunday
  startingDayOffset: ${ offset }

[Wiggy93]

This works great for the current month, so do you know how the navigation works under the hood, so when clicking through for future months, it also does the full month but offset to a given day (Monday for me)

[brions]

@Wiggy93 I don't know all the details under the hood except that the approach above doesn't quite work with navigation. I noticed this when I went back from January (starting on Sunday) to December but the navigation shows November. Going back one more month also shows November. Then I realized that the month of the first cell is what determines the header and the first cell of the month view of December (using the above approach) is Nov. 30th. 🥴

While I cut it off, in the image above it said December for the January view because Sunday the 28th of December 2025 was the first cell of the January 2026 month view. Also, the approach above doesn't account for the 4 extra days from December being shown and will be missing the last 4 days of January (because it only shows 31 days starting on Dec. 28th

[brions]

I also realized that my method above miscalculates if you want it to start on a Sunday (as I was doing). To calculate the first calendar Sunday of the month (Dec. 28th in this example), the offset code needs to be:

(() => {
  const today = new Date();
  const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);
  const dayOfWeekOfFirstDay = firstDayOfMonth.getDay();
  const firstCalendarSundayDate = new Date(firstDayOfMonth.getFullYear(), firstDayOfMonth.getMonth(), 1 - dayOfWeekOfFirstDay);
  const oneDayInMillis = 1000 * 60 * 60 * 24;
  const offsetInDaysToFirstDay = Math.floor((firstCalendarSundayDate - today) / oneDayInMillis);
  const extraDays = (today.getDate() - today.getDay()) % 7;
  return offsetInDaysToFirstDay + extraDays;
})()

This won't fix the fact that it'll say 'December' for January and cut off the last 4 days, but it will line up with Sunday.

I wonder if we can somehow change the month selected from the first cell of the calendar for navigation to be the month of the current day of the year (or an offset from it as you navigate forward and backward) so even if the first displayed date is Dec. 28th, 2025, the fact that today is Jan 6, 2026 means the navigation would show January and moving forward would move whatever amount forward from today?

E.g.
month view +1 month (-> once) = 6 Feb
2 week view + 2 weeks (-> once) = 20 Jan
1 week view + 1 week (-> once) = 11 Jan
2 week view - 2 weeks (<- once) = 28 Dec
etc.

[TheBullRing]

I have the same request.

showNavigation: true
days: "month"
startingDay: "monday"
hidePastEvents: false

The library should show the full current month only and leave blank for days not in current month, but the grid aligns with the week position.

If interested in previous or next month you can use pagination.

It should align with the value selected for startDay wich is Sunday for US but Monday for EU

The Javascript shown here works fine, the startingDayOffset has the desired effect however it leaves a horrible view, example for today:

[brions]

@TheBullRing it also messes with navigation; both the next/previous month views and the displayed "month" since that display is based on the first cell and not the current day's month (sadly).

[TheBullRing]

Yes and that's why this should be handled as a Feature Request , because existing code does not provide desired results which should look like:

[brions]

This is my idea of what I'd like to be able to do via config:

[pboushy]

The line that puts the month in the header is

week-planner-card/src/card.js

Line 368 in 43eae41

<div class="month">${this._startDate.toFormat('MMMM')}</div>

I think there might be a way to tweak this using card_mod but I haven't gotten to that point yet.

I did spend a bunch of time last night using AI (Google Gemini) to refactor how days work in the config-template-card, and wound up with this that I think makes maintaining the startingDay, offset, and number of days easier:

type: custom:config-template-card
entities:
  - ...
variables:
  DAYS_CALCULATOR: |
    (() => {
      // VARIABLES
      const weekStartMode = "sunday"; // Put the day you generally want to be the start of your calendar.
      const calendarViewsForOffset = ['bimonth', 'month']; // The calendar views you want offsets calculated for. I don't recommend changing this.
      const calendarViewsForStartingDay = ['bimonth', 'month','biweek', 'week']; // The calendar views you want to always start from 'weekStartMode'
      
      // CONFIGURATION
      const calendarViewState = states['input_select.calendar_view']?.state;
      const view = calendarViewState.toLowerCase();
      const width = window.innerWidth;
      
      const daysMap = { 'sunday': 0, 'monday': 1, 'tuesday': 2, 'wednesday': 3, 'thursday': 4, 'friday': 5, 'saturday': 6 };
      const targetIndex = daysMap[weekStartMode.toLowerCase()];

      const today = new Date();
      today.setHours(0, 0, 0, 0);

      // The day the grid will start on
      let startingDay = "today";
      if (calendarViewsForStartingDay.includes(view)) {
        startingDay = weekStartMode;
      }

      // Determine the days to show in the grid,
      // And the offset from startingDay to make sure we start on or before the first of the month.
      let days = 7; 
      let offset = 0;

      if (view === 'today') days = 1;
      else if (view === 'tomorrow') days = 2;
      else if (view === 'week') days = 7;
      else if (view === 'biweek') days = 14;
      else if (calendarViewsForOffset.includes(view)) {
        const year = today.getFullYear();
        const month = today.getMonth();
        
        // Month Math
        const firstOfMonth = new Date(year, month, 1);
        const daysInThisMonth = new Date(year, month + 1, 0).getDate();

        let totalDaysToAccountFor = daysInThisMonth;
        
        // ADJUSTMENT: If Bimonth, add the days of the next month
        if (view === 'bimonth') {
          const daysInNextMonth = new Date(year, month + 2, 0).getDate();
          totalDaysToAccountFor += daysInNextMonth;
        }
        
        // Find how many days the 1st is from our start of the week
        const dayOffset = (firstOfMonth.getDay() - targetIndex + 7) % 7;
        
        // Final Grid size in full weeks. Guarantees that we always have a full rectangular calendar.
        days = Math.ceil((totalDaysToAccountFor + dayOffset) / 7) * 7;
        
        // Get the start date of the grid based on the offset.
        const gridStart = new Date(year, month, 1 - dayOffset);
        gridStart.setHours(0, 0, 0, 0);
        
        const oneDay = 1000 * 60 * 60 * 24;
        const offsetFromToday = Math.round((gridStart - today) / oneDay);
        
        // 4. DYNAMIC ANCHORING
        // If the card is anchored to 'today', the offset is just the distance from today.
        // If the card is anchored to a specific day (like 'monday'), we must subtract 
        // the distance between today and that day to align the "weeks".
        if (startingDay !== "today") {
          const distanceToCardStart = (today.getDay() - targetIndex + 7) % 7;
          offset = offsetFromToday + distanceToCardStart;
        } else {
          offset = offsetFromToday;
        }
      }

      return {
        days: days,
        offset: offset,
        startingDay: startingDay
      };
    })()
card:
  type: custom:week-planner-card
  calendars:
    - ...
  combineSimilarEvents: true
  compact: false
  days: ${ DAYS_CALCULATOR.days }
  hideDaysWithoutEvents: false
  hidePastEvents: false
  hideTodayWithoutEvents: false
  hideWeekend: false
  legendToggle: false
  locale: en
  noCardBackground: false
  showLegend: false
  showLocation: false
  showNavigation: true
  startingDayOffset: ${ DAYS_CALCULATOR.offset }
  startingDay: ${ DAYS_CALCULATOR.startingDay }
  weather:
    showCondition: true
    showTemperature: true
    showLowTemperature: true
    useTwiceDaily: false
    entity: weather.pirateweather
  card_mod:
    style: |
      :host {   // this will hide the content that doesn't fit into the view
        overflow: hidden
      }
      ha-card {
        //background: rgba(255, 255, 255, 0.6) !important;
        //border-radius: 24px;
        //box-shadow: none;
        /* START Make calendar show regardless of window size */
        /* See https://github.com/mohesles/my-skylight-calendar/issues/4#issuecomment-3618687842 */
        //max-height: 700px !important;        // <--- this should be the desired height of your calendar area
        //min-height: 700px !important;        // <--- make sure this matches if you don't want the area to grow/shrink
        //overflow-y: scroll !important;       // <--- allow the cards that don't fit to exist below the bottom/top
        //scrollbar-width: none !important;    // this only applies to Firefox to hide the scrollbar
        //display: block !important;
        //.hide-scrollbar::-webkit-scrollbar { display: none; }    // this applies to Chrome and Webkit browser to hide the scrollbar
        /* END Make calendar show regardless of window size */
        .day.past { background-color: rgba(240, 240, 240, 1.0) !important; } /* 229 is grey buttons, 250 is page background */
        /*.event.past { opacity: .2; background-color: gray !important; }*/
        .event.past { opacity: .5; }
        .time { color: #333333 !important; font-size: 0.8em !important; }
        .event { color: #333333 !important; line-height: 16px !important; background-color: var(--border-color) !important; border-radius: 10px !important; max-height: 100px !important; overflow: hidden !important; font-size: 1.1em !important; }
        .none { background-color: transparent !important; }
        .today .number { border-radius: 5px; background-color: orange !important; padding-left: 4px; padding-right: 4px; }
        .day .date .text { font-size: 1em !important; font-weight: bold !important; }
        .day .date .number { font-weight: bold !important; font-size: 3em !important; }
        .day { border: solid 1px whitesmoke; padding: 0.2%; width: 13% !important; }
      }    
grid_options:
  columns: 120
  rows: 1
  showDescription: false

I agree that this really should be done more within the week-planner-card code, and it appears that krvmk already did that in #316
Has anyone considered forking and merging some of the pending PRs into their repo?

p.s. my tweak doesn't solve the month at the top or navigation yet. I'm planning on spending time on that tonight, but I figured if I share this now maybe someone else will find a solution.

[brions]

That looks great! I'm not very strong at JS so I didn't realize you could return a dictionary like that.

I did look into the code a bit around the month and its use of _startDate which is assigned by the getStartDate() function that starts with the current day, but then changes the startDate based on navigation and/or the startingDay if it's specified.

The challenge here is that _startDate is literally changed with each navigation and navigation is relative to the _startDate. So you can't just change the month display div to show DateTime.now().toFormat('MMMM') because it wouldn't change as you navigate forward and backward across months.

It's also unclear on what it means to navigate "a month" if the display is adjusted to show the weekdays consistently even if there is an overlap of days from one month's display to the next. For example, the end of December's month view would include the beginning of January, and the January month's view would include the end of December. Right now the navigate is based on the current value of _startDate but as mentioned that value changes from initially being now() to (perhaps) now().startOf('day') or .startOf('month') and 30 or 31 (or 28) days from now() is not necessarily the same place as 30 or 31 (or 28) days from now().startOf('month').

If the first of the month were tracked separately and navigation was based on its own variable instead of the _startDate, then navigation could behave according to how far you're navigating. Navigating 1 week? Perhaps it's based on the selected startingDay of the current week (and navigation is therefore an offset of the starting day of the week containing now()). Navigating 2 weeks? same thing - based on start of the week as configured. Navigating 1 month? Now navigation needs to change to be based on the 1st day of the month of now() and multiple offsets of that point. That way regardless of what day the 1st falls on, you will always be in the correct month by navigating forward or back 1 month's worth of days and the display of any previous or subsequent month would be merely aesthetic instead of critical to further accurate navigation.

I'm still fighting with my "algorithm" because it works in some cases, but not all and I suspect your far more elaborate code is also more accurate, but clearly demonstrates how challenging it is to navigate correctly based on some offset from now() and accounting for "overlapping" days between month views. 🥴

[pboushy]

That looks great! I'm not very strong at JS so I didn't realize you could return a dictionary like that.

I didn't realize it was possible in the config-template-card, but Gemini recommended it after I spent a bunch of time building three separate vars with a lot of duplicate code.

I did look into the code a bit around the month and its use of _startDate which is assigned by the getStartDate() function that starts with the current day, but then changes the startDate based on navigation and/or the startingDay if it's specified.

The challenge here is that _startDate is literally changed with each navigation and navigation is relative to the _startDate. So you can't just change the month display div to show DateTime.now().toFormat('MMMM') because it wouldn't change as you navigate forward and backward across months.

I think with the card_mod solution, the problem is January has to be 5 weeks, and February only needs 4, but navigating doesn't trigger the days variable to recalculate. (I was gonna look into that next to see if I can change that)

Unfortunately, I do suspect this will all require a bunch of code and a dedicated change. I'm curious if krvmk's already fixes it, but haven't played with it yet. (Not sure I want to in my production HA)

It's also unclear on what it means to navigate "a month" if the display is adjusted to show the weekdays consistently even if there is an overlap of days from one month's display to the next. For example, the end of December's month view would include the beginning of January, and the January month's view would include the end of December. Right now the navigate is based on the current value of _startDate but as mentioned that value changes from initially being now() to (perhaps) now().startOf('day') or .startOf('month') and 30 or 31 (or 28) days from now() is not necessarily the same place as 30 or 31 (or 28) days from now().startOf('month').

If the first of the month were tracked separately and navigation was based on its own variable instead of the _startDate, then navigation could behave according to how far you're navigating. Navigating 1 week? Perhaps it's based on the selected startingDay of the current week (and navigation is therefore an offset of the starting day of the week containing now()). Navigating 2 weeks? same thing - based on start of the week as configured. Navigating 1 month? Now navigation needs to change to be based on the 1st day of the month of now() and multiple offsets of that point. That way regardless of what day the 1st falls on, you will always be in the correct month by navigating forward or back 1 month's worth of days and the display of any previous or subsequent month would be merely aesthetic instead of critical to further accurate navigation.

I'm still fighting with my "algorithm" because it works in some cases, but not all and I suspect your far more elaborate code is also more accurate, but clearly demonstrates how challenging it is to navigate correctly based on some offset from now() and accounting for "overlapping" days between month views. 🥴

Unfortunately, I highly doubt we'll be able to do this part without modifying the card source code itself, but I haven't given up on Gemini solving it yet. 😆

[brions]

The more I tinker with HA and packages and custom cards and such, the more I wish I had a simple way to deploy HA in a separate instance that still has access to all my "production" devices so I can see how it would really behave without changing the interface my family is using. 😅