JSPM

  • Created
  • Published
  • Downloads 199599
  • Score
    100M100P100Q159300F
  • License MIT

A clean and extendable plugin for building simple attributed calendars in Vue.js.

Package Exports

  • v-calendar

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

VCalendar Plugin for Vue 3

A Vue plugin for for attributed calendars date pickers using Vue 3, Typescript and 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

Compile and hot-reload for development

yarn serve

Compile and minify 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

Lint and fix files

yarn lint