src/components/admin/club/calendar/CreateCalendarModal.vue

@@ -99,7 +99,14 @@
         </div>
         <div class="w-full">
           <label for="enddate">Enddatum</label>
-          <input ref="enddate" type="date" id="enddate" required :value="data.end" :min="data.start" />
+          <input
+            ref="enddate"
+            type="date"
+            id="enddate"
+            required
+            :value="decrementEndDate(data.end)"
+            :min="data.start"
+          />
         </div>
       </div>
       <div>
@@ -198,6 +205,15 @@ export default defineComponent({
           this.status = { status: "failed" };
         });
     },
+    decrementEndDate(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() - 1).padStart(2, "0");
+
+      return `${year}-${month}-${day}`;
+    },
   },
 });
 </script>

src/components/admin/club/calendar/UpdateCalendarModal.vue

@@ -81,11 +81,11 @@
             type="datetime-local"
             id="starttime"
             required
-            :value="calendar.starttime.replace('Z', '')"
+            :value="formatForDateTimeLocalInput(calendar.starttime)"
             @change="
               ($event) => {
-                calendar!.starttime = ($event.target as HTMLInputElement).value;
+                calendar!.starttime = new Date(($event.target as HTMLInputElement).value).toISOString();
-                $refs.endtime.min = ($event.target as HTMLInputElement).value;
+                $refs.endtime.min = formatForDateTimeLocalInput(($event.target as HTMLInputElement).value);
               }
             "
           />
@@ -97,11 +97,11 @@
             type="datetime-local"
             id="endtime"
             required
-            :value="calendar.endtime.replace('Z', '')"
+            :value="formatForDateTimeLocalInput(calendar.endtime)"
-            :min="calendar.starttime.replace('Z', '')"
+            :min="formatForDateTimeLocalInput(calendar.starttime)"
             @change="
               ($event) => {
-                calendar!.endtime = ($event.target as HTMLInputElement).value;
+                calendar!.endtime = new Date(($event.target as HTMLInputElement).value).toISOString();
               }
             "
           />
@@ -114,11 +114,11 @@
             type="date"
             id="startdate"
             required
-            :value="calendar.starttime.split('T')[0]"
+            :value="formatForDateInput(calendar.starttime)"
             @change="
               ($event) => {
-                calendar!.starttime = ($event.target as HTMLInputElement).value;
+                calendar!.starttime = new Date(($event.target as HTMLInputElement).value).toISOString();
-                $refs.enddate.min = ($event.target as HTMLInputElement).value;
+                $refs.enddate.min = formatForDateInput(($event.target as HTMLInputElement).value);
               }
             "
           />
@@ -130,11 +130,11 @@
             type="date"
             id="enddate"
             required
-            :min="calendar.starttime.split('T')[0]"
+            :min="formatForDateInput(calendar.starttime)"
-            :value="calendar.endtime.split('T')[0]"
+            :value="formatForDateInput(calendar.endtime)"
             @change="
               ($event) => {
-                calendar!.endtime = ($event.target as HTMLInputElement).value;
+                calendar!.endtime = new Date(($event.target as HTMLInputElement).value).toISOString();
               }
             "
           />
@@ -229,7 +229,7 @@ export default defineComponent({
       this.calendar = cloneDeep(this.origin);
     },
     fetchItem() {
-      this.fetchCalendarById(parseInt(this.data ?? ""))
+      this.fetchCalendarById(this.data ?? "")
         .then((result) => {
           this.calendar = result.data;
           this.origin = cloneDeep(result.data);
@@ -246,11 +246,11 @@ export default defineComponent({
         id: this.calendar.id,
         typeId: this.calendar.type.id,
         starttime: this.calendar.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.calendar.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,
         content: formData.content.value,
         location: formData.location.value,
@@ -277,6 +277,26 @@ export default defineComponent({
         this.origin.id
       );
     },
+    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}`;
+    },
   },
 });
 </script>

src/stores/admin/calendar.ts

@@ -39,7 +39,7 @@ export const useCalendarStore = defineStore("calendar", {
           this.loading = "failed";
         });
     },
-    fetchCalendarById(id: number): Promise<AxiosResponse<any, any>> {
+    fetchCalendarById(id: string): Promise<AxiosResponse<any, any>> {
       return http.get(`/admin/calendar/item/${id}`);
     },
     async createCalendar(calendar: CreateCalendarViewModel): Promise<AxiosResponse<any, any>> {

src/viewmodels/admin/calendar.models.ts

@@ -14,8 +14,8 @@ export interface CalendarViewModel {
 }
 
 export interface CreateCalendarViewModel {
-  starttime: Date;
+  starttime: string;
-  endtime: Date;
+  endtime: string;
   title: string;
   content: string;
   location: string;
@@ -25,8 +25,8 @@ export interface CreateCalendarViewModel {
 
 export interface UpdateCalendarViewModel {
   id: string;
-  starttime: Date;
+  starttime: string;
-  endtime: Date;
+  endtime: string;
   title: string;
   content: string;
   location: string;

src/views/admin/club/calendar/Calendar.vue

@@ -35,6 +35,7 @@ export default defineComponent({
     ...mapState(useCalendarStore, ["formattedItems"]),
     calendarOptions() {
       return {
+        timeZone: "local",
         locale: deLocale,
         plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
         initialView: "dayGridMonth",
@@ -67,6 +68,7 @@ export default defineComponent({
     ...mapActions(useModalStore, ["openModal"]),
     ...mapActions(useCalendarStore, ["fetchCalendars"]),
     select(e: any) {
+      console.log(e);
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
         {