{"id":15269,"library":"vue-full-calendar","title":"Vue FullCalendar Wrapper","description":"vue-full-calendar is a Vue.js 2.x component designed to integrate the FullCalendar v3.x JavaScript calendar library into Vue applications. Its current latest version is 2.8.1-0. The package appears to be abandoned, with the last code updates occurring in early 2019, indicating no ongoing development, bug fixes, or compatibility updates for newer Vue or FullCalendar versions. It simplifies the setup of FullCalendar by providing a `<full-calendar>` component that accepts event data and various configuration options via props. A key differentiator is its handling of FullCalendar's underlying jQuery dependency, which it manages automatically if jQuery is not globally present. Since version 2.0, users are required to manually import FullCalendar's CSS and any desired locale files into their projects.","status":"abandoned","version":"2.8.1-0","language":"javascript","source_language":"en","source_url":"https://github.com/CroudSupport/vue-fullcalendar","tags":["javascript","vue","fullcalendar","calendar","js"],"install":[{"cmd":"npm install vue-full-calendar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-full-calendar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-full-calendar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core calendar library that this package wraps; locked to v3.*.* since v2.4.0.","package":"fullcalendar","optional":false},{"reason":"A dependency of FullCalendar itself, though vue-full-calendar states it handles this automatically if not detected globally.","package":"jquery","optional":true}],"imports":[{"note":"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`.","wrong":"const FullCalendar = require('vue-full-calendar'); // Incorrect since v2.1.0","symbol":"FullCalendar (global plugin)","correct":"import FullCalendar from 'vue-full-calendar';\nVue.use(FullCalendar);"},{"note":"Used for local component registration within a single `.vue` component's script section. The named export `{ FullCalendar }` should be used.","wrong":"import FullCalendar from 'vue-full-calendar'; // This imports the default export, not the named export for local use.","symbol":"FullCalendar (local component)","correct":"import { FullCalendar } from 'vue-full-calendar';"},{"note":"Required since `v2.0.0`; the CSS is no longer automatically imported and must be manually added to your project.","wrong":null,"symbol":"FullCalendar CSS","correct":"import 'fullcalendar/dist/fullcalendar.css';"},{"note":"Imports specific language files for FullCalendar. Pair with `config: { locale: 'fr' }` prop.","wrong":null,"symbol":"FullCalendar Locale","correct":"import 'fullcalendar/dist/locale/fr';"}],"quickstart":{"code":"import Vue from 'vue';\nimport FullCalendar from 'vue-full-calendar';\nimport 'fullcalendar/dist/fullcalendar.css';\n\nVue.use(FullCalendar);\n\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      events: [\n        {\n          title: 'All-Day Event',\n          start: '2023-01-01'\n        },\n        {\n          title: 'Long Event',\n          start: '2023-01-07',\n          end: '2023-01-10'\n        },\n        {\n          groupId: 999,\n          title: 'Repeating Event',\n          start: '2023-01-09T16:00:00'\n        },\n        {\n          title: 'Conference',\n          start: '2023-01-11',\n          end: '2023-01-13'\n        }\n      ],\n      config: {\n        header: {\n          left: 'prev,next today',\n          center: 'title',\n          right: 'month,agendaWeek,agendaDay'\n        },\n        editable: true,\n        droppable: true\n      }\n    };\n  },\n  template: `\n    <div id=\"app\">\n      <full-calendar :events=\"events\" :config=\"config\"></full-calendar>\n    </div>\n  `,\n});","lang":"javascript","description":"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."},"warnings":[{"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).","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure all imports for `vue-full-calendar` use `import ... from 'vue-full-calendar'` syntax, not `const ... = require('vue-full-calendar')`.","message":"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.","severity":"breaking","affected_versions":">=2.1.0"},{"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.","message":"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`.","severity":"gotcha","affected_versions":">=0.0.4"},{"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.","message":"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.","severity":"gotcha","affected_versions":"*"},{"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.","message":"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.","severity":"breaking","affected_versions":">=2.4.0"},{"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`.","message":"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.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","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.","error":"Module not found: Error: Can't resolve 'vue-full-calendar' in [path]"},{"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.","cause":"Vue is not globally available when trying to call `Vue.use(FullCalendar)` or the `Vue` import is missing from the file.","error":"TypeError: Cannot read properties of undefined (reading 'use') or 'Vue is not defined'"},{"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.","cause":"The FullCalendar CSS file is not being loaded. Since `vue-full-calendar` v2.0.0, automatic CSS import was removed, requiring manual inclusion.","error":"Calendar displays as unstyled text, a basic grid, or is missing visual elements."},{"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.","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.","error":"this.$refs.calendar.fireMethod is not a function"},{"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.","cause":"The `full-calendar` component has not been correctly registered, either globally via `Vue.use()` or locally within a component's `components` option.","error":"ReferenceError: FullCalendar is not defined when using <full-calendar> component"}],"ecosystem":"npm"}