Vue-based FullCalendar Component

1.0.9 · abandoned · verified Sun Apr 19

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.

Common errors

```
[Vue warn]: Unknown custom element: <full-calendar> - did you register the component correctly?
```
cause The `full-calendar` component has not been correctly registered globally or locally within your Vue component.

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') }`.
```
TypeError: Cannot read property '$on' of undefined at VueComponent.mounted (vue-fullcalendar.min.js:1:xxxx)
```
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.

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`.

Warnings

breaking 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.
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`.
gotcha 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.
Fix: Review the `props` and `events` documentation carefully to understand the limited feature set. If other views are required, an alternative library is necessary.
gotcha 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.
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.

Install

npm install vue-fullcalendar npm
yarn add vue-fullcalendar yarn
pnpm add vue-fullcalendar pnpm

Imports

fullCalendar
wrong:
```
const fullCalendar = require('vue-fullcalendar');
```
correct:
```
import fullCalendar from 'vue-fullcalendar';
```
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.
full-calendar
wrong:
```
Vue.component('FullCalendar', fullCalendar);
```
correct:
```
Vue.component('full-calendar', fullCalendar);
```
The component name 'full-calendar' is used in templates. Ensure correct casing during registration.

Quickstart

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`.

import Vue from 'vue';
import App from './App.vue';
import fullCalendar from 'vue-fullcalendar';

// Register globally
Vue.component('full-calendar', fullCalendar);

// Example Vue component usage (e.g., in App.vue)
const demoEvents = [
  {
    title: 'Birthday Party',
    start: '2016-08-25',
    cssClass: 'party-event' // Custom CSS class for styling
  },
  {
    title: 'Team Meeting',
    start: '2016-08-26',
    end: '2016-08-27',
    cssClass: ['work-event', 'important']
  }
];

export default {
  name: 'App',
  data() {
    return {
      fcEvents: demoEvents
    };
  },
  methods: {
    handleEventClick(event, jsEvent, pos) {
      console.log('Event clicked:', event.title, jsEvent, pos);
      // You can implement custom logic here
    },
    handleChangeMonth(start, end, current) {
      console.log('Month changed:', start, end, current);
      // Fetch new events for the displayed month
    }
  },
  template: `
    <div id="app">
      <full-calendar
        :events="fcEvents"
        lang="en"
        @eventClick="handleEventClick"
        @changeMonth="handleChangeMonth"
      ></full-calendar>
    </div>
  `
};

// Mount Vue instance
new Vue({
  el: '#app',
  render: h => h(App)
});

view raw JSON →