Allow Calendar Start on Monday

Feature Requests
1

I am requesting a feature to allow the choice between a Calendar Collection that starts on a Monday and a Calendar Collection that starts on a Sunday.

Essentially a StartsOn property.

2

Using chatgpt, I just quickly created a piece of custom CSS that is able to do this and seems to be working. If you want to try it out I’ll leave the code below and a screenshot of what it looks like with this CSS

EDIT: This should probably only be used for view-only purposes though as trying to edit events via the calendar will still believe the dates are where they originally were placed.

image
image1246×710 18.1 KB


/* Reorder weekday headers */
.rbc-month-header {
  display: flex;
}

.rbc-month-header .rbc-header:nth-child(1) { order: 7; } /* Sun */
.rbc-month-header .rbc-header:nth-child(2) { order: 1; } /* Mon */
.rbc-month-header .rbc-header:nth-child(3) { order: 2; } /* Tue */
.rbc-month-header .rbc-header:nth-child(4) { order: 3; } /* Wed */
.rbc-month-header .rbc-header:nth-child(5) { order: 4; } /* Thu */
.rbc-month-header .rbc-header:nth-child(6) { order: 5; } /* Fri */
.rbc-month-header .rbc-header:nth-child(7) { order: 6; } /* Sat */

/* Reorder every calendar row */
.rbc-row-bg,
.rbc-row-content .rbc-row {
  display: flex;
}

/* Background cells */
.rbc-row-bg .rbc-day-bg:nth-child(1) { order: 7; }
.rbc-row-bg .rbc-day-bg:nth-child(2) { order: 1; }
.rbc-row-bg .rbc-day-bg:nth-child(3) { order: 2; }
.rbc-row-bg .rbc-day-bg:nth-child(4) { order: 3; }
.rbc-row-bg .rbc-day-bg:nth-child(5) { order: 4; }
.rbc-row-bg .rbc-day-bg:nth-child(6) { order: 5; }
.rbc-row-bg .rbc-day-bg:nth-child(7) { order: 6; }

/* Date cells */
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(1) { order: 7; }
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(2) { order: 1; }
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(3) { order: 2; }
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(4) { order: 3; }
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(5) { order: 4; }
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(6) { order: 5; }
.rbc-row-content .rbc-row .rbc-date-cell:nth-child(7) { order: 6; }```
3

Thank you. This does change the view, but the issue is that there are events in the calendar that are then incorrectly mapped to the wrong dates.

You don’t maybe have a solution for that as well?

Would be awesome.

4

Ah I have just realised there are a few issues with this method, it may be something interesting to explore in the future. However, maybe testing with the AI component could be a thought? Of course it would be ideal for Glide to allow a start on monday option but until then I feel like using an AI component may be the most stable.