{"id":12414,"library":"vue-cal","title":"Vue Cal","description":"Vue Cal is a lightweight and highly customizable full calendar component for Vue.js applications, currently in its stable version 4.10.2. A key differentiator is its 'no dependency' philosophy, aiming for minimal footprint and maximum flexibility. It offers various views (day, week, month, year), robust event management including adding, editing, dragging, and resizing events, and extensive customization options through slots and CSS. While version 4.x is considered stable and suitable for production, it is no longer actively maintained. Development has shifted to version 5, which is a complete rewrite available under the `@next` tag and housed in a new repository. Users should be aware that future updates and new features will be for v5, and migrating from v4 to v5 will involve breaking changes due to its rebuilt architecture. The project emphasizes separating logic and styles, providing minimal CSS for easy overriding.","status":"maintenance","version":"4.10.2","language":"javascript","source_language":"en","source_url":"https://github.com/antoniandre/vue-cal-v4","tags":["javascript","vuecal","vue cal","vue calendar","full calendar","calendar events","vue","vuejs","vue 3"],"install":[{"cmd":"npm install vue-cal","lang":"bash","label":"npm"},{"cmd":"yarn add vue-cal","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-cal","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js framework integration. Vue Cal v4 requires Vue 3.2.0 or higher.","package":"vue","optional":false}],"imports":[{"note":"Vue Cal is a Vue component designed for ESM imports. CommonJS `require` syntax is not supported for component imports in modern Vue 3 setups.","wrong":"const VueCal = require('vue-cal')","symbol":"VueCal","correct":"import VueCal from 'vue-cal'"},{"note":"The compiled CSS is required for the calendar's basic styling. Raw SCSS is not exposed for direct import.","wrong":"import 'vue-cal/dist/vuecal.scss'","symbol":"styles","correct":"import 'vue-cal/dist/vuecal.css'"},{"note":"For internationalization, import the desired language file. This example imports French (`fr.js`). Other languages are available in `dist/i18n`.","symbol":"Localized Messages","correct":"import 'vue-cal/dist/i18n/fr.js'"}],"quickstart":{"code":"<template>\n  <div class=\"calendar-container\">\n    <VueCal \n      class=\"vuecal--blue-theme\"\n      :selected-date=\"new Date()\"\n      :time-step=\"30\"\n      :disable-views=\"['years', 'year']\"\n      :events=\"events\"\n      @ready=\"onCalendarReady\"\n      @event-create=\"onEventCreate\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport VueCal from 'vue-cal';\nimport 'vue-cal/dist/vuecal.css';\n\nconst events = ref([\n  {\n    start: new Date(new Date().setHours(10, 0, 0, 0)).toISOString(),\n    end: new Date(new Date().setHours(11, 30, 0, 0)).toISOString(),\n    title: 'Meeting with John',\n    content: 'Discuss project roadmap.',\n    class: 'leisure'\n  },\n  {\n    start: new Date(new Date().setHours(14, 0, 0, 0)).toISOString(),\n    end: new Date(new Date().setHours(15, 0, 0, 0)).toISOString(),\n    title: 'Team Sync',\n    content: 'Weekly team catch-up.',\n    class: 'work'\n  }\n]);\n\nfunction onCalendarReady() {\n  console.log('Vue Cal is ready!');\n}\n\nfunction onEventCreate(event: any) {\n  console.log('Event created:', event);\n  // In a real app, you'd typically add the event to your `events` array or backend.\n}\n</script>\n\n<style>\n.calendar-container {\n  height: 600px; /* Crucial: Vue Cal needs a defined height */\n  max-width: 900px;\n  margin: auto;\n}\n.vuecal__event.leisure {\n  background-color: #a3c4f3;\n  border: 1px solid #75a7f0;\n  color: #fff;\n}\n.vuecal__event.work {\n  background-color: #90ee90;\n  border: 1px solid #6cdd6c;\n  color: #fff;\n}\n</style>\n","lang":"typescript","description":"This quickstart demonstrates a basic Vue Cal setup in a Vue 3 Composition API component, including event data, a custom theme, and essential styling for proper display."},"warnings":[{"fix":"For new projects, consider `npm i vue-cal@next` and refer to the v5 documentation. For existing v4 projects, plan for a migration path by reviewing the v5 breaking changes if upgrades are desired.","message":"Vue Cal v4.x is no longer actively maintained. While stable, new features and ongoing support have shifted to Vue Cal v5. Users planning long-term projects or requiring the latest features should consider migrating to v5, which is a complete rewrite and introduces breaking changes.","severity":"breaking","affected_versions":">=4.10.0"},{"fix":"Ensure the `<vue-cal>` component or its direct parent has a CSS `height` property defined (e.g., `height: 600px;` or `height: 100%;` if the parent has a height).","message":"Vue Cal requires its parent container or the component itself to have a defined height. If no height is set, the calendar will not render correctly (e.g., appear with zero height).","severity":"gotcha","affected_versions":">=1.0"},{"fix":"For Vue 2 projects, remain on the `legacy` branch but be aware of no future updates. For new projects or upgrades, use Vue 3 with `vue-cal` v4.x or v5.x.","message":"Vue Cal's legacy branch for Vue 2 support (`npm i vue-cal@legacy`) has reached End-Of-Life and will not receive further updates or support.","severity":"deprecated","affected_versions":"<4.0"},{"fix":"Customize appearance by adding CSS classes to events or the `<vue-cal>` component and targeting those classes in your stylesheet. Refer to the documentation for available CSS variables and thematic classes (e.g., `vuecal--blue-theme`).","message":"The calendar's default CSS is minimal and intentionally not styled with `!important` flags, encouraging users to easily override styles. Direct modification of the component's internal styles can lead to unexpected behavior during updates.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Always explicitly parse date strings (e.g., `new Date(event.originalEvent.start)`) if you expect `Date` objects from event payloads, particularly for properties like `start` or `end`.","message":"When handling events, especially during drag-and-drop operations, the `originalEvent` property in emitted event objects (e.g., `@event-drop`) might return date values as strings instead of `Date` objects, requiring manual parsing.","severity":"gotcha","affected_versions":">=4.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `vue-cal` is installed (`npm install vue-cal` or `yarn add vue-cal`). Verify the import statement `import VueCal from 'vue-cal'` is correct and that your bundler supports ESM.","cause":"The `vue-cal` package is not correctly installed, or the import path is incorrect, or bundler configuration issue.","error":"Failed to resolve module specifier \"vue-cal\" (or similar 'module not found' error)"},{"fix":"Apply a `height` style to the `<vue-cal>` component or its immediate parent element (e.g., `<div style=\"height: 600px;\"><VueCal /></div>` or `<VueCal style=\"height: 600px;\" />`).","cause":"Vue Cal needs a defined height from its parent container or directly on the component to render properly.","error":"The calendar component renders with zero height or is not visible."},{"fix":"Switch to ES module imports: `import VueCal from 'vue-cal';` and ensure your project's build setup (e.g., `package.json` type, bundler config) supports ES Modules.","cause":"Attempting to use `require('vue-cal')` in a modern Vue 3 project, which primarily uses ES Modules.","error":"Uncaught SyntaxError: Cannot use import statement outside a module (or similar CommonJS errors)"},{"fix":"Refer to the `vue-cal` documentation or its TypeScript declaration files (`.d.ts`) for the correct interface for event objects and component props. Ensure all required properties are present and correctly typed.","cause":"When using TypeScript, event objects or `VueCal` props are not correctly typed according to `vue-cal`'s declarations.","error":"Type '...' is not assignable to type 'VueCalEvent'. Property '...' is missing in type '...'."}],"ecosystem":"npm"}