前言
fullcalendar是一款用来管理日程安排、工作计划的日历工具，它功能非常强大而且非常实用。官方地址：https://fullcalendar.io/
它是基于jquery,jquery-ui的组件。在网上也找过这个组件的vue封装。但是觉得太不到我的需要。自己封装一个吧。
效果图
效果图一
效果图二
组件目录
目录结构
calendar.vue是fullcalendar的封装，draggable.vue是jquery-ui的拖动组件的封装。第二个是为了实现外部手动event到日历中。
安装基础组件
fullcalendar基于jquery。需要先加入项目，根据官方文档安装需要的就行了。
npm install jquery fullcalendar fullcalendar-scheduler -S
因为组件中用到了fullcalendar-scheduler，所以一并安装了。
代码
calendar.vue
<script>
import 'fullcalendar/dist/fullcalendar.min.css'
import 'fullcalendar-scheduler/dist/scheduler.min.css'
import 'fullcalendar'
import 'fullcalendar-scheduler'
import $ from 'jquery'
import _ from 'lodash'
export default {
name: 'VueFullcalendar',
props: {
options: {
type: Object,
default () {
return {
}
}
},
header: {
type: Object,
default () {
return {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
}
},
resources: {
type: Array,
default () {
return []
}
},
events: {
type: Array,
default () {
return []
}
}
},
data () {
return {
calendar: null,
instance: null,
currentOptions: this.options
}
},
computed: {
defaultOptions () {
const self = this
return {
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
locale: 'zh-cn',
editable: true,
selectable: true,
droppable: true,
viewRender (...args) {
self.$emit('viewRender', ...args)
},
viewDestroy (...args) {
self.$emit('viewDestroy', ...args)
},
eventDragStart (...args) {
self.$emit('eventDragStart', ...args)
},
eventDragStop (...args) {
self.$emit('eventDragStop', ...args)
},
eventDrop (...args) {
self.$emit('eventDrop', ...args)
},
drop (...args) {
let removeElement = _.isUndefined(self.currentOptions.deleteDroppableElement) ? true : self.currentOptions.deleteDroppableElement
if (removeElement) {
$(this).remove()
}
self.$emit('drop', ...args)
},
eventReceive (event) {
self.$emit('eventReceive', event)
},
eventResizeStart (...args) {
self.$emit('eventResizeStart', ...args)
},
eventResizeStop (...args) {
self.$emit('eventResizeStop', ...args)
},
eventResize (...args) {
self.$emit('eventResize', ...args)
},
eventClick (...args) {
self.$emit('eventClick', ...args)
},
eventMouseover (...args) {
self.$emit('eventMouseover', ...args)
},
eventMouseout (...args) {
self.$emit('eventMouseout', ...args)
},
eventAfterRender (...args) {
self.$emit('eventAfterRender', ...args)
},
eventAfterAllRender (...args) {
self.$emit('eventAfterAllRender', ...args)
},
eventRender (...args) {
self.$emit('eventRender', ...args)
},
eventDestroy (...args) {
self.$emit('eventDestroy', ...args)
},
resourceRender (...args) {
self.$emit('resourceRender', ...args)
}
}
}
},
created: function () {
},
mounted: function () {
this.$nextTick(function () {
this.renderCalendar()
})
},
beforeDestroy () {
this.calendar = null
this.instance = null
},
watch: {
'options': {
deep: true,
handler (val) {
this.changeOptions()
}
},
'resources': {
deep: true,
handler (val) {
this.changeResources()
}
},
'events': {
deep: true,
handler (val) {
this.changeEvents()
}
}
},
methods: {
getInstance () {
return this.instance
},
changeEvents () {
let self = this
if (self.calendar) {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', self.events)
} else {
self.renderCalendar()
}
},
changeResources () {
this.renderCalendar()
},
changeOptions () {
let self = this
self.currentOptions = _.defaultsDeep(self.options, self.currentOptions, self.defaultOptions)
let options = _.cloneDeep(self.currentOptions)
if (self.calendar) {
$(self.$el).fullCalendar('option', options)
} else {
self.renderCalendar()
}
},
renderCalendar () {
let self = this
self.currentOptions = _.defaultsDeep(self.options, self.currentOptions, self.defaultOptions)
let options = _.cloneDeep(self.currentOptions)
if (self.calendar) {
$(self.$el).fullCalendar('destroy')
}
if (self.resources && self.resources.length > 0) {
options.resources = _.cloneDeep(self.resources)
}
if (self.events && self.events.length > 0) {
options.events = _.cloneDeep(self.events)
}
self.calendar = $(self.$el).fullCalendar(options)
self.instance = $(self.$el).fullCalendar('getCalendar')
}
}
}
</script>
<template>
<div ref="vf"></div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
draggable.vue
<script>
import 'jquery-ui-dist/jquery-ui.min'
import $ from 'jquery'
import _ from 'lodash'
export default {
name: 'VueDraggable',
props: {
options: {
type: Object,
default () {
return {
}
}
},
event: {
type: Object,
default () {
return {
}
}
}
},
computed: {
defaultOptions () {
return {
revert: true,
revertDuration: 0
}
}
},
mounted: function () {
this.$nextTick(function () {
this.renderDraggable()
})
},
watch: {
'event': {
deep: true,
handler (val) {
$(this.$el).data('event', val)
}
}
},
methods: {
renderDraggable: function () {
let options = _.defaultsDeep(this.options, this.defaultOptions)
$(this.$el).draggable(options)
$(this.$el).data('event', this.event)
}
}
}
</script>
<template>
<div ref="vf" style="cursor: pointer;">
<slot></slot>
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
几个index.js是导出组件的，就不在这里贴代码了。
使用
组件的引入方法
import Vue from 'vue'
import VueFullcalendar from '@/components/VueFullcalendar'
Vue.use(VueFullcalendar)
下面是实例代码
<script>
import Vue from 'vue'
import VueFullcalendar from '@/components/VueFullcalendar'
Vue.use(VueFullcalendar)
export default {
name: 'ReservationSkill',
components: {
},
data () {
return {
options: {
locale: 'zh-cn',
editable: true,
selectable: true,
allDaySlot: false,
defaultView: 'agendaDay',
eventResourceField: 'room'
},
resources: [{
id: 1,
title: 'Room A'
}, {
id: 2,
title: 'Room B'
}],
events: [{
id: 1,
room: 1,
title: 'Meeting',
start: '2018-06-28 10:00'
}, {
id: 2,
room: 2,
title: '测试',
start: '2018-06-28 12:00'
}]
}
},
created: function () {
},
watch: {
},
methods: {
updateOptions () {
this.options = {
locale: 'zh-cn',
editable: true,
selectable: false,
droppable: true,
handleWindowResize: true,
slotEventOverlap: false,
slotLabelFormat: 'HH:mm',
header: false
}
},
changeResources () {
this.resources = [{
id: 1,
title: 'Room A'
}, {
id: 2,
title: 'Room B'
}, {
id: 3,
title: 'Room C'
}, {
id: 4,
title: 'Room D'
}]
},
changeEvents () {
this.events = [{
id: 1,
room: 1,
title: 'Meeting',
start: '2018-06-28 10:00'
}, {
id: 2,
room: 2,
title: '测试',
start: '2018-06-28 12:00'
}, {
id: 3,
room: 3,
title: '测试',
start: '2018-06-28 08:00'
}]
},
handleDropIn (date, jsEvent, ui, resourceId) {
console.log(date)
console.log(jsEvent)
console.log(ui)
console.log(resourceId)
},
handleClickEvent (calEvent, jsEvent, view) {
console.log(calEvent)
console.log(jsEvent)
console.log(view)
}
}
}
</script>
<template>
<el-container>
<el-header height="45px">
<el-form :inline="true" class="demo-form-inline" size="small">
<el-form-item>
<el-button type="primary" @click="updateOptions">changeOptions</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="changeResources">changeResources</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="changeEvents">changeEvents</el-button>
</el-form-item>
</el-form>
</el-header>
<el-main>
<div class="calendar-container">
<vue-fullcalendar
class="calendar"
:options="options"
:resources="resources"
:events="events"
@drop="handleDropIn"
@eventClick="handleClickEvent">
</vue-fullcalendar>
</div>
<div class="external-events">
<h4>Draggable Events</h4>
<vue-draggable class="fc-event" :event="{id: 4, title: 'My Event 1'}">My Event 1</vue-draggable>
<vue-draggable class="fc-event" :event="{id: 5, title: 'My Event 2'}">My Event 2</vue-draggable>
<vue-draggable class="fc-event" :event="{id: 6, title: 'My Event 3'}">My Event 3</vue-draggable>
<vue-draggable class="fc-event" :event="{id: 7, title: 'My Event 4'}">My Event 4</vue-draggable>
<vue-draggable class="fc-event" :event="{id: 8, title: 'My Event 5'}">My Event 5</vue-draggable>
</div>
</el-main>
</el-container>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.external-events {
position: fixed;
z-index: 2;
top: 120px;
left: 20px;
width: 150px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
}
.calendar-container {
position: relative;
z-index: 1;
margin-left: 200px;
}
.calendar {
max-width: 900px;
margin: 20px auto;
}
</style>
