JSPM

@cobre-forked/v-calendar

3.0.0-alpha.7
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q19942F
  • License MIT

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

Package Exports

  • @cobre-forked/v-calendar
  • @cobre-forked/v-calendar/lib/cjs/index.js
  • @cobre-forked/v-calendar/lib/esm/index.js

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 (@cobre-forked/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

WARNING

This repository was forked from https://github.com/nathanreyes/v-calendar to add patches for specific scenarios and make experiments, please consider to check the original repository first.

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