working calendar ranges with a subset of features

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

@@ -1,34 +1,72 @@
 <template>
-  <p>Il y a {{ranges.length}} plages</p>
-  <FullCalendar :options="calendarOptions"></FullCalendar>
+  <p>Il y a {{ 'eventSources[0].length' }} plages</p>
+  <div class="display-options row justify-content-between">
+    <div class="col-sm col-xs-12">
+      <div class="input-group mb-3">
+        <label class="input-group-text" for="slotDuration">Durée des créneaux</label>
+        <select v-model="slotDuration" id="slotDuration" class="form-select">
+          <option value="00:05:00">5 minutes</option>
+          <option value="00:10:00">10 minutes</option>
+          <option value="00:15:00">15 minutes</option>
+          <option value="00:30:00">30 minutes</option>
+        </select>
+      </div>
+    </div>
+    <div class="col-sm col-xs-12">
+      <div class="float-end">
+        <div class="input-group mb-3">
+          <div class="input-group-text">
+            <input id="showHideWE" class="form-check-input mt-0" type="checkbox" v-model="showWeekends">
+            <label for="showHideWE" class="form-check-label"> Masquer les week-ends</label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <FullCalendar :options="calendarOptions" ref="calendarRef">
+    <template v-slot:eventContent='arg'>
+      <span :class="eventClasses(arg)">
+          <b v-if="arg.event.extendedProps.is === 'remote'">{{ arg.event.title}}</b>
+          <b v-else-if="arg.event.extendedProps.is === 'range'">{{ arg.timeText }}</b>
+          <b v-else >no 'is'</b>
+          <a v-if="arg.event.extendedProps.is === 'range'" class="fa fa-fw fa-times"
+             @click.prevent="onClickDelete(arg.event)">
+          </a>
+        </span>
+    </template>
+  </FullCalendar>
 </template>
 
 <script setup lang="ts">
 
 import type {CalendarOptions, DatesSetArg, EventSourceInput, EventInput} from '@fullcalendar/vue3';
-import {reactive, computed, ref} from "vue";
-import type {DebuggerEvent} from "vue";
-import {mapGetters, useStore} from "vuex";
+import {reactive, computed, ref, watch} from "vue";
+import {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";
+import {EventApi} from "@fullcalendar/core";
 
 const store = useStore(key);
 
-const baseOptions = reactive<CalendarOptions>({
+const showWeekends = ref(true);
+const slotDuration = ref('00:15:00');
+
+// will work as long as calendar-vue is not changed
+const calendarRef = ref<{renderId: number}|null>(null);
+
+const baseOptions = ref<CalendarOptions>({
   locale: frLocale,
   plugins: [interactionPlugin, timeGridPlugin],
   initialView: 'timeGridWeek',
   initialDate: new Date(),
   selectable: true,
   datesSet: onDatesSet,
-  eventSources: [],
   selectMirror: false,
   editable: true,
-  slotDuration: '00:15:00',
   slotMinTime: "08:00:00",
   slotMaxTime: "19:00:00",
   headerToolbar: {
@@ -42,19 +80,24 @@ const ranges = computed<EventInput[]>(() => {
   return store.state.calendarRanges.ranges;
 });
 
+/**
+ * return the show classes for the event
+ * @param arg
+ */
+const eventClasses = function(arg: EventApi): object {
+  console.log('eventClasses', arg);
+  return {'calendarRangeItems': true};
+}
+
+/*
+// currently, all events are stored into calendarRanges, due to reactivity bug
+const remotes = computed<EventInput[]>(() => {
+  return store.state.calendarRemotes.remotes;
+});
+
 const sources = computed<EventSourceInput[]>(() => {
   const sources = [];
 
-  const dummy: EventSourceInput = {
-    id: 'dummy',
-    events: [
-      { id: '-1', start: '2022-06-23T12:00:00+02:00', end: '2022-06-23T14:00:00+02:00'},
-      { id: '-2', start: '2022-06-24T12:00:00+02:00', end: '2022-06-24T14:00:00+02:00'},
-    ]
-  }
-
-  sources.push(dummy);
-
   const rangeSource: EventSourceInput = {
     id: 'ranges',
     events: ranges.value,
@@ -64,26 +107,32 @@ const sources = computed<EventSourceInput[]>(() => {
 
   return sources;
 });
+*/
 
 const calendarOptions = computed((): CalendarOptions => {
-  const o = {
-    ...baseOptions,
+  return {
+    ...baseOptions.value,
+    weekends: showWeekends.value,
+    slotDuration: slotDuration.value,
     events: ranges.value,
-    eventSources: sources.value,
   };
-
-  console.log('calendarOptions', o);
-
-  return o;
 });
 
+/**
+ * launched when the calendar range date change
+ */
 function onDatesSet(event: DatesSetArg) {
-  store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end})
-    .then(source => {
-      console.log('onDatesSet finished');
-      //this.eventSources.push(source);
-    });
+  store.dispatch('fullCalendar/setCurrentDatesView', {start: event.start, end: event.end});
 }
+
+/**
+ * When a calendar range is deleted
+ */
+function onClickDelete(event: EventApi) {
+  console.log('onClickDelete', event);
+}
+
+
 </script>
 
 <style scoped>