The problem
I am building an Open-Source Vue Application. It has a Gantt-Chart to show tasks as a timeline. It has an option for users to set a date range, by default it shows the current and next month.
Every year in september, this chart breaks. Instead of showing all months, it skips the next month:
This is what it should look like instead:
There's been an ongoing issue about this here.
The catch
I can't reproduce this. Even when I use Browserstack to be able to use the exact same browser/OS combination my users are using. It works fine for me on every device and browser I tried it so far. Because I cannot reproduce it, I can't really debug it, let alone fix it.
This also hints it only affects some users and not that many.
The code
This is the code building the years/months/days data structure:
// Layout: years => [months => [days]]
let years = {}
for (
let d = this.startDate;
d <= this.endDate;
d.setDate(d.getDate() + 1)
) {
let date = new Date(d)
if (years[date.getFullYear() + ''] === undefined) {
years[date.getFullYear() + ''] = {}
}
if (
years[date.getFullYear() + ''][date.getMonth() + ''] ===
undefined
) {
years[date.getFullYear() + ''][date.getMonth() + ''] = []
}
years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
this.fullWidth += this.dayWidth
}
this.$set(this, 'days', years) // I know, that variable name doesn't make any sense
Which I am then showing the user like this:
<template v-for="(y, yk) in days">
<div :key="yk + 'year'" class="months">
<div
:key="mk + 'month'"
class="month"
v-for="(m, mk) in days[yk]"
>
{{
new Date(
new Date(yk).setMonth(mk),
).toLocaleString('en-us', {month: 'long'})
}},
{{ new Date(yk).getFullYear() }}
<div class="days">
<div
:class="{ today: d.toDateString() === now.toDateString() }"
:key="dk + 'day'"
:style="{ width: dayWidth + 'px' }"
class="day"
v-for="(d, dk) in days[yk][mk]"
>
<span class="theday" v-if="dayWidth > 25">
{{ d.getDate() }}
</span>
<span class="weekday" v-if="dayWidth > 25">
{{ d.toLocaleString('en-us', {weekday: 'short'}) }}
</span>
</div>
</div>
</div>
</div>
</template>
The full code of the component is here.