wip on app2

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue

@@ -0,0 +1,59 @@
+<template>
+  <p>Il y a {{eventSources[0].events.length}} événements</p>
+  <FullCalendar :options="calendarOptions"></FullCalendar>
+</template>
+
+<script setup lang="ts">
+
+//import {CalendarOptions, DatesSetArg, EventSourceInput} from '@fullcalendar/vue3';
+import {reactive, computed, ref} from "vue";
+import {mapGetters, useStore} from "vuex";
+import {key} from './store';
+import '@fullcalendar/core/vdom'; // solves problem with Vite
+import frLocale from '@fullcalendar/core/locales/fr';
+import FullCalendar from '@fullcalendar/vue3';
+import interactionPlugin from "@fullcalendar/interaction";
+import timeGridPlugin from "@fullcalendar/timegrid";
+
+const store = useStore(key);
+
+const eventSources = computed<[]>(() => {
+  console.log('event sources');
+  return store.getters.getEventSources;
+});
+
+const calendarOptions = computed(() => {
+      return {
+        locale: frLocale,
+        plugins: [interactionPlugin, timeGridPlugin],
+        initialView: 'timeGridWeek',
+        initialDate: new Date(),
+        selectable: true,
+        datesSet: onDatesSet,
+        eventSources: eventSources.value,
+        selectMirror: false,
+        editable: true,
+        slotDuration: '00:15:00',
+        slotMinTime: "08:00:00",
+        slotMaxTime: "19:00:00",
+        headerToolbar: {
+          left: 'prev,next today',
+          center: 'title',
+          right: 'timeGridWeek timeGridDay'
+        },
+      };
+    });
+
+function onDatesSet(event: any) {
+  console.log('onDatesSet', event);
+  store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
+    .then(source => {
+      console.log('onDatesSet finished');
+      //this.eventSources.push(source);
+    });
+}
+</script>
+
+<style scoped>
+
+</style>