fix: calendar entry creation time shift

This commit is contained in:
Julian Krauser 2025-02-07 13:07:58 +01:00
parent 1fa0d07bba
commit 4a5aec36dd
2 changed files with 53 additions and 10 deletions

View file

@ -79,11 +79,30 @@
<div v-if="!allDay" class="flex flex-row gap-2"> <div v-if="!allDay" class="flex flex-row gap-2">
<div class="w-full"> <div class="w-full">
<label for="starttime">Startzeit</label> <label for="starttime">Startzeit</label>
<input type="datetime-local" id="starttime" required :value="data.start.split(':00+')[0]" /> <input
type="datetime-local"
id="starttime"
required
:value="formatForDateTimeLocalInput(data.start)"
@change="
($event) => {
($refs.endtime as HTMLInputElement).min = formatForDateTimeLocalInput(
($event.target as HTMLInputElement).value
);
}
"
/>
</div> </div>
<div class="w-full"> <div class="w-full">
<label for="endtime">Endzeit</label> <label for="endtime">Endzeit</label>
<input type="datetime-local" id="endtime" required :value="data.end.split(':00+')[0]" /> <input
ref="endtime"
type="datetime-local"
id="endtime"
required
:value="formatForDateTimeLocalInput(data.end)"
:min="formatForDateTimeLocalInput(data.start)"
/>
</div> </div>
</div> </div>
<div v-else class="flex flex-row gap-2"> <div v-else class="flex flex-row gap-2">
@ -93,8 +112,12 @@
type="date" type="date"
id="startdate" id="startdate"
required required
:value="data.start" :value="formatForDateInput(data.start)"
@change="($event) => (($refs.enddate as HTMLInputElement).max = ($event.target as HTMLInputElement).value)" @change="
($event) => {
($refs.enddate as HTMLInputElement).min = formatForDateInput(($event.target as HTMLInputElement).value);
}
"
/> />
</div> </div>
<div class="w-full"> <div class="w-full">
@ -105,7 +128,7 @@
id="enddate" id="enddate"
required required
:value="decrementEndDate(data.end)" :value="decrementEndDate(data.end)"
:min="data.start" :min="formatForDateInput(data.start)"
/> />
</div> </div>
</div> </div>
@ -180,11 +203,11 @@ export default defineComponent({
let createCalendar: CreateCalendarViewModel = { let createCalendar: CreateCalendarViewModel = {
typeId: this.selectedType.id, typeId: this.selectedType.id,
starttime: this.allDay starttime: this.allDay
? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0)) ? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0)).toISOString()
: formData.starttime.value, : new Date(formData.starttime.value).toISOString(),
endtime: this.allDay endtime: this.allDay
? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999)) ? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999)).toISOString()
: formData.endtime.value, : new Date(formData.endtime.value).toISOString(),
title: formData.title.value, title: formData.title.value,
content: formData.content.value, content: formData.content.value,
location: formData.location.value, location: formData.location.value,
@ -209,6 +232,26 @@ export default defineComponent({
const month = String(localDate.getMonth() + 1).padStart(2, "0"); const month = String(localDate.getMonth() + 1).padStart(2, "0");
const day = String(localDate.getDate() - 1).padStart(2, "0"); const day = String(localDate.getDate() - 1).padStart(2, "0");
return `${year}-${month}-${day}`;
},
formatForDateTimeLocalInput(utcDateString: string) {
const localDate = new Date(utcDateString);
const year = localDate.getFullYear();
const month = String(localDate.getMonth() + 1).padStart(2, "0");
const day = String(localDate.getDate()).padStart(2, "0");
const hours = String(localDate.getHours()).padStart(2, "0");
const minutes = String(localDate.getMinutes()).padStart(2, "0");
return `${year}-${month}-${day}T${hours}:${minutes}`;
},
formatForDateInput(utcDateString: string) {
const localDate = new Date(utcDateString);
const year = localDate.getFullYear();
const month = String(localDate.getMonth() + 1).padStart(2, "0");
const day = String(localDate.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`; return `${year}-${month}-${day}`;
}, },
}, },

View file

@ -78,7 +78,7 @@
<input type="checkbox" id="allDay" v-model="calendar.allDay" /> <input type="checkbox" id="allDay" v-model="calendar.allDay" />
<label for="allDay">ganztägig</label> <label for="allDay">ganztägig</label>
</div> </div>
<div v-if="calendar.allDay == false" class="flex flex-row gap-2"> <div v-if="!calendar.allDay" class="flex flex-row gap-2">
<div class="w-full"> <div class="w-full">
<label for="starttime">Startzeit</label> <label for="starttime">Startzeit</label>
<input <input