Skip to content

mrjavadseydi/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

Releases

No releases published

Packages

No packages published

Languages

  • Vue 46.6%
  • JavaScript 30.7%
  • CSS 12.5%
  • TypeScript 8.8%
  • HTML 1.4%