[NSFW] Some users get calendar displayed incorrectly

If you have a hard time seeing the issue on this screenshot I provided I can point out that the box for Monday 7th is blank and the 7 is put on Tuesday and 8 on Wednesday and so on.

We have had another user reporting this issue now. This time the user used Edge on a pc. But he got it right when checking the same thing on his phone.

Hi Hemligg,

Hope you are well.

We will try to reproduce the issue and will update you accordingly.

Regards

Hi Hemligg,

Can you please shatre the URL of he site with us.

Well we have solved the issue on our site by override the file jquery.eventCalendar.min.js in our child theme to force the the calender to always be generated as a Monday-to-Sunday-calendar.

This was done by replacing the following code:
for (n.startWeekOnMonday && (w = dt.getDay() - 1), 0 > w && (w = 6), C = w; C > 0; C--) { u.push('<li class="eventCalendar-day eventCalendar-empty"></li>'); }

with the following code:
// Adjust to always start on Monday
if (n.startWeekOnMonday) { w = (w === 0) ? 6 : w - 1;
}
for (C = w; C > 0; C--) {
u.push('<li class="eventCalendar-day eventCalendar-empty"></li>');
}

We also increased the default limit of the number of events listed below the calendar from 4 to 30. But that was another issue. ??

The issue of the calendar being generated wrongly in some cases was something we never were able to replicate ourselves but got reports about from users. But as we never need to have the calendar in any other way than Monday to Sunday we could solve the issue without solving the real issue.

But I hope you got some clues from this.

Hi Hemligg,

Thanks for your suggestion. We will look over it.

Regards

Well it seems the fix didn’t work after all. The users that experience the issue reports the issue remain. So I’m trying another fix now. I’ll get back to you if that solves the problem.

Well it turned out it was a css issue and not a javascript issue.

I added the following css code and that seemed to have solved the issue:

/* Ensure that every day has consistent borders */
.sep-page .sep-calendar .eventCalendar-wrap .eventCalendar-slider .eventCalendar-monthWrap .eventCalendar-daysList.eventCalendar-showAsWeek .eventCalendar-day {
    display: inline-block;
    width: calc(100% / 7);  /* Each day takes 1/7th of the row */
    box-sizing: border-box;  /* Ensure padding/border is included in the width */
    border-right: solid 1px #ececec;  /* Add right border to separate days */
    border-bottom: solid 1px #ececec;  /* Add bottom border */
}

/* Ensure that the last day of the week doesn't have a right border */
.sep-page .sep-calendar .eventCalendar-wrap .eventCalendar-slider .eventCalendar-monthWrap .eventCalendar-daysList.eventCalendar-showAsWeek .eventCalendar-day:nth-child(7n) {
    border-right: none;  /* No right border for Sunday */
}

/* Add a top border to the second row to ensure separation */
.sep-page .sep-calendar .eventCalendar-wrap .eventCalendar-slider .eventCalendar-monthWrap .eventCalendar-daysList.eventCalendar-showAsWeek .eventCalendar-day:nth-child(n+8) {
    border-top: solid 1px #ececec;  /* Add top border for the second row */
}

/* Ensure that the first day of the week (Monday) starts with a clean left border */
.sep-page .sep-calendar .eventCalendar-wrap .eventCalendar-slider .eventCalendar-monthWrap .eventCalendar-daysList.eventCalendar-showAsWeek .eventCalendar-day:nth-child(7n+1) {
    border-left: solid 0px #ececec;  /* Remove left border for Monday */
}

.sep-page .sep-calendar .eventCalendar-wrap .eventCalendar-slider .eventCalendar-monthWrap .eventCalendar-daysList.eventCalendar-showAsWeek .eventCalendar-day {
    width: calc(100% / 7);  /* Ensure each day takes 1/7th of the row */
    min-width: 14%;  /* Fallback for older browsers */
    box-sizing: border-box;  /* Include padding/border in the width calculation */
}

/* Ensure the list container does not overflow */
.sep-page .sep-calendar .eventCalendar-wrap .eventCalendar-slider .eventCalendar-monthWrap .eventCalendar-daysList {
    overflow: hidden;
}