Vue实例:医院统一信息平台(封装fullcalendar组件)

前言

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>