使用说明

安装rview-c，具体安装方法请参考：

使用组件示例

<template>
  <div>
    <VueFullcalendar 
      ref="vueFullcalendar"
      class="test-fc" 
      :events="fcEvents" 
      first-day='1' lang="zh"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @recordClick="recordClick"
      @deletePaiclick="deletePaiclick"
      @addPaibanclick="addPaibanclick"
      @deleteMoreclick="deleteMoreclick"
      @moreClick="moreClick">
        <template slot="fc-event-card" slot-scope="p">
            <p><i class="fa">sadfsd</i> {{ p.event.title }} test</p>
        </template>
    </VueFullcalendar>
  </div>
</template>
<script>
let demoEvents = [{
      "title": "钱钟书 24:00~06:00",
      "start": "2019-12-30",
      "end": "2019-12-30",
      "cssClass": "family",
      "dutyPeriods": "24:00~06:00",
      "roomRowGuid": "警卫休息室1",
      "phoneNumber": "",
      "dutyId": "08465411-9f58-4ff4-ba43-820ae156624b"
    }, {
      "title": "张三 6:00~12:30",
      "start": "2019-12-18",
      "end": "2019-12-18",
      "cssClass": "family",
      "dutyPeriods": "6:00~12:30",
      "roomRowGuid": "警卫休息室1",
      "phoneNumber": "",
      "dutyId": "0fe6a274-d7b8-4dcd-b8bf-954a8dfaf2a5"
    }];

export default {
	data () {
		return {
      dayData:[],
      name:'Sunny!',
      fcEvents : demoEvents
    }
	},
  methods : {
    'changeMonth' (start, end, current) {
      console.log('changeMonth', start.format(), end.format(), current.format())
    },
    'eventClick' (event, jsEvent, pos) {
       console.log('eventClick', event, jsEvent, pos)
    },
    'dayClick' (day, jsEvent) {
      console.log('dayClick', day, jsEvent)
    },
    'moreClick' (day, events, jsEvent) {
      alert("目前列表上只显示两条信息，查看更多,展示全部信息");
      console.log('moreCLick', day, events, jsEvent)
    },
    'recordClick' (dayDate){
      alert("交班记录只提供方法，具体功能由业务实现")
    },
    'deletePaiclick' (event){
      this.$refs.vueFullcalendar.$refs.fcbody.selectThisDay(this.dayData)
    },
    'addPaibanclick' (day){
      alert("新增排班只提供方法，具体功能由业务实现");
      this.dayData=day;
    },
    'deleteMoreclick' (deleteList){
      alert("批量删除只提供方法，具体功能由业务实现")
      // this.$refs.vueFullcalendar.$refs.fcbody.selectThisDay(this.dayData)
    }
  },
}
</script>
<style lang='less'>
  .app{
    color:green;
  }
</style>

data

methods