My component has a method to fetch events, something like this:

async getEvents(start, end) { }

In order to fetch events from the server, at first I tried this:

<FullCalendar :events="getEvents()"

But that doesn't seem a very good idea. Instead, it is easier to use event-sources prop, which sends a list of event sources. The problem is that this prop can only be bound to a local property or computed property, and it doesn't seem to work if its bout to a function, for example:

 <FullCalendar :event-sources="getEventSources()" ....></FullCalendar>

 export default {
    computed: {

   },
   methods: {

 getEventSources(){
    return [
	{
            events(params) {
		console.log("fetching events " + JSON.stringify(params.start))
		return $this.getEvents(params.start, params.end)
                },
                color: '#1ABC9C',
	    
	}
        ]
    
},

async getEvents(start, end) {
    
    }

the getEventSources() method here does not get called, but If I convert it to a computed property, then it works (but I then cannot call this.getEvents()). Is there any solution, or I'm approaching the problem in a wrong way?

I have enabled refetchResourcesOnNavigate in my vue component and the fetchInfo arg in the resource callback function is never called on navigation and is always returning an empty object.

https://codesandbox.io/embed/fullcalendar-vue-32tp2

If you look at the console output, it only output once with an empty fetchInfo object.

I've been asked to create this issue in the fullcalendar vue component repo instead of the main repo, but I can see it's already been discussed in issue #25

Related:
fullcalendar/fullcalendar#4697

I need to custom the events display on the calendar, and add popover when I hover to event or click on it. For example, I need something like this.
<Fullcalendar> <template slot="event" slot-scoped="{event}"> <popover>{{event.title}}</popover> </template> </Fullcalendar/>
But now, I dont see any doc about it? Or I miss something ? And Instead of that way, is there any other to do that ? Please help me.
Thanks in advance.

I have purchased a licence for fullcalendar in 2016. I have recently ported my application to vue application. I reused the licence in the vue full calendar but I have been getting please use a valid licence key. The licence works if I use it in the same key in old way but not with this fullcalendar-vue component. Please advice what I should do? do I need a separate key for it?

Is there any method available to change view like this?
this.$refs.fullCalendar.changeView('dayGridMonth')

In my typescript application, calendar events are modeled by an Event class, which not only has properites but also utility functions. In order to work with my actual Event instances on fullcalendar hooks, I'm embedding them using extendedProps.

Everything works fine when supplying the events via event sources, but I ran into issues recently when I switched to using the events prop. It turns out that the Vue component uses deepCopy on deep props such as events, which has the side effect of converting my Event objects to plain objects, obviously leading to runtime errors when trying to use any of the Event methods.

I'm sure there are valid reasons why the props are deep-copied in the first place, but class instances should not be converted to plain objects.

Trying to figure out how to use this with NUXT. The default vue setup will not work because it does not support server side rendering. I would expect to be able to call this via a plugin and have tried a few different ways such as below:

Created a new plugin FullCalendarVue.js:

import Vue from 'vue';
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'

// Vue.use(FullCalendar);
Vue.component('FullCalendar', FullCalendar);
// Vue.component('dayGridPlugin', dayGridPlugin);
Vue.use(dayGridPlugin);

Added the plugin to nuxt.config.js:

  plugins: [
    {mode: 'client', src: '~/plugins/FullCalendarVue'},
  ],

On the vue page I wrap the calendar component in no-ssr tags:

<no-ssr>
        <FullCalendar
            defaultView="dayGridMonth"
            :plugins="calendarPlugins"
        />
</no-ssr>

This seems to load the fullcalendar plugin but I keep getting errors that "dayGridPlugin is not defined". Any suggestions on how to setup?

Hello,

It took me over an hour to find this out, but i think that the Event-System for this Vue component is broken. It is impossible to listen to an event via '@' or 'v-on:'.

The Events emited by the fullcalendar component are CamelCase, but should be in kebab-case.

Here is a briefe excerpt from the official VueJS documentation:

Unlike components and props, event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

For these reasons, we recommend you always use kebab-case for event names.

Here is a code snippet how I can reproduce it (I removed everything which is not related to the problem)

<fullcalendar
...
        default-view="dayGridWeek"
        editable="true"
        startEditable="true"
        durationEditable="false"
        @eventDrop="handleEventDrop"
...
    ></fullcalendar>

And in the vue instance like this:

const pickups = new Vue({
    el: '#calendar',
    data() {
        return {
            plugins: [dayGridPlugin, interactionPlugin],
            events: 'events get loaded by url'
        }
    },
    methods: {
        handleEventDrop(eventInfo) {
            console.log(eventInfo)
        }
    }
});

As soon as I drop an exisiting event on another date/time, the (Chrome) Browser prints the following in the console

[Vue tip]: Event "eventdrop" is emitted in component but the handler is registered for "eventDrop". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "event-drop" instead of "eventDrop".

Is it possible to change the emited events to kebab-case or provide another method to listen to the event like it is done with 'eventRender' or so...

Kind regards

Is your bug/feature applicable to the core project, without Vue?

No, its only a problem in combination with VueJS

:columnHeaderHtml="columnHeaderHtml"

columnHeaderHtml function is useless,

I compiled a list of missing properties from OptionsInput in the core repo (#4690), and most of these are also missing here:

• allDayHtml (entirely undocumented, so this might be by choice)
• eventDragMinDistance
• eventResourceEditable
• eventSourceFailure
• eventSourceSuccess
• forceEventDuration
• progressiveEventRendering
• selectLongPressDelay
• selectMinDistance
• timeZoneParam
• titleRangeSeparator
• refetchResourcesOnNavigate (scheduler)

Reproduction: https://codesandbox.io/s/fullcalendar-vue-vijjj

In this example i put editable true on my events:

calendarEvents: [
        // initial event data
        { 
          title: "Event Now",
          start: new Date(),
          editable: true
        }
      ]

And I'm logging eventDrop actions in eventDropped method:

    eventDropped(info) {
      console.log("--------------");
      console.log("Dropped event:", info.event.start);
      console.log(
        "Event from api:",
        this.$refs.fullCalendar.getApi().getEvents()[0].start
      );
      console.log("Event from vue:", this.calendarEvents[0].start);
    }

When I drop event to another date this.calendarEvents[0].start is not changing. Its value same as initialized.

Also when you add new event by clicking a date, this event is backs to its initilialized date.

https://codesandbox.io/s/4rvmz79p4w

In the console rrule object can't be seen in extendedProps when allDay is true
and in allDay false it cant be seen if startTime and endTime is not set

vue code

<template>
  <div class="demo-app">
    <div>{{ test }}</div>
    <div @mouseenter="onDivMouseEnter" @mouseleave="onDivMouseLeave">
      <b>{{ test2 }}</b>
    </div>
    <FullCalendar
      class="demo-app-calendar"
      ref="fullCalendar"
      defaultView="dayGridMonth"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :plugins="calendarPlugins"
      :events="calendarEvents"
      eventLimit="3"
      @eventMouseEnter="onEventMouseEnter"
      @eventMouseLeave="onEventMouseLeave"
    />
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

// must manually include stylesheets for each plugin
import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      calendarPlugins: [
        // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [
        // initial event data
        { title: "Event Now", start: new Date() },
        { title: "Event Now", start: new Date() },
        { title: "Event Now", start: new Date() },
        { title: "Event Now", start: new Date() }
      ],
      test: false,
      test2: false
    };
  },
  methods: {
    gotoPast() {
      let calendarApi = this.$refs.fullCalendar.getApi(); // from the ref="..."
      calendarApi.gotoDate("2000-01-01"); // call a method on the Calendar object
    },
    onEventMouseEnter() {
      console.log("eventMouseEnter");
      this.test = true;
    },
    onEventMouseLeave() {
      console.log("eventMouseLeave");
      this.test = false;
    },
    onDivMouseEnter() {
      console.log("mouseenter");
      this.test2 = true;
    },
    onDivMouseLeave() {
      console.log("mouseleave");
      this.test2 = false;
    }
  }
};
</script>

