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

<template>
  <concerned-groups></concerned-groups>
  <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>
  <h2 class="chill-red">{{ $t('choose_your_date') }}</h2>
  <FullCalendar ref="fullCalendar" :options="calendarOptions">
    <template v-slot:eventContent='arg'>
      <b>{{ arg.timeText }}</b>
    </template>
  </FullCalendar>
</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';

const currentEvent = {
   events: [{
      title: 'my_event',
      start: window.startDate,
      end: window.endDate
   }],
   id: window.mainUser
};

export default {
  name: "App",
  components: {
    ConcernedGroups,
    CalendarUserSelector,
    FullCalendar
  },
  data() {
    return {
      errorMsg: [],
      users: {
        loaded: [],
        selected: [],
        logged: null
      },
      calendarEvents: {
         loaded: [],
         selected: [],
         user: [],
         current: currentEvent
      },
      showMyCalendar: true,
      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);
      console.log(this.calendarOptions.eventSources)
      if (window.startDate !== undefined) {
         this.calendarOptions.eventSources.push(currentEvent);
      }
      if (this.showMyCalendar) {
          this.calendarOptions.eventSources.push(this.calendarEvents.user);
      }
      console.log(this.calendarOptions.eventSources)
    },
    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) {
      payload.event.setProp('backgroundColor','#3788d8');
      payload.event.setProp('textColor','#ffffff');
      //this.$store.dispatch('updateEvent', payload);
    },
    onEventMouseEnter(payload) {
      payload.event.setProp('borderColor','#444444');
    },
    onEventMouseLeave(payload) {
      payload.event.setProp('borderColor','#ffffff');
    }
  },
  mounted() {
    this.init();
  }
}
</script>