Vue Simple Calendar is a flexible, themeable, and lightweight calendar component designed for Vue 3 applications. It focuses on displaying a traditional month-grid calendar, capable of showing scheduled activities, including multi-day items. The current stable version is 7.2.2. The project appears to have a consistent, active release cadence with several 7.x.x releases in recent times, indicating ongoing maintenance and development. Key differentiators include its small footprint with no external dependencies (like Moment.js or jQuery), a flexbox-based layout, and extensive customization options via Vue slots and CSS. It explicitly avoids complex features like an 'agenda' view, built-in AJAX, or item management interfaces, positioning itself as a display-centric component rather than a date picker or full-featured scheduling system. It also offers date range selection and supports various user events like clicks and drags.
npm install vue-simple-calendarVerified import paths — ran on the pinned version, not inferred.
Demonstrates how to install and integrate Vue Simple Calendar into a Vue 3 TypeScript component, displaying a basic calendar with sample events (including multi-day items) and handling date/item click events. It also includes basic styling imports and custom class usage.
Upgrade your project to Vue 3 and ensure your target browser compatibility aligns with modern evergreen browsers. If Vue 2/IE11 support is critical, revert to `vue-simple-calendar@5` but be aware that it will not receive updates or bug fixes.
If encountering TypeScript declaration issues, check the project's GitHub issues for potential workarounds or consider generating declaration files separately if your build process allows. You might need to add manual type declarations for missing types.
For mobile experiences, consider implementing alternative interaction patterns or disabling drag-and-drop functionality conditionally. Test thoroughly on target mobile devices to ensure a satisfactory user experience.
Ensure you have `import { Calendar } from 'vue-simple-calendar'` in your script setup or `<script>` block, and if not using `<script setup>`, ensure `Calendar` is listed in your component's `components: { Calendar }` option or globally registered with `app.component('Calendar', Calendar)`.Update your module import statements to use the ES Module syntax: `import { Calendar } from 'vue-simple-calendar'`.Ensure that the `items` prop is always bound to a JavaScript array, where each element conforms to the `ICalendarItem` interface or a compatible object structure.
No dependency data recorded yet.