louloue-calendar v1.1.10
##Louloue-calendar
Louloue-Calendar is a fork of the very useful vue-fullcalendar (https://github.com/Wanderxx/vue-fullcalendar). Don't hesitate to star their project!
install
npm i louloue-calendar
Usage
Register component globally
// Your entry index.js
import Vue from 'vue'
import App from './App'
import fullCalendar from 'louloue-calendar';
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
Example
<full-calendar :events="fcEvents" locale="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')
}
}
A sample screenshot is here,
Docs
props
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 calendarstart
is the start day of this eventend
is the end day of this eventcssClass
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
locale : langague of things like monthNames weekNames and titleFormat. Support same locales than moment.js
default
:en
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.default
: 0
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 monthView (moment
object)end
is the last day of current monthView (moment
object)current
is the first day of current month (moment
object)
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)
date
is a Date Object of the day you click (moment
object)jsEvent
holds the native javascript event
moreClick : fc dispatch it when you click a
more
buttondate
is the date corresponding to the "more" clicked (moment
object)events
is the list of events that will be in the boxjsEvent
holds the native javascript event
slots
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