<style>
.demo-app {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-top {
  margin: 0 0 3em;
}

.demo-app-calendar {
  margin: 0 auto;
  max-width: 900px;
}
</style>

Problem

Full calendar with Vue does not take in to account named time zones. If we set the prop timeZone to any named timezone other than local, it by default sets to UTC.

For example -

timeZone='local' // calendar will be rendered in local time successfully
timeZone='UTC' // calendar will be rendered in UTC time successfully

timeZone='Australia/Sydney' // will be defaulted to UTC time

Expected Behaviour

When we specify a named timezone in timeZone prop, calendar should be rendered considering the value of the prop. For example -

timeZone='Australia/Sydney' // calendar should have been rendered considering the Sydney time instead of UTC time.

Reproduction link

https://codesandbox.io/embed/fullcalendar-vue-pj5v4

Works with default JS implementation

Timezone works perfectly fine in vanila js implementation of full calendar - https://codepen.io/pen/?&editable=true&editors=001, however fails with its vue implementation as explained above.

P.S. I'm using the named time zones from https://fullcalendar.io/demo-timezones.json list.

Bug Reports

When I try to integrate both plugins, resource-timeline and resource-timegrid in the same calendar the events disappear from the calendar.

Reproduction

https://codesandbox.io/s/fullcalendar-vue-h1klz
Just comment and uncomment the line 48 of the resourceTimeGridPlugin plugin to see the results.

Thank you.

Hello,
adding the propos
firstDay="1"
<FullCalendar defaultView="timeGridWeek" :plugins="calendarPlugins" :events="events" minTime= "07:00:00" maxTime= "22:00:00" firstDay="1" locale="it" />
the day still on sunday.
I Also see a partial translation for IT, the labels all-day and today are in english

Thank you

MM

How would you use fullcalendar-vue with a CDN?

I'm getting Unknown custom element: <fullcalendar>

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
  <link href='https://unpkg.com/@fullcalendar/[email protected]/main.css' rel='stylesheet' />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
  <script src='https://unpkg.com/@fullcalendar/[email protected]/main.js'></script>
  <script src="https://unpkg.com/@fullcalendar/[email protected]/main.umd.js"></script>

  <script>

    document.addEventListener('DOMContentLoaded', function () {

      var app = new Vue({
        el: "#app",
        components: {
          FullCalendar: window.FullCalendarVue.default
        },
        data() {
          return {
            calendarPlugins: [window.FullCalendarDayGrid.default]
          }
        }
      });

    });

  </script>

</head>

<body>
  <div id="app">
    <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" />
  </div>
</body>

</html>

Bug Reports

https://codesandbox.io/s/fullcalendar-vue-ym6zw

allDaySlot line 18.. ":allDaySlot" works ok
I cant seem to get nowIndicator to work at all

$options.calendar is null !

In document , I can see for get all events in this url https://fullcalendar.io/docs/v3/clientEvents

But in Vue js , how to configure to fetch all events in one click

events prop set a func can listen,but I don't know how to add events to the view.

I want to update the event in database when it dropped on a calendar from another calendar. How can i do that? Is there any way to get calendar id or something like this on event dropped?

I am rendering events via google calendar API. I am trying to use eventRender and visible range in my data() function but I am not sure what the best way of including this is. Is anyone able to give me an example of how to use it and where? Please. Thanks! @arshaw

Bug Reports

<FullCalendar
      class='demo-app-calendar'
      ref="fullCalendar"
      defaultView="dayGridMonth"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      @dateClick="handleDateClick"
      locale="zh-cn"
    />

Feature Requests

the group of buttons title should be the chinese, when I set the locale is zh-cn

(Please erase the above text and begin typing. Thanks!)

I was just installing this with yarn + webpack/encore and when I just copied the documentation examples and performed a "yarn encore dev --watch" to build everything I got the error "Module parse failed: Unexpected character '@'".
The files are in css, not scss.
So:

<style lang='scss'>
    @import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/timeline/main.css';
    @import '~@fullcalendar/resource-timeline/main.css';
</style>

Needs to be:

<style lang='css'>
    @import '~@fullcalendar/core/main.css';
    @import '~@fullcalendar/timeline/main.css';
    @import '~@fullcalendar/resource-timeline/main.css';
</style>

Hello,

I used ListView now ListView show only event.title. But I want to add additional string from extendedProps.

I've try to use eventRender prop like this,

eventRender (info) {
      if (info.view.constructor.name === 'ListView') {
        info.el.childNodes[2].firstChild.innerHTML = `
        ${info.event.title} Moble ${info.event.extendedProps.mobile}
        <br>Detail: ${info.event.extendedProps.description}`
      }
    },

But when vue build it cannot display.

I currently try to add a category filter for events to a vue app which uses this fullcalendar component.

The documentation for the used @eventRender event, which can be found here: https://fullcalendar.io/docs/eventRender
says: "The function can also return false to completely cancel the rendering of the event."

This is currently not working.
To reproduce see: https://codesandbox.io/s/fullcalendar-vue-mxi8t

The descriped second posibility:
"The function can also return a brand new element that will be used for rendering instead. For all-day background events, you must be sure to return a ."
seem also not to work.

If I try to use the height property this is being ignored:

<FullCalendar
height="200"
class="demo-app-calendar"
ref="fullCalendar"
defaultView="dayGridMonth"
:header="{
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}"
:plugins="calendarPlugins"
:weekends="calendarWeekends"
:events="calendarEvents"
@dateClick="handleDateClick"
/>

