An Elegant Calendar And Datepicker Plugin for Vue

v-calendar is a neat calendar and date picker plugin with events for Vuejs.

Version 3 brings a host of feature improvements and bug fixes, including weekly views, a simplified time picker, recurring date ranges and time rules, and performance improvements.

Theme

VCalendar provides an attractive default design based on simple colors and dark mode. Custom styling with class overrides and css variables is also available.

Layouts

Calendars may be configured to adapt to multiple layouts. For example, weekly calendars can be used in restricted environments. Also, calendars can also be configured for multi-row and column formats.

Attributes

Decorate calendars with themes on specific dates or date ranges. It can even be shown to repeat date patterns.

Date Picker

VDatePicker is a feature-rich date picker component implemented as a wrapper for VCalendar, which can be easily linked to a variety of date formats.

Must Read: JavaScript Library Generate Event Calendar Links For Google, Yahoo, And Outlook | Calendar Link

Table of Contents

How to make use of it:

1. Install and download via npm:

npm install v-calendar

2. Import and use VCalendar.

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

// Use v-calendar & v-date-picker components
Vue.use(VCalendar, {
  componentPrefix: 'vc',  // Use <vc-calendar /> instead of <v-calendar />
  ...,                // ...other defaults
});

import Calendar from 'v-calendar/lib/components/calendar.umd'
import DatePicker from 'v-calendar/lib/components/date-picker.umd'

// Register components in your 'main.js'
Vue.component('calendar', Calendar)
Vue.component('date-picker', DatePicker)

// Or just use in separate component
export default {
  components: {
    Calendar,
    DatePicker
  }
  ...
}

3. If you still want to provide default settings for plug-ins, contact setupCalendar us before using any plug-ins.

import { setupCalendar} from 'v-calendar'

// main.js
setupCalendar({
  componentPrefix: 'vc',
  ...,
});

API

Props

Must Read: [ES6] Simple Pure JavaScript Calendar | rolyart-calendar

Name	Type	Default
mode	‘date’ \| ‘dateTime’ \| ‘time’	‘date’
model-value	DatePickerDate	null
rules	‘auto’ \| DatePartsRules	undefined
is-required	boolean	false
is24hr	boolean	true
hide-time-header	boolean	false
time-accuracy	number	2
update-on-input	boolean	true
input-debounce	number	1000
popover	true \| Partial<PopoverOptions>	true
drag-attribute	AttributeConfig	undefined
select-attribute	AttibuteConfig	undefined

Events

Must Read: Simple Javascript Calendar With Glassmorphism User Interface

Event	Parameter Type
update:modelValue	DatePickerDate
drag	SimpleDateRange \| null
popover-will-show	HTMLElement
popover-did-show	HTMLElement
popover-will-hide	HTMLElement
popover-did-hide	HTMLElement