@@ -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}`;
+ },
},
});
diff --git a/src/components/admin/club/calendar/UpdateCalendarModal.vue b/src/components/admin/club/calendar/UpdateCalendarModal.vue
index 4587603..066a088 100644
--- a/src/components/admin/club/calendar/UpdateCalendarModal.vue
+++ b/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;
- $refs.endtime.min = ($event.target as HTMLInputElement).value;
+ calendar!.starttime = new Date(($event.target as HTMLInputElement).value).toISOString();
+ $refs.endtime.min = formatForDateTimeLocalInput(($event.target as HTMLInputElement).value);
}
"
/>
@@ -97,11 +97,11 @@
type="datetime-local"
id="endtime"
required
- :value="calendar.endtime.replace('Z', '')"
- :min="calendar.starttime.replace('Z', '')"
+ :value="formatForDateTimeLocalInput(calendar.endtime)"
+ :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;
- $refs.enddate.min = ($event.target as HTMLInputElement).value;
+ calendar!.starttime = new Date(($event.target as HTMLInputElement).value).toISOString();
+ $refs.enddate.min = formatForDateInput(($event.target as HTMLInputElement).value);
}
"
/>
@@ -130,11 +130,11 @@
type="date"
id="enddate"
required
- :min="calendar.starttime.split('T')[0]"
- :value="calendar.endtime.split('T')[0]"
+ :min="formatForDateInput(calendar.starttime)"
+ :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))
- : formData.starttime.value,
+ ? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0)).toISOString()
+ : new Date(formData.starttime.value).toISOString(),
endtime: this.calendar.allDay
- ? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999))
- : formData.endtime.value,
+ ? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999)).toISOString()
+ : 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}`;
+ },
},
});
diff --git a/src/stores/admin/calendar.ts b/src/stores/admin/calendar.ts
index b128bf4..1fbeaf4 100644
--- a/src/stores/admin/calendar.ts
+++ b/src/stores/admin/calendar.ts
@@ -39,7 +39,7 @@ export const useCalendarStore = defineStore("calendar", {
this.loading = "failed";
});
},
- fetchCalendarById(id: number): Promise
> {
+ fetchCalendarById(id: string): Promise> {
return http.get(`/admin/calendar/item/${id}`);
},
async createCalendar(calendar: CreateCalendarViewModel): Promise> {
diff --git a/src/viewmodels/admin/calendar.models.ts b/src/viewmodels/admin/calendar.models.ts
index aa0612b..a724305 100644
--- a/src/viewmodels/admin/calendar.models.ts
+++ b/src/viewmodels/admin/calendar.models.ts
@@ -14,8 +14,8 @@ export interface CalendarViewModel {
}
export interface CreateCalendarViewModel {
- starttime: Date;
- endtime: Date;
+ starttime: string;
+ endtime: string;
title: string;
content: string;
location: string;
@@ -25,8 +25,8 @@ export interface CreateCalendarViewModel {
export interface UpdateCalendarViewModel {
id: string;
- starttime: Date;
- endtime: Date;
+ starttime: string;
+ endtime: string;
title: string;
content: string;
location: string;
diff --git a/src/views/admin/club/calendar/Calendar.vue b/src/views/admin/club/calendar/Calendar.vue
index 213f2ea..470e426 100644
--- a/src/views/admin/club/calendar/Calendar.vue
+++ b/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"))),
{