I'm using FullCalendar v6.1.17 in an Angular 19 project and implementing a custom Jalali (Persian) monthly view using visibleRange and jalali-moment. The calendar generally works, but in some months, the grid layout breaks unexpectedly: instead of a proper 6-row month view, it turns into a column-based layout, as if the range doesn’t represent a typical calendar month. After debugging, I noticed something very specific: ✅ Works fine when: The start and end of the visible range fall on the same day of the Gregorian month, for example: start: 2025-05-22, end: 2025-06-22 → shows Khordad (Jalali month) correctly start: 2025-03-21, end: 2025-04-21 → shows Farvardin correctly start: 2024-09-22, end: 2024-10-22 → Mehr is also OK works fine ❌ Broken layout when: The day parts of the start and end dates differ, like: start: 2025-04-21, end: 2025-05-22 → Ordibehesht (broken) start: 2024-10-22, end: 2024-11-21 → Aban (broken) broken layout It seems FullCalendar's internal logic assumes a fixed number of weeks (based on Gregorian months) and tries to fit them in the grid, but when the start and end don’t align to the same day of the month, it adds/removes a week, causing layout shift. This causes: Extra rows to appear or disappear The calendar to jump into column mode in dayGrid I tried forcing the end date to keep the layout consistent, but then I lose the last day of the Jalali month visually. Question: Can we force FullCalendar to always use a fixed grid layout in custom month views regardless of start/end? Can we prevent it from switching layout when start/end are misaligned by one day? Is there any known workaround (like CSS, fake events, custom rendering) to enforce consistent month display for calendars like Jalali? I found a similar question from a few years ago here: Problem in some Month of custom view - FullCalendar.io But it didn’t reach a working solution. Any help or workaround would be highly appreciated! What I tried: I used visibleRange to define exact start/end dates for each Jalali month. I verified that the date ranges are valid and cover full months. I tried aligning the start/end dates to the same day of the Gregorian month, which works for some months. I attempted to manually control contentHeight, dayMaxEventRows, or even CSS tweaks — but none of them reliably prevent the column layout issue. What I expected: A consistent 6-row month layout, regardless of how the start and end dates align. Even when the Jalali month doesn't align with the Gregorian grid, I expect it to render like a normal calendar month, not a column. Continue reading...