https://codesandbox.io/s/fullcalendar-vue-vhx08

Bug Reports

You MUST post a recreation or else your issue will be CLOSED without explanation.
Instructions: https://fullcalendar.io/reporting-bugs

Feature Requests

Search the issue tracker for an existing ticket before creating a new one.
Instructions: https://fullcalendar.io/requesting-features

(Please erase the above text and begin typing. Thanks!)

Is it possible to render vue component upon render callbacks?
E.g. eventRender to render a custom vue component?

I've a problem with timelineDay view while using this Vue component. (also timelineWeek)
At the same time there is no problem with resourceTimelineDay view. It works fine!
But i need view without resources.

My imports
import FullCalendar from '@fullcalendar/vue'
import timeline from '@fullcalendar/timeline';
import resourceTimelinePlugin from '@fullcalendar/resource-timeline';

My Plugins
calendarPlugins: [ resourceTimelinePlugin, timeline ],

An error appear in console while using timelineDay view:

[Vue warn]: Error in mounted hook: "Error: The FullCalendar view "timelineDay" does not exist. Make sure your plugins are loaded correctly."

What else i can try to fix it?
Thanks!

Hi, thank you so much for providing the official vue wrapper for fullcalendar.

I have recently applied it to our product and faced an issue that the event items are not shown on specific browser and device like Chrome on iphone, Chrome on ipad and Safari on mac. As I dig in, I found that @eventRender function is not firing on Safari on mac.

