Registry / web-framework / vue-full-calendar

vue-full-calendar

library2.8.1-0jsnpmunverified

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.

web-framework

npm install vue-full-calendar

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-FULL-CALENDAR

vue-full-calendar

web-frameworkjavascriptv2.8.1-0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FullCalendar (global plugin)

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

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

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)

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

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

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.

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> `, });

Debug

Known issues

breakingAs 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).

affects: >=2.0.0

breakingIn `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')`.

affects: >=2.1.0

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

affects: >=0.0.4

gotchaFullCalendar, 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.

affects: *

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

affects: >=2.4.0

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

affects: *

Errors

Common errors & fixes

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

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'

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.

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

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

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.

Upgrade

Version history

2.8.1-0latest on npm

Audit

Dependencies

fullcalendarrequiredCore calendar library that this package wraps; locked to v3.*.* since v2.4.0.

jqueryoptionalA dependency of FullCalendar itself, though vue-full-calendar states it handles this automatically if not detected globally.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/CroudSupport/vue-fullcalendar ↗

packagehttps://www.npmjs.com/package/vue-full-calendar ↗