chill-bundles/src/Bundle/ChillCalendarBundle/Resources/public/vuejs/Calendar/App.vue

<template>
  <concerned-groups></concerned-groups>
  <teleport to="#calendarControls">
    <calendar-user-selector 
      v-bind:users="users"
      v-bind:calendarEvents="calendarEvents" 
      v-bind:updateEventsSource="updateEventsSource"
      v-bind:showMyCalendar="showMyCalendar"
      v-bind:toggleMyCalendar="toggleMyCalendar" >
    </calendar-user-selector>
  </teleport>
  <teleport to="#fullCalendar">
    <FullCalendar ref="fullCalendar" :options="calendarOptions">
      <template v-slot:eventContent='arg'>
        <b>{{ arg.timeText }}</b>
      </template>
    </FullCalendar>
  </teleport>
</template>

<script>
import ConcernedGroups from 'ChillActivityAssets/vuejs/Activity/components/ConcernedGroups.vue';
import CalendarUserSelector from '../_components/CalendarUserSelector/CalendarUserSelector.vue';
import '@fullcalendar/core/vdom'; // solves problem with Vite
import frLocale from '@fullcalendar/core/locales/fr';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

export default {
  name: "App",
  components: {
    ConcernedGroups,
    CalendarUserSelector,
    FullCalendar
  },
  data() {
    return {
      errorMsg: [],
      users: {
        loaded: [],
        selected: [],
        logged: null
      },
      calendarEvents: {
         loaded: [],
         selected: [],
         user: [],
         current: {
            events: [{
                title: 'my_event',
                start: window.startDate,
                end: window.endDate
            }],
            id: window.mainUser
          }
      },
      selectedEvent: null,
      previousSelectedEvent: null,
      previousSelectedEventColor: null,
      showMyCalendar: false,
      calendarOptions: {
        locale: frLocale,
        plugins: [ dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin ],
        initialView: 'timeGridWeek',
        initialDate: window.startDate !== undefined ? window.startDate : new Date(),
        eventSource: [],
        selectable: true,
        select: this.onDateSelect,
        eventChange: this.onEventChange,
        eventClick: this.onEventClick,
      //   eventMouseEnter: this.onEventMouseEnter,
      //   eventMouseLeave: this.onEventMouseLeave,
        selectMirror: true,
        editable: true,
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth,listWeek,listDay'
        },
      }
    }
  },
  methods: {
    init() {
      console.log(window.startDate);
      this.updateEventsSource();
    },
    toggleMyCalendar(value) {
      this.showMyCalendar = value;
    },
    updateEventsSource() {
      this.calendarOptions.eventSources = [];
      this.calendarOptions.eventSources.push(...this.calendarEvents.selected);
      if (window.startDate !== undefined) {
         this.calendarOptions.eventSources.push(this.calendarEvents.current);
      }
      if (this.showMyCalendar) {
          this.calendarOptions.eventSources.push(this.calendarEvents.user);
      }
      console.log(this.calendarOptions.eventSources);
    },
    unSelectPreviousEvent(event) {
      if (event) {
        if (typeof event.setProp === 'function') {
          event.setProp('backgroundColor', this.previousSelectedEventColor);
          event.setProp('borderColor', this.previousSelectedEventColor);
          event.setProp('textColor','#444444');
        }
      }
    },
    onDateSelect(payload) {
      Object.assign(payload, {users: this.users});
      this.$store.dispatch('createEvent', payload);
    },
    onEventChange(payload) {
      console.log(this.calendarOptions.eventSources)
      this.$store.dispatch('updateEvent', payload);
    },
    onEventClick(payload) {
      this.previousSelectedEvent = this.selectedEvent;
      this.previousSelectedEventColor = payload.event.extendedProps.sourceColor;
      this.selectedEvent = payload.event;
      this.unSelectPreviousEvent(this.previousSelectedEvent);
      payload.event.setProp('backgroundColor','#df4949');
      payload.event.setProp('borderColor','#df4949');
      payload.event.setProp('title', 'Choisir cette plage');
      payload.event.setProp('textColor','#ffffff');
    },
    onEventMouseEnter(payload) {
      payload.event.setProp('borderColor','#444444');
    },
    onEventMouseLeave(payload) {
      payload.event.setProp('borderColor','#ffffff');
    }
  },
  mounted() {
    this.init();
  }
}
</script>