##vue-fullcalendar
Works for Vue2 now. This is a fullCalendar component based on vue.js . No Jquery or fullCalendar.js required. Currently, It only supports month view. It's inspired by fullCalendar.io but not cloned by it. So please read the docs here below to understand all features.
By NPM
@latest
works for Vue2
0.1.11
works for Vue1.*
// for Vue2
npm install vue-fullcalendar@latest --save
// for Vue1
npm install vue-fullcalendar@0.1.11 --save
or download code and include it
<script src='dist/vue-fulcalendar.min.js'>
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)
// Vue2
new Vue({
el : '#app',
render: h => h(App),
template : '<App/>',
components : {
App
}
})
//Vue1
new Vue({
el : 'body',
components : {
App
}
})
or register locally in your .vue
file
<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('vue-fullcalendar')
}
}
-
events : Events will be displayed on the calendar
events = [ { title : 'event1', start : '2016-07-01', cssClass : 'family', YOUR_DATA : {} }, { title : 'event2', start : '2016-07-02', end : '2016-07-03', cssClass : ['family', 'career'] YOUR_DATA : {} } ]
-
title
is the title of this event, will be displayed on calendar -
start
is the start day of this event -
end
is the end day of this event -
cssClass
is css class of each event label, such that, you will be able to set different colors, style .. -
YOUR_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
-
firstDay : first day of the week,
Number
, default: 0 (Sunday) Sunday=0, Monday=1, Tuesday=2, etc. Any number smaller than 0 or larger than 6 will be set to 0.
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 monthView -
end
is the last day of current monthView -
current
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 information -
jsEvent
holds the native javascript event -
pos
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 click -
jsEvent
holds the native javascript event
-
-
moreClick : fc dispatch it when you click a
more
button
You will be able to register your own stuff by using slots
-
fc-header-left : top left area
-
fc-header-right : top right area. In my case, I added a filter menu there
-
fc-body-card : inside the body area, usually working with
EventClick
, to display a event detail
###END