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
Copyright (c) 2017-present, Nathan Reyes