From 9d563f16c4e585a8c670219426fe4102a6200982 Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Mon, 17 Jun 2024 19:07:26 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat/=E3=82=AB=E3=83=AC=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=82=80=E3=83=87?=
 =?UTF-8?q?=E3=83=BC=E3=82=BF=E3=82=92=E9=99=90=E5=AE=9A=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Calendar.vue | 37 +++++++++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/pages/Calendar.vue b/src/pages/Calendar.vue
index 8faf0fda..627f0cc9 100644
--- a/src/pages/Calendar.vue
+++ b/src/pages/Calendar.vue
@@ -1,12 +1,13 @@
 <template>
   <v-col>
+    <v-checkbox v-model="showFinished" label="過去のイベントも表示" class="" />
     <calendar :height="784" :events="events" />
   </v-col>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component } from 'vue-property-decorator'
+import { Component, Watch } from 'vue-property-decorator'
 import Calendar from '@/components/shared/Calendar.vue'
 import api, { ResponseEvent } from '@/api'
 
@@ -18,8 +19,40 @@ import api, { ResponseEvent } from '@/api'
 export default class CalendarPage extends Vue {
   events: ResponseEvent[] = []
 
+  get showFinished(): boolean {
+    return [this.$route.query.showFinished].flat()[0] === '1'
+  }
+  set showFinished(b: boolean) {
+    this.setSearchQueryToUrl(b)
+  }
+
+  setSearchQueryToUrl(showFinished: boolean) {
+    this.$router
+      .push({
+        path: '/calendar',
+        query: {
+          showFinished: showFinished ? '1' : '0',
+        },
+      })
+      .catch(() => {})
+  }
+
+  @Watch('showFinished')
+  async onShowFinishedChanged() {
+    await this.fetchEvents()
+  }
+
   async created() {
-    this.events = await api.events.getEvents({})
+    await this.fetchEvents()
+  }
+
+  async fetchEvents() {
+    const dataBegin = !this.showFinished
+      ? `${new Date().toISOString().split('T')[0]}T00:00:00+09:00`
+      : '2006-01-01T00:00:00+09:00'
+    this.events = await api.events.getEvents({
+      dateBegin: dataBegin,
+    })
   }
 }
 </script>

From d740287b6d4a2fc356dec196727bc626dcebf27b Mon Sep 17 00:00:00 2001
From: masky5859 <mathsuky2406@gmail.com>
Date: Sat, 6 Jul 2024 15:11:07 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat/=E6=9C=88=E3=81=94=E3=81=A8=E3=81=AB?=
 =?UTF-8?q?=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88=E3=82=92=E5=8F=96=E5=BE=97?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/Calendar.vue |  5 ++++
 src/pages/Calendar.vue             | 44 ++++++++----------------------
 2 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/src/components/shared/Calendar.vue b/src/components/shared/Calendar.vue
index 4179e3a3..edffe2dd 100644
--- a/src/components/shared/Calendar.vue
+++ b/src/components/shared/Calendar.vue
@@ -56,6 +56,7 @@
         @click:event="showEvent"
         @click:more="viewDay"
         @click:date="viewDay"
+        @input="onMonthChange"
       />
 
       <v-menu
@@ -217,6 +218,10 @@ export default class Calendar extends Vue {
     return (event: CalendarEvent) =>
       event?.admins.includes(this.$store.direct.state.me?.userId ?? '') ?? false
   }
+  onMonthChange(value) {
+    value = new Date(value)
+    this.$emit('monthChanged', value)
+  }
 }
 </script>
 
diff --git a/src/pages/Calendar.vue b/src/pages/Calendar.vue
index 627f0cc9..80f56f49 100644
--- a/src/pages/Calendar.vue
+++ b/src/pages/Calendar.vue
@@ -1,13 +1,16 @@
 <template>
   <v-col>
-    <v-checkbox v-model="showFinished" label="過去のイベントも表示" class="" />
-    <calendar :height="784" :events="events" />
+    <calendar
+      :height="784"
+      :events="events"
+      @monthChanged="fetchMonthlyEvents"
+    />
   </v-col>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+import { Component } from 'vue-property-decorator'
 import Calendar from '@/components/shared/Calendar.vue'
 import api, { ResponseEvent } from '@/api'
 
@@ -19,39 +22,16 @@ import api, { ResponseEvent } from '@/api'
 export default class CalendarPage extends Vue {
   events: ResponseEvent[] = []
 
-  get showFinished(): boolean {
-    return [this.$route.query.showFinished].flat()[0] === '1'
-  }
-  set showFinished(b: boolean) {
-    this.setSearchQueryToUrl(b)
-  }
-
-  setSearchQueryToUrl(showFinished: boolean) {
-    this.$router
-      .push({
-        path: '/calendar',
-        query: {
-          showFinished: showFinished ? '1' : '0',
-        },
-      })
-      .catch(() => {})
-  }
-
-  @Watch('showFinished')
-  async onShowFinishedChanged() {
-    await this.fetchEvents()
-  }
-
   async created() {
-    await this.fetchEvents()
+    await this.fetchMonthlyEvents(new Date())
   }
 
-  async fetchEvents() {
-    const dataBegin = !this.showFinished
-      ? `${new Date().toISOString().split('T')[0]}T00:00:00+09:00`
-      : '2006-01-01T00:00:00+09:00'
+  async fetchMonthlyEvents(newDate) {
+    const startDate = new Date(newDate.getFullYear(), newDate.getMonth(), 1)
+    const endDate = new Date(newDate.getFullYear(), newDate.getMonth() + 1, 0)
     this.events = await api.events.getEvents({
-      dateBegin: dataBegin,
+      dateBegin: startDate.toISOString(),
+      dateEnd: endDate.toISOString(),
     })
   }
 }