I’m really new n working with Vue.js and build my first application with this framework few days ago.
I use FullCalendar to display some appointments and something like that and first everything works fine.

Today I tried to implement routes, navigation and stuff like that.
It also works really good for me but now I got some strange side-effects and I have no clue whats happening here or gone wrong…

So. Project-structure is like:

src
 |-->Components 
 |       |
 |    calendar.vue
 |    navigation.vue
 |
 |--> router 
 |     index.js
 |
 |--> views 
 |    home.vue
 |      ...
app.vue
main.js 

So far nothing special I think.
On my home.vue I imported the calendar.vue

Everytime I reload the page the size of the calendar-content is compressed in the left top corner.
If I just click on one of the buttons – doesn’t matter on which – it looks like it should.
In the WebInspector I can see that some classes of the DOM got some strange height- and width-values (like 0px) so maybe there are some problems when rendering.

I searched on google – someone just posted the problem here two years ago, but with no helpful response – but I can’t find a working solution..

I tried a mounted()-function also with the calendar.updateSize() from the Docs but this didn’t fix anything.

Is someone here who had a solution for the problem?

this is the code of the calendar.vue:

<script>
  import FullCalendar from '@fullcalendar/vue3';
  import dayGridPlugin from '@fullcalendar/daygrid'
  import interactionPlugin from '@fullcalendar/interaction';
  import deLocale from '@fullcalendar/core/locales/de';
  import { nextTick } from 'vue';

  export default {
    components: {
      FullCalendar
    }, 
    data() {
      return {
        calendarOptions: {
          plugins: [dayGridPlugin, interactionPlugin], 
          height: 'auto',
          initialView: 'dayGridWeek', 
          headerToolbar: {
            left: 'prev,next today', 
            center: 'title', 
            right: 'dayGridWeek,dayGridMonth'
          }, 
          locale: 'de',
          firstDay: 1,
          dayHeaderFormat: {
            weekday: 'long', 
            day: 'numeric', 
            month: 'numeric'
          },
          titleFormat: {
            week: 'numeric', 
          },
          events: [

          ],  
          datesSet: this.handleDatesSet,
          eventClick: this.handleEventClick, 
        }
      }
    },
  methods: {
    handleEventClick(info) {
      this.$emit('eventClicked', {
        title: info.event.title, 
        start: info.event.start, 
        end: info.event.end
      });
    },
    handleDatesSet(arg) {
      // Hier kannst du den Titel nachträglich ändern
      const calendarApi = arg.view.calendar;
      const viewTitle = calendarApi.view.title;
      const currentView = calendarApi.view;
      const startDate = currentView.activeStart;
      const year = startDate.getFullYear();
      const customTitle = `KW${viewTitle} ${year}`;
      const header = document.querySelector('.down .fc-toolbar-title');
      if (header) {
        header.innerHTML = customTitle;
      }
    }, 
    updateCalendarSize() {
      if (this.$refs.fullCalendar) {
        this.$refs.fullCalendar.getApi().updateSize();
      }
    }
  }, 
  mounted() {
    this.$nextTick(() => {
    this.updateCalendarSize();
  })}
};
</script>

<template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
</template>