181  
查询码:00000939
全日历组件
作者: 陈婉 于 2020年01月03日 发布在分类 / 人防组 / 人防前端 下,并于 2020年01月06日 编辑
全日历 rview-c

使用说明

安装rview-c,具体安装方法请参考:http://wiki.njrgrj.com:8989/webdoc/real/Pub2c90a4096f799fb7016f7a2f6289002b.html?STATE=0&OPERATE=3

使用组件示例

<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 点击批量删除按钮执行的方法



 推荐知识

 历史版本

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

  目录
    知识分享平台 -V 4.8.7 -wcp