Initial Nuxt frontend import

- Complete GGZ Ecademy Nuxt.js user portal
- Learning products browser and management
- Member management interface
- User authentication and roles
- Multi-language support (NL/EN)
- Vuex store for state management
- Component-based architecture

components/DynamicComponents/Calendar.vue

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <v-sheet tile height="54" color="grey lighten-3" class="d-flex">
+      <v-btn icon class="ma-2" @click="$refs.calendar.prev()">
+        <v-icon x-small>icon-dropdown-left</v-icon>
+      </v-btn>
+      <v-select v-model="type" :items="types" dense outlined hide-details class="ma-2" label="type"></v-select>
+      <v-select
+        v-model="mode"
+        :items="modes"
+        dense
+        outlined
+        hide-details
+        label="event-overlap-mode"
+        class="ma-2"
+      ></v-select>
+      <v-select
+        v-model="weekday"
+        :items="weekdays"
+        dense
+        outlined
+        hide-details
+        label="weekdays"
+        class="ma-2"
+      ></v-select>
+      <v-spacer></v-spacer>
+      <v-btn icon class="ma-2" @click="$refs.calendar.next()">
+        <v-icon x-small>icon-dropdown-right</v-icon>
+      </v-btn>
+    </v-sheet>
+    <v-sheet height="600">
+      <v-calendar
+        ref="calendar"
+        v-model="value"
+        :weekdays="weekday"
+        :type="type"
+        :events="events"
+        :event-overlap-mode="mode"
+        :event-overlap-threshold="30"
+        :event-color="getEventColor"
+        @change="getEvents"
+      ></v-calendar>
+    </v-sheet>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    type: 'month',
+    types: ['month', 'week', 'day', '4day'],
+    mode: 'stack',
+    modes: ['stack', 'column'],
+    weekday: [0, 1, 2, 3, 4, 5, 6],
+    weekdays: [
+      { text: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
+      { text: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
+      { text: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
+      { text: 'Mon, Wed, Fri', value: [1, 3, 5] }
+    ],
+    value: '',
+    events: [],
+    colors: [
+      'blue',
+      'indigo',
+      'deep-purple',
+      'cyan',
+      'green',
+      'orange',
+      'grey darken-1'
+    ],
+    names: [
+      'Meeting',
+      'Holiday',
+      'PTO',
+      'Travel',
+      'Event',
+      'Birthday',
+      'Conference',
+      'Party'
+    ]
+  }),
+  methods: {
+    getEvents({ start, end }) {
+      const events = []
+
+      const min = new Date(`${start.date}T00:00:00`)
+      const max = new Date(`${end.date}T23:59:59`)
+      const days = (max.getTime() - min.getTime()) / 86400000
+      const eventCount = this.rnd(days, days + 20)
+
+      for (let i = 0; i < eventCount; i++) {
+        const allDay = this.rnd(0, 3) === 0
+        const firstTimestamp = this.rnd(min.getTime(), max.getTime())
+        const first = new Date(firstTimestamp - (firstTimestamp % 900000))
+        const secondTimestamp = this.rnd(2, allDay ? 288 : 8) * 900000
+        const second = new Date(first.getTime() + secondTimestamp)
+
+        events.push({
+          name: this.names[this.rnd(0, this.names.length - 1)],
+          start: this.formatDate(first, !allDay),
+          end: this.formatDate(second, !allDay),
+          color: this.colors[this.rnd(0, this.colors.length - 1)]
+        })
+      }
+
+      this.events = events
+    },
+    getEventColor(event) {
+      return event.color
+    },
+    rnd(a, b) {
+      return Math.floor((b - a + 1) * Math.random()) + a
+    },
+    formatDate(a, withTime) {
+      return withTime
+        ? `${a.getFullYear()}-${a.getMonth() +
+            1}-${a.getDate()} ${a.getHours()}:${a.getMinutes()}`
+        : `${a.getFullYear()}-${a.getMonth() + 1}-${a.getDate()}`
+    }
+  }
+}
+</script>