Home
Date & Time
Simple Vue Component To Show Calendar With Events

Simple Vue Component To Show Calendar With Events

richardtallent Last Updated: 7 months ago

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.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

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

Related Posts

Tags:

Add Comment