vue-event-calendar
A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first. Live Demo Here
Requirements
- vue: ^2.0.0
Usage
install
npm install vue-event-calendar --save
main.js
Vue //locale can be 'zh' or 'en'
file.vue
<template> <vue-event-calendar :events="demoEvents"></vue-event-calendar></template> <script>export default { data () { return { demoEvents: [{ date: '2016/12/15', title: 'Foo', desc: 'longlonglong description' },{ date: '2016/11/12', title: 'Bar' }] } }}</script>
Customization
If you want customization event template. required Vue: ^2.1.0. Because I use new feature(Scoped Slots) of ^2.1.0
Customization color
//When Vue.use, you can set main colorVue
Customization event template
<template> <vue-event-calendar :events="demoEvents"> <template scope="props"> <div v-for="(event, index) in props.showEvents" class="event-item"> <!-- In here do whatever you want, make you owner event template --> {{event}} </div> </template> </vue-event-calendar></template> <script>export default { data () { return { demoEvents: [{ date: '2016/12/15', title: 'eat', desc: 'longlonglong description' },{ date: '2016/11/12', title: 'this is a title' }] } }}</script>
API
// NextMonththis$EventCalendar
// PreMonththis$EventCalendar
//ToDatethis$EventCalendar
More in Demo Folder
Develop
npm run dev //develop
npm run build //production