Calendar events and iCal feeds

aleksis/core/frontend/components/calendar/CalendarOverview.vue

+<template>
+  <div class="mt-4 mb-4">
+    <v-skeleton-loader v-if="$apollo.queries.calendarFeeds.loading" type="date-picker-options, actions" />
+    <div v-else>
+      <v-row align="strech">
+        <v-col class="col-2" align-self="center">
+          <v-btn icon class="mx-2" @click="$refs.calendar.prev()">
+            <v-icon>mdi-chevron-left</v-icon>
+          </v-btn>
+          <v-btn
+            outlined
+            class="mx-2"
+            @click="calendarFocus = ''"
+          >
+            <v-icon>mdi-calendar-today-outline</v-icon>
+            {{ $t("calendar.today") }}
+          </v-btn>
+          <v-btn icon class="mx-2" @click="$refs.calendar.next()">
+            <v-icon>mdi-chevron-right</v-icon>
+          </v-btn>
+        </v-col>
+        <v-col align-self="center">
+          <h1 class="mx-2" v-if="$refs.calendar">{{ $refs.calendar.title }}</h1>
+        </v-col>
+        <v-spacer />
+        <v-col class="col-2" align-self="center">
+          <v-select
+            v-model="currentCalendarType"
+            :items="availableCalendarTypes"
+            :item-text="nameForMenu"
+            item-value="type"
+            menu-props="auto"
+            outlined
+            color="primary"
+            hide-details="auto"
+            single-line
+            dense
+            class="mx-2"
+          >
+          </v-select>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col class="col-2">
+          <calendar-select v-model="selectedCalendarFeedNames" :calendar-feeds="calendarFeeds" @selectAll="toggleAllCalendars" />
+        </v-col>
+        <v-col class="col-10">
+          <v-sheet height="600">
+            <v-calendar
+              ref="calendar"
+              v-model="calendarFocus"
+              :events="events"
+              :type="currentCalendarType"
+            ></v-calendar>
+          </v-sheet>
+        </v-col>
+      </v-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import CalendarSelect from "./CalendarSelect.vue"
+
+import gqlCalendarOverview from "./calendarOverview.graphql";
+
+export default {
+  name: "CalendarOverview",
+  components: {
+    CalendarSelect,
+  },
+  data() {
+    return {
+      calendarFocus: "",
+      calendarFeeds: [],
+      selectedCalendarFeedNames: [],
+      currentCalendarType: "month",
+      availableCalendarTypes: [
+        { type: "month", translationKey: "calendar.month" },
+        { type: "week", translationKey: "calendar.week" },
+        { type: "day", translationKey: "calendar.day" },
+      ],
+      start: "",
+      end: "",
+    };
+  },
+  apollo: {
+    calendarFeeds: {
+      query: gqlCalendarOverview,
+      variables() {
+        return {
+          start: this.start,
+          end: this.end,
+        };
+      },
+    },
+  },
+  computed: {
+    events() {
+      return this.calendarFeeds.filter((c) => this.selectedCalendarFeedNames.indexOf(c.name) >= 0).map(c => c.feed.events).flat();
+    },
+  },
+  methods: {
+    nameForMenu: function (item) {
+      return this.$t(item.translationKey);
+    },
+    toggleAllCalendars: function (toggleAllStatus) {
+      toggleAllStatus ? this.selectedCalendarFeedNames = this.calendarFeeds.map((c) => c.name) : this.selectedCalendarFeedNames = [];
+    },
+  },
+  mounted () {
+    this.$refs.calendar.move(0);
+  },
+};
+</script>
+
+<style scoped></style>