Could you please look into this so I could resolve the issue? I am attaching the images and hope it might be helpful.
Thanks in advance.

Safari on mac: .fc-event-container is empty

Chrome on mac

https://codesandbox.io/s/54jpnjnz3n

Set props :header="false" and :navLinks="true" as seen in the codesandbox
When clicking the navlink nothing happen in codesandbox.
In my project this is the error

Any plans to make the events reactive (something along these lines: CroudTech/vue-fullcalendar#7). It'd be cool to be able to modify the an event object and have the changes update on the calendar reactively, rather than having to remove and re-render the event.

Currently you have to define each config parameters like so:

<FullCalendar
      ref="fullCalendar"
      :selectable="selectable"
      :plugins="plugins"
      :defaultView="defaultView"
      :firstDay="firstDay"
      :nowIndicator="nowIndicator"
      :allDayText="allDayText"
      :slotDuration="slotDuration"
      :slotLabelFormat="slotLabelFormat"
      :slotLabelInterval="slotLabelInterval"
      :locale="locale"
      :height="height"
      :editable="editable"
      :datesAboveResources="datesAboveResources"
      :buttonText="buttonText"
      :header="header"
      :views="views"
      :resources="resources"
      :events="events"
      :resourceRender="resourceRender"
      :columnHeaderHtml="columnHeaderHtml"
      :eventRender="eventRender"
/>

Everything is duplicated and feels wrong:

export default {
  components: {
    Layout,
    FullCalendar,
    TextInput
  },
  data() {
    return {
      plugins: [
        dayGridPlugin,
        timeGridPlugin,
        listPlugin,
        interactionPlugin,
        momentPlugin
      ],
      defaultView: "timeGridWeek",
      firstDay: 1,
      nowIndicator: true,
      allDayText: "Ganztägig",
      slotDuration: "00:15",
      slotLabelFormat: "HH:mm",
      slotLabelInterval: "00:30",
      locale: "de",
      height: "auto",
      editable: true,
      datesAboveResources: true,

      ...

    };
  },
}

Using a simple config parameter like so would be much cleaner:

<FullCalendar
      ref="fullCalendar"
      :config="calendarConfig"
/>

export default {
  data() {
    return {
      calendarConfig: {
         plugins: [
            dayGridPlugin,
            timeGridPlugin,
            listPlugin,
            interactionPlugin,
            momentPlugin
        ],
        defaultView: "timeGridWeek",
        ...
      }
    };
  },
}

Codesandbox: https://codesandbox.io/s/z2ovp94z0x

Resize working in week view:

Resize not working in month view:

Hello, thank you for such a good plugin. I found that your vue version does not have the googleCalendarApiKey parameter when using the @fullcalendar/google-calendar plugin;

I found that INPUT_DEFS is missing the definition of this parameter in the fullcalendar-options.js file. I hope that you can fix this problem as soon as possible, thank you:-D

Hi! Today I tried to make droppable events by Draggable plugin. (earlier I did the same at my own Vue-component)
What have been done:

1. Import plugins:
   import interactionPlugin, { Draggable } from '@fullcalendar/interaction';
2. Make Interaction plugin available:
   calendarPlugins: [ interactionPlugin, timeline ],
3. Create Draggable object:
   new Draggable(document.getElementById('planned-tasks'), { itemSelector: '.fc-event', eventData: function(eventEl) { return { title: eventEl.innerText, duration: "02:00" }; } });

But when I drop event on calendar - nothing happens, like when Draggable.eventData returns object with create:false attribute.
I also have problem with dragging events inside of calendar, when I try to drag event - nothing happens. And no errors in console in both cases.
Only event resize works fine.
Is it problem with InteractionPlugin support or something?

P.S.: just in case I restart my browser before sending an issue =)

