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.
npm install vue-calVerified import paths — ran on the pinned version, not inferred.
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.
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.
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).
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.
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`).
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`.
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.
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;" />`).
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.
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.