A Light-weight And Simple To Use Calendar Plugin For VueJS – v-calendar

Category: Vue.js VueJS Date & Time | July 26, 2021
Author: nathanreyes
Official Page: Go to website
Last Update: July 26, 2021
License: MIT

calendar for vuejs


v-calendar is a calendar plugin for VueJS and it is light-weight and dependency free plugin, which means, you don’t need to require another plugin in order to run this component.

v-calendar has many in-built features, such as:

  • Show highlights, dots, bars and custom popovers.
  • Week Numbers (Default Left Inside, ISO, Right and Outside Options).
  • Responsive multi-row and column layouts.
  • Supports dark mode.
  • Date pickers (Single date, Date ranges).
  • Time selection and timezone.
  • Popovers w/ Custom Slots.
  • Custom calendars (calendars using scoped slots).

How can I use it?

1. Install the calendar plugin with npm.

npm i --save v-calendar

2. Import the required component, like this.

import Vue from 'vue';
import VCalendar from 'v-calendar';

3. Register the component.


4. Create the template where the calendar will be displayed.

<v-calendar />