2020-01-03 11:47:06 版本 : 全日历组件
作者: 陈婉 于 2020年01月03日 发布在分类 / 人防组 / 人防前端 下,并于 2020年01月03日 编辑
 历史版本

修改日期 修改人 备注
2020-01-06 17:31:54[当前版本] 陈婉 格式调整
2020-01-06 17:24:50 陈婉 格式调整
2020-01-03 11:48:45 陈婉 格式调整
2020-01-03 11:47:41 陈婉 格式调整

## 使用说明
#### 安装rview-c
`npm install rview-c`
## 使用组件示例
```javascript
<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
|参数名称   | 数据类型|说明   |是否必填
| ------------ |--------| ------------ |
|events   |Array|  列表数据 |不必填
## methods
|方法名称   | 方法说明|
| ------------ |--------|
|changeMonth   |修改日期执行的方法|
| eventClick  |点击事项执行的方法|
| dayClick  |点击某天执行的方法|
| recordClick  |点击交班记录按钮执行的方法|
| deletePaiclick  |点击删除按钮执行的方法|
| addPaibanclick  |点击新增排班按钮执行的方法|
| deleteMoreclick  |点击批量删除按钮执行的方法|

历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp