Vue.js version 2.5+ is required.


1. Install via npm

npm install v-calendar@next

2. Import and use VCalendar

This is the most common use case.

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

2B. Components Method

You can also just import components separately.

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: {

If you would still like to provide plugin defaults, call setupCalendar before using any components.

import { setupCalendar} from 'v-calendar'

// main.js
  componentPrefix: 'vc',


    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
    <!-- IMPORTANT: No CSS link needed as of v1 Beta (@next) - It's all inlined -->
    <!-- Pre v1.0.0 versions need the minified css -->
    <!-- <link rel='stylesheet' href='https://unpkg.com/v-calendar/lib/v-calendar.min.css'> -->
    <div id='app'>
      <v-date-picker :mode='mode' v-model='selectedDate' />

    <!-- 1. Link Vue Javascript -->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>

    <!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
    <!-- @next v1 Beta  -->
    <script src='https://unpkg.com/v-calendar@next'></script>
    <!-- Latest stable (Right now, this is very different from the v1 Beta)-->
    <!-- <script src='https://unpkg.com/v-calendar'></script> -->
    <!-- Hardcoded version -->
    <!-- <script src='https://unpkg.com/v-calendar@1.0.0-beta.14/lib/v-calendar.umd.min.js'></script> -->

    <!--3. Create the Vue instance-->
      new Vue({
        el: '#app',
        data: {
          // Data used by the date picker
          mode: 'single',
          selectedDate: null,