Hello first thank you for the fullcalendar project that you developed, it's so good

that by chance I found this repo, which does something similar to the project that I'm maintaining, and you can check it out https://github.com/taoche/v-fullcalendar， It's already in use

I have a lot of Vue development experience and I thought maybe I could help you maintain fullcalendar for vue

What do you think?

I have a working eventAllow function as follows:

eventAllow(dropLocation, draggedEvent){
   const room = dropLocation.resource.extendedProps
   const meeting = draggedEvent.extendedProps
   return meeting.total_participants <= room.seats
}

This works nicely and does now allow the user to drop a meeting in a room where there are not enough seats. However, I will like to change the CSS class dynamically for the room that does not meet the criteria and grey it out. Any idea how this can be done?

Hi there,

First of all, awesome plugin!

I am trying to update events by filling out values in a modal, however when firing this.$refs.updateEvent(this.editForm); it throws an error telling my that Uncaught TypeError: _this.$refs.calendar.getApi(...).updateEvent is not a function.

I also tried to update the events "manually" like I would normally with vue by just setting it's properties, however I have trouble getting the actual index of the event I am editing, thus the calendar won't re-render properly (the event disappears).

How do you handle event updates in the calendar?

Best regards, Casper.

Is there any Vue slot functionality support?

Thanks in advance.

