Merge pull request #957 from traPtitech/feat/speed-up-calendar-loading

feat/カレンダーの読み込むデータを限定できるように

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>
 

src/pages/Calendar.vue

@@ -1,6 +1,10 @@
 <template>
   <v-col>
-    <calendar :height="784" :events="events" />
+    <calendar
+      :height="784"
+      :events="events"
+      @monthChanged="fetchMonthlyEvents"
+    />
   </v-col>
 </template>
 
@@ -19,7 +23,16 @@ export default class CalendarPage extends Vue {
   events: ResponseEvent[] = []
 
   async created() {
-    this.events = await api.events.getEvents({})
+    await this.fetchMonthlyEvents(new Date())
+  }
+
+  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: startDate.toISOString(),
+      dateEnd: endDate.toISOString(),
+    })
   }
 }
 </script>