FullCalendar v5 - Show the same view for 2 calendars

Question

I am using FullCalendar vue component.

I have 2 calendars with different options, I need to change the view of second calendar whenever the first calendar's view is changed.

I am trying to use "datesSet" to achieve this but its not working.

here is my code:

<template>
  <FullCalendar ref="fullCalendar" :options="srcCalendar" />
  <FullCalendar ref="fullCalendarDest" :options="destCalendar" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'

export default {
  components: { FullCalendar},
  data() {
    return {
      srcCalendar: {
        headerToolbar: {
          start: 'title prev next',
          center: 'resourceTimelineMonth resourceTimelineWeek resourceTimelineDay',
          end: 'today'
        },
        datesSet: this.handleDatesSetSrcCalendar,
      },
      destCalendar: {
        headerToolbar: {
          start: 'title prev next',
          center: 'resourceTimelineMonth resourceTimelineWeek resourceTimelineDay',
          end: 'today'
        },
      },
    }
  },
  methods: {
    handleDatesSetSrcCalendar(currentViewType, destCalendar){
       console.log("handleDatesSetSrcCalendar");

        const viewType = this.$refs.fullCalendar.getApi().view.type;

        let isChanged = false;

        if (currentViewType == null) {
          currentViewType = viewType;
        }

        if (currentViewType !== viewType) {
          isChanged = true;
        }

        if (isChanged) {
          currentViewType = viewType;
          
          console.log('src viewType', viewType)
          this.$refs.fullCalendarDest.getApi().changeView(viewType);
        }

        return [];

    },
  },
</script>

Please help me understand where is my mistake.

Thank you!

Answer 1

I think you're searching for watchers, you can find the doc here : https://vuejs.org/guide/essentials/watchers.html

A watcher function is a function triggered by a change in a specific data.

Answer 2

Well I couldn't make use of "changeView" so I did it with "initialView" in vue 2:

<template>
  <FullCalendar ref="fullCalendar" :key="`id1-${initialView}`" :options="srcCalendar" />
  <FullCalendar :key="`id2-${initialView}`" :options="destCalendar" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'

export default {
  components: { FullCalendar},
  data() {
    return {
      initialView: "resourceTimelineWeek",
    };
  },
  computed: {
    srcCalendar() {
        return {
            initialView: this.initialView,
            headerToolbar: {
                start: 'title prev next',
                center: 'resourceTimelineMonth resourceTimelineWeek resourceTimelineDay',
                end: 'today'
                },
                datesSet: this.handleDatesSetSrcCalendar,
        }
    },
    destCalendar () {
        return {
            initialView: this.initialView,
            headerToolbar: {
                start: '',
                center: '',
                end: ''
            },
        }
    }
  },
  methods: {
    handleDatesSetSrcCalendar(currentViewType){
        const viewType = this.$refs.fullCalendar.getApi().view.type;
        let isChanged = false;
        if (currentViewType == null) {
          currentViewType = viewType;
        }
        if (currentViewType !== viewType) {
          isChanged = true;
        }
        if (isChanged) {
          currentViewType = viewType;
          this.initialView = viewType;
        }
        return [];
    },
  },
</script>

However "navLinks" won't work with this methode!