I am currently working on developing a calendar feature using Angular. Part of this project involves implementing drag and drop functionality to allow users to move appointments from one day to another.
However, I have encountered a strange issue. When attempting to move an appointment from April 1st to March 31st, the date gets changed to March 1st instead.
After dropping the appointment, I trigger a change event with the updated schedule data and new day:
drop(evt) {
let schedule: Schedule;
schedule = evt.data.schedule;
// Emit change
this.scheduleChange.emit({schedule, day: this.day});
}
Subsequently, I handle the appointment update in the following function:
scheduleChanged(evt) {
const schedule = this.createScheduleFromObject(evt.schedule);
const day = evt.day;
console.log(day);
if (this.isSameDate(schedule.start, schedule.end)) {
schedule.start.setDate(day.getDate());
schedule.start.setMonth(day.getMonth())
schedule.start.setFullYear(day.getFullYear());
schedule.end.setDate(day.getDate());
schedule.end.setMonth(day.getMonth());
schedule.end.setFullYear(day.getFullYear());
console.log(schedule);
}
}
It appears that the issue lies in the object transformation to a Schedule class within the following function:
createScheduleFromObject(obj: any) {
const schedule: Schedule = Object.assign(new Schedule(null, '', '', '', new Date(), new Date()), obj);
console.log(obj.start);
schedule.start = new Date(obj.start);
schedule.end = new Date(obj.end);
console.log(schedule.start);
return schedule;
}
The output of the console log confirms that the correct date is being returned by this function:
2020-04-01T21:31:49.640Z
Wed Apr 01 2020 23:31:49 GMT+0200
However, when modifying it in the scheduleChanged function, even with the correct date in the console log as March 31st:
Tue Mar 31 2020 00:00:00 GMT+0200
The start date of my schedule ends up being set to:
Sun Mar 01 2020 23:33:19 GMT+0100
This discrepancy raises the question - why is this happening?