v-year-calendar v1.0.2

v-year-calendar

Official Vue.js wrapper for the year-calendar widget. https://year-calendar.github.io/

This library is also available for:

Installation

You can get the widget using the following methods:

• From the GitHub repository
• From the Node package manager, using the following command: npm install v-year-calendar
• From Yarn, using the following command: yarn add v-year-calendar
• From the CDN, using the following script: <script src="https://unpkg.com/v-year-calendar@latest/dist/v-year-calendar.umd.min.js"></script>

Usage

You can create a calendar using the following javascript code :

<template>
    <Calendar></Calendar>
</template>

<script>
import Calendar from 'v-year-calendar';

export default {
  components: {
    Calendar
  }
}
</script>

Using props

You can specify props to customize the calendar:

<template>
    <Calendar render-style="background" :min-date="new Date()"></Calendar>
</template>

Available props

Available events

Language

If you want to use the calendar in a different language, you should import the locale file corresponding to the language you want to use, and then set the language prop of the calendar:

import Calendar from 'v-year-calendar';
import 'v-year-calendar/locales/v-year-calendar.fr';

OR

<script src="https://unpkg.com/v-year-calendar@latest/dist/v-year-calendar.umd.min.js"></script>
<script src="https://unpkg.com/v-year-calendar@latest/locales/v-year-calendar.fr.js"></script>

Then

<template>
    <Calendar language="fr"></Calendar>
</template>

The list of available languages is available here

What next

Check the examples page to discover all the functionalities.