使用说明

安装rview-c

npm install 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