JSPM

  • Created
  • Published
  • Downloads 201744
  • Score
    100M100P100Q159752F
  • License MIT

A clean and extendable plugin for building simple attributed calendars in Vue.js.

Package Exports

  • v-calendar
  • v-calendar/lib/v-calendar.min.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-calendar) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

V-Calendar

V-Calendar is a clean and lightweight plugin for building attributed calendars in Vue.js.

Visit https://vcalendar.netlify.com for demos and API reference. This plug-in is currently in beta state.

Features

  • Display clean and simple attributed calendars
  • Built-in support for various attributes, including
    • highlighted regions
    • dot and bar indicators
    • day content styles (hovered and non-hovered)
  • Apply attributes for multiple dates or date ranges (start & end dates)
  • Semantic inspired popover navigation panel with month-level attribute indicators
  • Date-picker supporting all native v-calendar props/events with various selection modes
    • single date
    • multiple dates
    • date range
  • Extensive API with custom slot support
  • Responsive and mobile-friendly
    • Handles taps for date selection
    • Handles swipes for month navigation

Quick Start

Vue.js version 2.4+ is required.

1 Install via npm

npm install v-calendar

2 Import and use VCalendar

import Vue from 'vue';
import VCalendar from 'v-calendar';
import 'v-calendar/lib/v-calendar.min.css';

// Use v-calendar, v-date-picker & v-popover components
Vue.use(VCalendar);

3 Reference in your component templates

<template>
  <v-calendar
    is-double-paned>
  </v-calendar>
  <v-date-picker
    mode='single'
    v-model='selectedValue'>
  </v-date-picker>
</template>
<script>
export default {
  data() {
    return {
      selectedValue: new Date(),
    };
  },
};
</script>

Or use a CDN

<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
    <!--1. Link VCalendar CSS-->
    <link rel='stylesheet' href='https://unpkg.com/v-calendar/lib/v-calendar.min.css'>
  </head>
  <body>
    <div id='app'>
      <v-calendar></v-calendar>
      <v-date-picker :mode='mode' v-model='selectedDate'></v-date-picker>
    </div>
    <!--2. Link Vue Javascript-->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>
    <!--3. Link VCalendar Javascript (Plugin automatically installed)-->
    <script src='https://unpkg.com/v-calendar'></script>
    <!--4. Create the Vue instance-->
    <script>
      new Vue({
        el: '#app',
        data: {
          // Data used by the date picker
          mode: 'single',
          selectedDate: null,
        }
      })
    </script>
  </body>
</html>

License

MIT

Copyright (c) 2017-present, Nathan Reyes