Skip to content

An elegant calendar and datepicker plugin for Vue.

License

Notifications You must be signed in to change notification settings

Createch-Corp/v-calendar

 
 

Repository files navigation

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

⚠️ As of v3.0.0-alpha.7, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.

import 'v-calendar/dist/style.css';

Method 1: Use Globally

import VCalendar from 'v-calendar';

// Use plugin with defaults
app.use(VCalendar, {})
<!-- Component.vue template -->
<template>
  <v-calendar />
  <v-date-picker v-model="date" />
</template>

Method 2: Use Components Globally

// main.js
import { SetupCalendar, Calendar, DatePicker } from 'v-calendar';

// Setup plugin for defaults or `$screens` (optional)
app.use(SetupCalendar, {})
// Use the components
app.component('Calendar', Calendar)
app.component('DatePicker', DatePicker)
<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date" />
</template>

Method 3: Use Components As Needed

// main.js
import { SetupCalendar } from 'v-calendar';

// Setup plugin for defaults or `$screens` (optional)
app.use(SetupCalendar, {})
<!-- Component.vue template -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>
// Component.vue script
import { Calendar, DatePicker } from 'v-calendar';

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

Source setup

Please follow below mentioned steps to clone and build 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

Build Library

# ES, CommonJS, IIFE and CSS
yarn build

Lint and fix files

yarn lint

About

An elegant calendar and datepicker plugin for Vue.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 82.0%
  • JavaScript 8.9%
  • Vue 8.2%
  • CSS 0.9%