vlite-calendar v0.1.2

vLite Calendar

A simple and lightweight, yet flexible calendar component for Vue 2.x, with:

• no styles dependency or inline styles
• using browser locale
• date-fns/esm (only calculation methods)

The intention of this component is to allow you to style your own calendar theme to suit your website design. See Styles Guide for detail.

Demo

See Demo Page for more example.

Get Started

Installation

As usual, install the calendar component NPM package.

npm install vlite-calendar --save

Next, include the calendar component in your own component.

import Calendar from 'vlite-calendar';

export default {
  // ...
  components: {
    Calendar,
  },
  // ...
}

Then, you can use <calendar> tag in your Vue template.

<calendar></calendar>

Check out Props Guide for component available props.

CDN Usage

Coming soon

Props Guide

Example code.

<calendar
  :date="pickedDate"
  :views="['days']"
></calendar>

Example usage of Vue Slot.

<calendar :date="pickedDate">
  <div slot="prepend">
    This will appear before the calendar
  </div>
  <div slot="append">
    This will appear after the calendar
  </div>
</calendar>

Events Guide

Example usage.

<calendar
  @select-day="onSelect"
></calendar>

export default {
  ...
  methods: {
    onSelect({ day, vdate }) {
      console.log(day);
    }
  }
}

vdate Object Guide

vdate object is used by component internally for handling what to render on each calendar days, months, and years. However, you can overwrite it through process-date prop.

Example usage.

<calendar
  :process-date="onProcessDate"
></calendar>

export default {
  ...
  methods: {
    onProcessDate(vdate) {
      // perform some checking
      // console.log(vdate.day)
      // vdate.isInvalid = true;
      // ...

      // remember to return back the vdate object
      return vdate;
    }
  }
}

Styles Guide

This component is intentionally for custom calendar theme styling. Hence all CSS classes used within the component are auto-prefixed with vl-calendar (can be overwrite through component class-prefix prop).

You can scope targeted these CSS classes on your component.

<style scoped>
/deep/ .vl-calendar{
  ...
}
/deep/ .vl-calendar-day{
  ...
}
</style>

However, you are free to use the built-in styling if you want.

import 'vlite-calendar/dist/vlite-calendar-style.min.css';

Change Log

Change logs can be found at CHANGELOG.md

License

MIT