vuejs-fullcalendar
v1.0.12
Published
pure vue-based fullcalendar, no jquery moment required
Downloads
61
Readme
##vuejs-fullcalendar
So as it's called. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only supports month view. I will use fc stands for vue-fullcalendar in following words.
install
By NPM
npm install vuejs-fullcalendar --save
or download code and include it
<script src='dist/vue-fulcalendar.min.js'>
Usage
Register component globally
// Your entry index.js
import Vue from 'vue'
import App from './App'
import fullCalendar from 'vue-fullcalendar'
Vue.component('full-calendar', fullCalendar)
new Vue({
el : 'body',
components : {
App
}
})
or register locally in your .vue
file
Example
<full-calendar :events="fcEvents" lang="en"></full-calendar>
var demoEvents = [
{
title : 'Sunny Out of Office',
start : '2016-08-25',
end : '2017-07-27'
}
]
export default {
data () {
return {
fcEvents : demoEvents
}
},
components : {
'full-calendar': require('vuejs-fullcalendar')
}
}
A sample screenshot is here,
Docs
props
events : Events will be displayed on the calendar
events = [ { title : 'event1', start : '2016-07-01', YOUR_DATA : {} }, { title : 'event2', start : '2016-07-02', end : '2016-07-03', YOUR_DATA : {} } ]
title
is the title of this event, will be displayed on calendarstart
is the start day of this eventend
is the end day of this eventYOUR_DATA
You can define as many data you want as possible
lang : langague of things like monthNames weekNames and titleFormat
export default { en : { weekNames : ['Sun', 'Mon','Tue','Wed','Thu','Fri','Sat'], monthNames : ['January','February','March','April','May','June','July','August','September','October','November','December'], titleFormat : 'MM/yyyy' }, zh : { weekNames : ['周一','周二','周三','周四','周五','周六','周日'], monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','11月','12月'], titleFormat : 'yyyy年MM月' } }
option
:zh
|en
default
:zh
monthNames
weekNames
titleFormat
events
fc will dispatch some events out.
changeMonth : Every time you click arrow to next/last month, fc will dispatch changeMonth
this.$dispatch('changeMonth', start, end, current)
start
is the first day of current monthViewend
is the last day of current monthViewcurrent
is the first day of current month
eventClick : Every time you click a event, fc will dispatch eventClick
this.$dispatch('eventClick', event, jsEvent, pos)
event
is an Event object hold the event's informationjsEvent
holds the native javascript eventpos
is the relative coordinates of fc
dayClick : fc dispatch it when you click a day slot.
this.$dispatch('eventClick', day, jsEvent)
day
is a Date Object of the day you clickjsEvent
holds the native javascript event
###END