IMPORTANT NOTICE:

This is a fork version of an amazing library v-calendar. It contains some customization from @pixelart7/v-calendar to suit my project needs. Mainly, this add support to showing Buddhist calendar year. I am highly recommend you to use the original package instead of this one.

---

VCalendar Plugin for Vue 3

Technologies Used:
Vuejs 3.0
Typescript
Rollup

Install Plugin

yarn add v-calendar@next

Use Plugin

Method 1: Use Globally

import { createApp } from 'vue';
import VCalendar from 'v-calendar';

// Method 1
import VCalendar from 'v-calendar';
// Create the app
createApp(App)
  // Use the plugin with optional defaults
  .use(VCalendar, {})
  // Mount the app
  .mount('#app');

<template>
  <v-calendar />
  <v-date-picker v-model="date" />
</template>

Method 2: Use Components Globally

import { createApp } from 'vue';
import { SetupCalendar, Calendar, DatePicker } from 'v-calendar';

// Create the app
createApp(App)
  // Setup the plugin with optional defaults
  .use(SetupCalendar, {})
  // Use the components
  .component('Calendar', Calendar)
  .component('DatePicker', DatePicker)
  // Mount the app
  .mount('#app');

<template>
  <Calendar />
  <DatePicker v-model="date" />
</template>

Method 3: Use Components As Needed

<template>
  <Calendar />
  <DatePicker v-model="date">
</template>

import { Calendar, DatePicker } from 'v-calendar';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}

Source setup

Please follow below mentioned step to run this project:

Clone the repo

git clone https://github.com/nathanreyes/v-calendar

// Move to directory
cd v-calendar

Install dependencies

yarn

Switch to /next branch

git checkout next

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Build Library

// ES
yarn build:es

// ES, CommonJS and IIFE
yarn build:lib

// ES, CommonJS, IIFE and CSS
yarn:build:lib_css

Lints and fixes files

yarn lint