Hello,

I noticed an issue with eventMouseEnter and eventMouseLeave when the DOM is updated in a Vue component, as you can see in this sandbox.

The test variable is supposed to become true when the mouse enters an event, and false when the mouse leaves the event. I also added console.log() calls to see when the two events are fired.

As you can see in the sandbox, when the mouse enters the calendar event, both mouse events are fired repeatedly, one after the other.

More specifically, every time the DOM is updated while the mouse hovers over an event, both events are fired. If we don't display the value of test on top of the calendar, this does not happen and the events are fired only once as they should be.

This issue does not happen with regular mouseenter and mouseleave Vue events. To illustrate this, I added a div showing the value of a test2 variable which updates on hover.

I am not sure if this issue happens only in the Vue implementation. I tried doing something similar in the regular version (here) by calling render() in both handlers, but I don't think this is a good example as it should not be equivalent.

Thanks in advance for looking into this.

I just spent a good amount of time trying to figure out why my calendar would constantly re-render, and thought I'd share my findings:

Due to the way vue works, prop values that are calculated inline, e.g.

:header="showHeader ? { left: '', center: 'title', right: '' } : false"

are re-calculated every time the template renders. That means that every time the template updates, a new object (with the same props) is passed to the FullCalendar instance, even if the relevant properties (here showHeader) didn't change. Since there is a watcher for all properties, the watcher for header will trigger on every template update, and issue a full re-render.

Demo: https://codesandbox.io/s/fullcalendar-vue-uencg

An obvious workaround is to move the calculation to a computed property (see: vuejs/vue#4060 (comment)), however it would be nice if the vue component would also guard against this behavior, e.g. by performing a property-equals check on the new & old value when the watcher triggers.

Hey!

I just defined a custom button like so:

copyWeek:         {
    text: 'Copy week',
    click() {
        this.$set(this, "copyDialogVisible", true)
    }
}

And I get the error TypeError: this.$set is not a function

How do I circumvent this so I can use my Vue methods?

Bug Reports

When I add some properties ( :header, :buttonText) to customize calendar, all app stucks (looks like endless loop). When I remove these props, app and calendar works again as intended.
It can be replicated at any time.

Is your bug/feature applicable to the core project, without Vue?

No, it is only Vue problem, I think.

Setup:

1. Use default codesandbox, set editable and selectable props to true
2. Go to week view
3. Try dragging on empty space
4. Only blue selector appears, not event block

Expected behaviour:

This on is using https://github.com/CroudTech/vue-fullcalendar v4.0.0-1

Reproduction: https://codesandbox.io/s/fullcalendar-vue-vijjj

I set locale="tr" in this example. First day should be Pzt but it is still Paz. Workaround this issue by adding :firstDay="1"

Hey!

Great Vue component, however after I upgraded from v4.1.1 to v4.2.0 my events are not rendered anymore. What's more I also got some deprecation warnings

Use of datesRender as an event is deprecated. Please convert to a prop.
Use of eventRender as an event is deprecated. Please convert to a prop.
Use of viewSkeletonRender as an event is deprecated. Please convert to a prop.

Could you please make a working example with 4.2.0 or at least explain what needs to be modified in order for the events to render?

Could it be related to the fact that I initialise FullCalendar with an empty events array and am then loading my events in Vue's mounted() lifecycle hook?

Thanx!