I have been working on an app that allows users to input their availability on a monthly basis. Whenever there is a change in the month, the app prompts the user to save any modifications made.
To view the complete file, click here. I will further elaborate on the issue at hand.
One challenge I encountered was with resetting the days array when transitioning between months:
getDays () {
// Clearing the days array for refill
this.days = []
// Month and year values
const month = this.currentDate.month()
const year = this.currentDate.year()
const names = Object.freeze(
['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'])
const date = new Date(year, month, 1)
let fullDate = ''
while (date.getMonth() === month) {
fullDate = date.getDate() + '-' + month + '-' + year
this.days.push({
day: date.getDate(),
name: names[date.getDay()],
fullDate: fullDate
})
date.setDate(date.getDate() + 1)
}
The issue arises as the values do not reset properly when switching months, which can be observed in the screenshots below:
However, introducing a timeout function has proven to be effective in resolving this issue:
getDays () {
// Clearing the days array for refill
this.days = []
// Month and year values
const month = this.currentDate.month()
const year = this.currentDate.year()
const names = Object.freeze(
['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'])
const date = new Date(year, month, 1)
let fullDate = ''
setTimeout(() => {
while (date.getMonth() === month) {
fullDate = date.getDate() + '-' + month + '-' + year
this.days.push({
day: date.getDate(),
name: names[date.getDay()],
fullDate: fullDate
})
date.setDate(date.getDate() + 1)
}
}, 500)
}
By utilizing this approach, the days array now resets accurately upon changing months, as demonstrated in the images below:
November days December days correctly reset.
While this solution works well, I am cautious of potential race conditions in my code and aim to provide a seamless experience for users without delays.
Have any of you faced a similar issue? How did you go about resolving it?