Simple Vue Component To Show Calendar With Events

Install & Download:

$ npm install vue-simple-calendar --save

Description:

A simple Vue component to show a month-grid calendar with events.

Features:

• Shows a traditional month-grid calendar.
• Can show “events,” including multi-day events.
• Optional event drag/drop support.
• Localized automatically (overridable).
• Lightweight!
• Supprots both Vue.js 2 and Vue.js 3.
• Flexbox layout (look ma, no tables!).
• No external dependencies (Moment, JQuery, etc.).
• Emphasizes customization via plain ol’ CSS.
• User events (clicks, drags, etc.) are exposed as Vue events.

Preview:

Changelog:

v7.1.0 (02/03/2024)

• Add name of the month on the 1st of the month, unless showing a single month. Defaults to true, but configurable and styleable.

v7.0.1 (01/18/2024)

• Fix ESM filename references
• Bump dependencies

v7.0.0 (01/14/2024)

• Changed the week number computation to follow ISO 8601
• All slots now use kebab-case, which is the norm for Vue 3
• Fix type declared for events click-item, item-mouseenter, item-mouseleave, and drag-start events (they send the normalized item, not the original)
• Fixed GCal theme to not hide the time of day due to low contrast on gray events

v6.3.1 (02/12/2023)

• Update

v6.3.0 (01/27/2023)

• Add enableHtmlTitles option to make it easier to sanitize user-provided content in calendar item title values

v6.2.0 (10/17/2022)

• Bugfixes
• Minor code cleanup

v6.2.0 (10/16/2022)

• The payload for the events date-selection, date-selection-start, and date-selection-finish now pass the DOM event as a second parameter to your event handler rather than as the third element of the array. This is more consistent with other events, and makes typing for the event handlers easier.

v6.1.0 (10/16/2022)

• Adjust module export for style.css
• Improve TS use and support
• Fix scroll bar visibility issue
• Fix tooltips
• Update various dependencies

v6.0.5/6/7 (08/13/2022)

• Added optional Ukrainian calendar CSS file.
• Used said calendar to test and demo a new CSS-only feature: tagging holidays with hoverable tooltips.
• Added optional tooltip to calendar items
• Bugfixed
• Improved TS
• Update dependencies

v6.0.4 (02/27/2022)

• Mobile-compatible drag and drop
• Handles to drag events to make them longer or shorter
• Add month name to the 1st of the month when viewing multiple months (probably using classes to hide/show)
• Future: Full GCal theme

v6.0.3 (11/20/2021)

• Pass URL to normalized items
• Updated dependencies

v6.0.2 (07/11/2021)

• Dependency updates
• Fixed where not returning CalendarMath in calendar view component led to IDE warnings in template
• Minor ARIA fixes.

v6.0.1 (04/27/2021)

• Just minor dependency updates

v6.0.0 (03/27/2021)

• Upgraded to Vue 3. This shouldn’t cause an issue for people using it with Vue 2.
• Migrated to TypeScript. Needed an excuse to learn it.
• Now using Vite instead of vue-cli for the development and built process.
• CalendarMathMixin is now CalendarMath, a normal class
• Added St. Valentine’s Day to the US Traditional Holiday theme

09/05/2020

• v5.0.0