vue-fullcalendar

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

Simple Live Demo

install

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

Usage

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

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,
Yeah you see the calendar

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 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
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 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)
```
- 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 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

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

名称与所有者	Wanderxx/vue-fullcalendar
主编程语言	JavaScript
编程语言	HTML (语言数: 3)
平台
许可证

创建于	2016-07-07 08:44:58
推送于	2021-07-09 14:15:54
最后一次提交	2017-03-10 11:42:55
发布数	2
最新版本名称	1.0.9 (发布于 2017-01-13 11:47:54)
第一版名称	v1 (发布于 2016-11-11 10:32:50)

星数	1.5k
关注者数	50
派生数	385
提交数	83
已启用问题?
问题数	118
打开的问题数	79
拉请求数	8
打开的拉请求数	18
关闭的拉请求数	9

已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?

Github星跟踪图