louloue-calendar

##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

1. 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

2. locale : langague of things like monthNames weekNames and titleFormat. Support same locales than moment.js

   • default : en

3. 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.

1. 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)

2. 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

3. 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

4. moreClick : fc dispatch it when you click a more button

   • date is the date corresponding to the "more" clicked (moment object)

   • events is the list of events that will be in the box

   • jsEvent holds the native javascript event

slots

You will be able to register your own stuff by using slots

1. fc-header-left : top left area

2. fc-header-right : top right area. In my case, I added a filter menu there

3. fc-body-card : inside the body area, usually working with EventClick, to display a event detail

###END