A simple Vue component to show a month-grid calendar with events.
- Shows a traditional month-grid calendar.
- Can show “events,” including multi-day events.
- Optional event drag/drop support.
- Localized automatically (overridable).
- 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.
- Add enableHtmlTitles option to make it easier to sanitize user-provided content in calendar item title values
- Minor code cleanup
- 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.
- Adjust module export for style.css
- Improve TS use and support
- Fix scroll bar visibility issue
- Fix tooltips
- Update various dependencies
- 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
- Improved TS
- Update dependencies
- 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
- Pass URL to normalized items
- Updated dependencies
- Dependency updates
- Fixed where not returning CalendarMath in calendar view component led to IDE warnings in template
- Minor ARIA fixes.
- Just minor dependency updates
- 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
Live Demo: https://www.tallent.us/vue-simple-calendar/
Download Link: https://github.com/richardtallent/vue-simple-calendar/archive/master.zip
Official Website: https://github.com/richardtallent/vue-simple-calendar
Install & Download:
$ npm install vue-simple-calendar --save