Simple Vue Component To Show Calendar With Events

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:

Simple Vue Component To Show Calendar With Events

Changelog:

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

Download Details:

Author: richardtallent

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

Add Comment