{"id":12479,"library":"vue-fullcalendar","title":"Vue-based FullCalendar Component","description":"The `vue-fullcalendar` package offers a pure Vue.js calendar component, specifically designed for Vue 2 applications. Unlike its inspiration, FullCalendar.io, it operates without the need for jQuery or the original FullCalendar.js library, making it a lightweight, Vue-native alternative. The current stable version is 1.0.9, which was last updated in July 2017. The project appears to be abandoned, with no significant updates or commits since late 2017, meaning it does not offer support for newer Vue versions (Vue 3+) or modern JavaScript ecosystem features. Its key differentiators include being a standalone Vue component and its minimal dependencies, though it is limited to month view only and is not a feature-for-feature clone of FullCalendar.io. Users should proceed with caution, understanding the implications of an unmaintained library.","status":"abandoned","version":"1.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/Wanderxx/vue-fullcalendar","tags":["javascript","vue","fullcalendar"],"install":[{"cmd":"npm install vue-fullcalendar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-fullcalendar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-fullcalendar","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"This is a Vue.js component and requires Vue to be present as a peer dependency at runtime.","package":"vue","optional":false}],"imports":[{"note":"Primary way to import for global registration in modern Vue 2 setups, although CJS `require` was also common for local components at the time of its release.","wrong":"const fullCalendar = require('vue-fullcalendar');","symbol":"fullCalendar","correct":"import fullCalendar from 'vue-fullcalendar';"},{"note":"The component name 'full-calendar' is used in templates. Ensure correct casing during registration.","wrong":"Vue.component('FullCalendar', fullCalendar);","symbol":"full-calendar","correct":"Vue.component('full-calendar', fullCalendar);"}],"quickstart":{"code":"import Vue from 'vue';\nimport App from './App.vue';\nimport fullCalendar from 'vue-fullcalendar';\n\n// Register globally\nVue.component('full-calendar', fullCalendar);\n\n// Example Vue component usage (e.g., in App.vue)\nconst demoEvents = [\n  {\n    title: 'Birthday Party',\n    start: '2016-08-25',\n    cssClass: 'party-event' // Custom CSS class for styling\n  },\n  {\n    title: 'Team Meeting',\n    start: '2016-08-26',\n    end: '2016-08-27',\n    cssClass: ['work-event', 'important']\n  }\n];\n\nexport default {\n  name: 'App',\n  data() {\n    return {\n      fcEvents: demoEvents\n    };\n  },\n  methods: {\n    handleEventClick(event, jsEvent, pos) {\n      console.log('Event clicked:', event.title, jsEvent, pos);\n      // You can implement custom logic here\n    },\n    handleChangeMonth(start, end, current) {\n      console.log('Month changed:', start, end, current);\n      // Fetch new events for the displayed month\n    }\n  },\n  template: `\n    <div id=\"app\">\n      <full-calendar\n        :events=\"fcEvents\"\n        lang=\"en\"\n        @eventClick=\"handleEventClick\"\n        @changeMonth=\"handleChangeMonth\"\n      ></full-calendar>\n    </div>\n  `\n};\n\n// Mount Vue instance\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});","lang":"javascript","description":"This quickstart demonstrates how to globally register the `full-calendar` component and use it within a Vue 2 application, including passing event data and handling emitted events like `eventClick` and `changeMonth`."},"warnings":[{"fix":"For Vue 2 projects, `npm install vue-fullcalendar@latest --save`. For legacy Vue 1 projects, use `npm install vue-fullcalendar@0.1.11 --save`.","message":"The package has distinct versions for Vue 1 and Vue 2. Installing `@latest` (v1.0.9) targets Vue 2, while `0.1.11` is for Vue 1. Attempting to use the wrong version with your Vue installation will result in critical errors.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"Review the `props` and `events` documentation carefully to understand the limited feature set. If other views are required, an alternative library is necessary.","message":"This component only supports month view, unlike the original FullCalendar.io which offers various views (day, week, agenda). It is not a feature-for-feature clone.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consider migrating to a more actively maintained calendar solution for Vue 3+ projects. For Vue 2 projects, be aware of potential compatibility issues with newer Node.js versions or build environments.","message":"The `vue-fullcalendar` project appears to be abandoned, with no significant commits or updates since late 2017. This means it lacks support for Vue 3+, modern build tooling (e.g., Vite), and will not receive security patches, bug fixes, or new features.","severity":"gotcha","affected_versions":">=1.0.9"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `Vue.component('full-calendar', fullCalendar)` in your main entry file for global registration, or include it in the `components` option of your Vue component: `components: { 'full-calendar': require('vue-fullcalendar') }`.","cause":"The `full-calendar` component has not been correctly registered globally or locally within your Vue component.","error":"[Vue warn]: Unknown custom element: <full-calendar> - did you register the component correctly?"},{"fix":"Ensure you have installed the Vue 2-compatible version: `npm install vue-fullcalendar@latest --save`. If using Vue 1, explicitly install `vue-fullcalendar@0.1.11`.","cause":"This error typically occurs when using a Vue 1-compatible version of the package with a Vue 2 application, as the `$on` and `$dispatch` event system was replaced in Vue 2.","error":"TypeError: Cannot read property '$on' of undefined at VueComponent.mounted (vue-fullcalendar.min.js:1:xxxx)"}],"ecosystem":"npm"}