日历表插件vue-full-calender - 波妞lan - 博客园
; "复制代码")
<full-calendar
:events="monthData" class="test-fc" :config="config" ref="calendar" first-day="1" locale="fr" @event-selected="eventClick" @day-click="dayClick" @event-mouseover="eventMouseover" @event-mouseout="eventmouseout" @view-render='viewrender'
></full-calendar> //https://www.npmjs.com/package/vue-fullcalendars,自己上传的包
; "复制代码")
在第三方插件加自定义事件封装好
利用的原理，子组件调用父组件方法，子组件绑定自定义事件且监听
; "复制代码")
<template>
<div ref="calendar" id="calendar"></div></template>
<script> import defaultsDeep from 'lodash.defaultsdeep' import 'fullcalendar' import $ from 'jquery' export default {
props: {
events: { default() { return \[\]
},
},
eventSources: { default() { return \[\]
},
},
editable: { default() { return true },
},
selectable: { default() { return true },
},
selectHelper: { default() { return true },
},
header: { default() { return {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay' }
},
},
defaultView: { default() { return 'agendaWeek' },
},
sync: { default() { return false }
},
config: {
type: Object, default() { return {}
},
},
},
computed: {
defaultConfig() {
const self = this
return {
header: this.header,
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
aspectRatio: 2,
timeFormat: 'HH:mm',
events: this.events,
eventSources: this.eventSources,
eventRender(...args) { if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
self.$emit('event-render', ...args)
},
viewRender(...args) { if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
self.$emit('view-render', ...args)
},
eventDestroy(event) { if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
},
eventClick(...args) {
self.$emit('event-selected', ...args)
},
eventDrop(...args) {
self.$emit('event-drop', ...args)
},
eventReceive(...args) {
self.$emit('event-receive', ...args)
},
eventResize(...args) {
self.$emit('event-resize', ...args)
},
dayClick(...args){
self.$emit('day-click', ...args)
},
select(start, end, jsEvent, view, resource) {
self.$emit('event-created', {
start,
end,
allDay: !start.hasTime() && !end.hasTime(),
view,
resource
})
}
}
},
},
mounted() {
const cal = $(this.$el),
self = this
this.$on('remove-event', (event) => { if(event && event.hasOwnProperty('id')){
$(this.$el).fullCalendar('removeEvents', event.id);
}else{
$(this.$el).fullCalendar('removeEvents', event);
}
}) this.$on('rerender-events', () => {
$(this.$el).fullCalendar('rerenderEvents')
}) this.$on('refetch-events', () => {
$(this.$el).fullCalendar('refetchEvents')
}) this.$on('render-event', (event) => {
$(this.$el).fullCalendar('renderEvent', event)
}) this.$on('reload-events', () => {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
}) this.$on('rebuild-sources', () => {
$(this.$el).fullCalendar('removeEventSources') this.eventSources.map(event => {
$(this.$el).fullCalendar('addEventSource', event)
})
})
cal.fullCalendar(defaultsDeep(this.config, this.defaultConfig))
},
methods: {
fireMethod(...options) { return $(this.$el).fullCalendar(...options)
},
},
watch: {
events: {
deep: true,
handler(val) {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
},
},
eventSources: {
deep: true,
handler(val) { this.$emit('rebuild-sources')
},
},
},
beforeDestroy() { this.$off('remove-event') this.$off('rerender-events') this.$off('refetch-events') this.$off('render-event') this.$off('reload-events') this.$off('rebuild-sources')
},
} </script>
; "复制代码")
原网址: 访问
创建于: 2022-08-23 21:30:35
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论