Evo Calendar for Vue 3

A calendar and date picker plugin for Vue.js.

Vue.js 3.2+, Popper.js 2.0+ are required.

Install Plugin

NPM

npm install @evomark/evo-calendar @popperjs/core

Yarn

yarn add @evomark/evo-calendar @popperjs/core

Use Plugin

⚠️ All installation methods require manual import of component styles. This is due to Vite build restrictions in library mode.

import '@evomark/evo-calendar/style.css';

Method 1: Use Globally

import { InstallEvoCalendar } from '@evomark/evo-calendar';
import '@evomark/evo-calendar/style.css';

// Use plugin with optional defaults
app.use(InstallEvoCalendar, {})

<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>

Method 2: Use Components Globally

// main.js
import { setupCalendar, Calendar, DatePicker } from '@evomark/evo-calendar';
import '@evomark/evo-calendar/style.css';

// Use plugin defaults (optional)
app.use(setupCalendar, {})

// Use the components
app.component('VCalendar', Calendar)
app.component('VDatePicker', DatePicker)

<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>

Method 3: Use Components As Needed

// main.js
import { setupCalendar } from '@evomark/evo-calendar';

// Use calendar defaults (optional)
app.use(setupCalendar, {})

<!-- MyComponent.vue -->
<template>
  <EvoCalendar />
  <EvoDatePicker v-model="date">
</template>

<script>
import { EvoCalendar, EvoDatePicker } from '@evomark/evo-calendar';
import '@evomark/evo-calendar/style.css';

export default {
  components: {
    EvoCalendar,
    EvoDatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}
</script>

Source setup

Please follow below mentioned steps to clone and build this project:

Clone the repo

git clone https://github.com/evo-mark/evo-calendar

# Move to directory
cd evo-calendar

Install dependencies

yarn

Build library

# Types, ES, ESM, CommonJS, IIFE
yarn build

Lint and fix files

yarn lint

Test library

# Types, ES, ESM, CommonJS, IIFE
yarn test