Vue FullCalendar Wrapper

Common errors

• Module not found: Error: Can't resolve 'vue-full-calendar' in [path]

  cause Attempting to use `require()` syntax in an ES Module context or vice-versa, specifically after `vue-full-calendar` v2.1.0 which switched to ES Modules.
  fix Ensure all imports for `vue-full-calendar` use `import FullCalendar from 'vue-full-calendar'` for global plugin registration or `import { FullCalendar } from 'vue-full-calendar'` for local component use. Verify your bundler configuration supports ES Modules.

• TypeError: Cannot read properties of undefined (reading 'use') or 'Vue is not defined'

  cause Vue is not globally available when trying to call `Vue.use(FullCalendar)` or the `Vue` import is missing from the file.
  fix Add `import Vue from 'vue';` at the top of your `main.js` file and ensure Vue is correctly exposed in your build setup if not using a global script tag.

• Calendar displays as unstyled text, a basic grid, or is missing visual elements.

  cause The FullCalendar CSS file is not being loaded. Since `vue-full-calendar` v2.0.0, automatic CSS import was removed, requiring manual inclusion.
  fix Add `import 'fullcalendar/dist/fullcalendar.css';` to your main application entry file (e.g., `main.js`) or within a `<style>` block in your root Vue component.

• this.$refs.calendar.fireMethod is not a function

  cause Attempting to call a FullCalendar method directly on the component instance without using the `fireMethod` wrapper or before the component is fully mounted and the ref is available.
  fix Ensure the `<full-calendar>` component has a `ref` attribute (e.g., `<full-calendar ref="calendar" />`) and call methods using `this.$refs.calendar.fireMethod('methodName', ...args)` after the component is mounted.

• ReferenceError: FullCalendar is not defined when using <full-calendar> component

  cause The `full-calendar` component has not been correctly registered, either globally via `Vue.use()` or locally within a component's `components` option.
  fix For global usage, add `import FullCalendar from 'vue-full-calendar'; Vue.use(FullCalendar);` in your `main.js`. For local component registration, import `import { FullCalendar } from 'vue-full-calendar';` and include it in your component's `components: { FullCalendar }` option.

Warnings

• breaking As of `vue-full-calendar` v2.0.0, the package no longer automatically imports the `fullcalendar.css` file. Users must explicitly import this CSS in their projects for the calendar to display correctly.
  Fix: Add `import 'fullcalendar/dist/fullcalendar.css';` to your main application entry file (e.g., `main.js` or a top-level component's style block).
• breaking In `v2.1.0`, the package transitioned from CommonJS `require` statements to ES Modules `import` statements. Projects using older bundlers or CommonJS environments will need to update their import syntax.
  Fix: Ensure all imports for `vue-full-calendar` use `import ... from 'vue-full-calendar'` syntax, not `const ... = require('vue-full-calendar')`.
• gotcha This package is specifically designed for Vue 2.x applications. For Vue 1.x, a distinct, older version (`vue-full-calendar@0.0.3`) must be used, which has different APIs and limited features. It does not support Vue 3.x; for Vue 3, consider `@fullcalendar/vue3`.
  Fix: Verify your Vue.js version. For Vue 2.x, use `npm install --save vue-full-calendar`. For Vue 1.x, install `npm install --save vue-full-calendar@0.0.3`. For Vue 3.x, use `@fullcalendar/vue3` directly.
• gotcha FullCalendar, the underlying library, depends on jQuery. While `vue-full-calendar` states it attempts to handle this automatically if jQuery is not detected, explicit global availability or awareness of FullCalendar's loading mechanism is crucial in certain build or complex environments to prevent unexpected issues.
  Fix: Ensure that if you're using a custom build process or advanced FullCalendar plugins, jQuery is either globally available or correctly handled by FullCalendar's internal loading, as `vue-full-calendar` acts as a wrapper.
• breaking The package loosened its `fullcalendar` dependency lock in `v2.4.0` from `3.4.*` to `3.*.*`. While this provides more flexibility, it means `vue-full-calendar` might be compatible with various FullCalendar v3 minor versions, some of which could introduce subtle changes not explicitly tested or supported by this wrapper.
  Fix: If encountering unexpected behavior with FullCalendar features, consider explicitly pinning the `fullcalendar` dependency in your `package.json` to a known working minor version (e.g., `"fullcalendar": "3.4.0"`) to ensure stability.
• gotcha This package is abandoned. The last activity on the GitHub repository and npm publish was over 5 years ago (early 2019/mid-2020). This means there will be no new features, bug fixes, security patches, or compatibility updates for newer versions of Vue.js, FullCalendar, or other ecosystem libraries.
  Fix: For new projects or projects requiring ongoing maintenance, consider migrating to the official FullCalendar Vue component (`@fullcalendar/vue` for Vue 2 or `@fullcalendar/vue3` for Vue 3) or other actively maintained alternatives like `vue-cal`.

Install

• npm install vue-full-calendar npm
• yarn add vue-full-calendar yarn
• pnpm add vue-full-calendar pnpm

Imports

• FullCalendar (global plugin)
  wrong:

  const FullCalendar = require('vue-full-calendar'); // Incorrect since v2.1.0

  correct:

  import FullCalendar from 'vue-full-calendar';
  Vue.use(FullCalendar);

  Used for global registration of the component in a Vue application entry file. This package switched from CommonJS `require` to ES Modules `import` in `v2.1.0`.
• FullCalendar (local component)
  wrong:

  import FullCalendar from 'vue-full-calendar'; // This imports the default export, not the named export for local use.

  correct:

  import { FullCalendar } from 'vue-full-calendar';

  Used for local component registration within a single `.vue` component's script section. The named export `{ FullCalendar }` should be used.
• FullCalendar CSS

  import 'fullcalendar/dist/fullcalendar.css';

  Required since `v2.0.0`; the CSS is no longer automatically imported and must be manually added to your project.
• FullCalendar Locale

  import 'fullcalendar/dist/locale/fr';

  Imports specific language files for FullCalendar. Pair with `config: { locale: 'fr' }` prop.

Quickstart

Demonstrates global installation of `vue-full-calendar` for Vue 2, including manual CSS import, and basic usage with an array of events and custom calendar configuration.

import Vue from 'vue';
import FullCalendar from 'vue-full-calendar';
import 'fullcalendar/dist/fullcalendar.css';

Vue.use(FullCalendar);

new Vue({
  el: '#app',
  data() {
    return {
      events: [
        {
          title: 'All-Day Event',
          start: '2023-01-01'
        },
        {
          title: 'Long Event',
          start: '2023-01-07',
          end: '2023-01-10'
        },
        {
          groupId: 999,
          title: 'Repeating Event',
          start: '2023-01-09T16:00:00'
        },
        {
          title: 'Conference',
          start: '2023-01-11',
          end: '2023-01-13'
        }
      ],
      config: {
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true
      }
    };
  },
  template: `
    <div id="app">
      <full-calendar :events="events" :config="config"></full-calendar>
    </div>
  `,
});