{"id":12577,"library":"vue-simple-calendar","title":"Vue Simple Calendar","description":"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.","status":"active","version":"7.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/richardtallent/vue-simple-calendar","tags":["javascript","typescript"],"install":[{"cmd":"npm install vue-simple-calendar","lang":"bash","label":"npm"},{"cmd":"yarn add vue-simple-calendar","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-simple-calendar","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary calendar component for Vue 3. It's often registered as `<Calendar>` in your application or component's `components` option.","wrong":"const Calendar = require('vue-simple-calendar')","symbol":"Calendar","correct":"import { Calendar } from 'vue-simple-calendar'"},{"note":"Type definition for calendar items, which is essential for ensuring type safety and autocomplete in TypeScript projects. Always use `import type` for interfaces.","wrong":"import { ICalendarItem } from 'vue-simple-calendar'","symbol":"ICalendarItem","correct":"import type { ICalendarItem } from 'vue-simple-calendar'"},{"note":"An alternative named export for the main component. While `Calendar` is often preferred for usage brevity, `CalendarView` is also available and points to the same component definition.","wrong":"import CalendarView from 'vue-simple-calendar'","symbol":"CalendarView","correct":"import { CalendarView } from 'vue-simple-calendar'"}],"quickstart":{"code":"<!-- src/App.vue -->\n<template>\n  <div id=\"app\">\n    <h1>My Event Calendar</h1>\n    <div style=\"width: 80%; margin: 0 auto;\">\n      <Calendar\n        :showDate=\"currentDate\"\n        :items=\"calendarItems\"\n        :startingDayOfWeek=\"1\"\n        @clickDate=\"onClickDate\"\n        @clickItem=\"onClickItem\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Calendar, type ICalendarItem } from 'vue-simple-calendar';\nimport 'vue-simple-calendar/dist/style.css';\nimport 'vue-simple-calendar/dist/css/default.css'; // Or your custom theme CSS\n\nconst currentDate = ref(new Date());\n\nconst calendarItems: ICalendarItem[] = reactive([\n  { id: '1', startDate: new Date(2026, 3, 10), endDate: new Date(2026, 3, 12), title: 'Multi-day Event', class: 'custom-event-class' },\n  { id: '2', startDate: new Date(2026, 3, 15, 9, 0), endDate: new Date(2026, 3, 15, 10, 30), title: 'Meeting (9:00 AM)' },\n  { id: '3', startDate: new Date(2026, 3, 20), title: 'Project Deadline' },\n  { id: '4', startDate: new Date(2026, 3, 25), endDate: new Date(2026, 4, 1), title: 'Week-long Project', class: 'long-project' }\n]);\n\nfunction onClickDate(date: Date) {\n  console.log('Clicked date:', date.toLocaleDateString());\n}\n\nfunction onClickItem(item: ICalendarItem) {\n  console.log('Clicked item:', item.title, 'on', item.startDate.toLocaleDateString());\n}\n</script>\n\n<style>\n/* Basic styling, replace with your custom theme */\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n\n/* Custom classes for calendar items */\n.custom-event-class {\n  background-color: #a7f3d0;\n  color: #065f46;\n  border-radius: 4px;\n  padding: 2px 4px;\n}\n\n.long-project {\n  background-color: #bfdbfe;\n  color: #1e40af;\n  border-radius: 4px;\n  padding: 2px 4px;\n  opacity: 0.9;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Version 6.0 introduced significant breaking changes, migrating the component to Vue 3 and Vite, and explicitly dropping support for Internet Explorer 11. Users on Vue 2 or those requiring IE11 compatibility must remain on `vue-simple-calendar@5`, which is no longer actively maintained.","severity":"breaking","affected_versions":">=6.0"},{"fix":"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.","message":"The library developer notes difficulties in configuring Vite to both emit TypeScript declaration files (`.d.ts`) during the build and maintain Hot Module Replacement (HMR) for development. This could lead to an inconsistent TypeScript experience or missing type definitions in specific development environments.","severity":"gotcha","affected_versions":">=6.0"},{"fix":"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.","message":"Vue Simple Calendar is primarily designed for desktop web applications. While it may function on mobile devices, its utility might be limited due to screen resolution constraints. Crucially, drag-and-drop features are exclusively supported on desktop browsers and do not function on touch devices.","severity":"gotcha","affected_versions":">=6.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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)`.","cause":"The `Calendar` component was not correctly imported and registered in your Vue application or a specific component's `components` option, preventing Vue from rendering it.","error":"[Vue warn]: Failed to resolve component: Calendar"},{"fix":"Update your module import statements to use the ES Module syntax: `import { Calendar } from 'vue-simple-calendar'`.","cause":"This error occurs when attempting to use the CommonJS `require()` syntax to import `vue-simple-calendar` within a modern Vue 3 project, which typically utilizes ES Modules (ESM).","error":"ReferenceError: require is not defined"},{"fix":"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.","cause":"The `items` prop, which expects an array of calendar item objects, was provided with a JavaScript object instead.","error":"TypeError: Invalid prop: type check failed for prop \"items\". Expected Array, got Object"}],"ecosystem":"npm"}