在使用 vue-full-calendar 进行事件拖拽保存的时候,参考过很多例子,下面贴下我自己写的DEMO:

<full-calendar ref="calendar" :events="getRows()" :config="config" class="test-fc" locale="fr" @event-selected="eventSelected" @day-click="dayClick" @event-drop="eventDrop">
                </full-calendar>

配置文件:

config:{
        firstDay:1,
        locale:'zh-cn',
        defaultView: 'agendaWeek',

        height:'auto',
        header:{
          left:'title',
          center:'',
          right:'prev,today,next',
        },
        /* agenda 模式 */
        allDaySlot:false,
        slotLabelFormat:'H:mm', // axisFormat 'H(:mm)'
        slotLabelInterval:1,
        slotDuration:'00:30:00',
        minTime:'9:00',
        maxTime:'20:00',
        editable:true,
        /* 设置按钮文字 */
        buttonText:{
          today:'今天',
        },
        firstClick:'',
        secondClick:'',        
      }, 

拖拽完成:

/**
 * 拖动完成
 */
eventDrop(date,dayDelta,revertFunc){
  let startTimeStr = date.date + ' ' + date.start_time;
  let endTimeStr = date.date + ' ' + date.end_time;
  let startDateStr = new Date(startTimeStr);
  let endDateStr = new Date(endTimeStr);
  let startTimeStamp = startDateStr.getTime() + dayDelta._days*86400*1000 + dayDelta._milliseconds;
  let endTimeStamp = endDateStr.getTime() + dayDelta._days*86400*1000 + dayDelta._milliseconds;

  let startDrugDate = new Date(startTimeStamp);
  let endDrugDate = new Date(endTimeStamp);

  let startDrugTime = startDrugDate.getFullYear() + '-' + (startDrugDate.getMonth() + 1).toString().padStart(2,'0') + '-' + startDrugDate.getDate().toString().padStart(2,'0');

  let drugStartTime = startDrugDate.getHours().toString().padStart(2,'0') + ':' + startDrugDate.getMinutes().toString().padStart(2,'0');
  let drugEndTime = endDrugDate.getHours().toString().padStart(2,'0') + ':' + endDrugDate.getMinutes().toString().padStart(2,'0');
  let postData = {
    id:date.id,
    title:date.title,
    doctor_id:date.doctor_id,
    item_id:date.item_id,
    origin_id:date.origin_id,
    patient_id:date.patient_id,
    start:startDrugTime+' '+drugStartTime,
    end:startDrugTime+' '+drugEndTime,
    date:startDrugTime,
    start_time:drugStartTime,
    end_time:drugEndTime
  };
  // console.log(startDrugTime);
  // console.log(drugStartTime+'___'+drugEndTime);
  // console.log(postData);
  this.config.editable = false;
  this.bespeakService.updateBespeak(postData,false,this.bespeakService.getIndexById(postData.id)).then(res => {
    this.dialogFormVisible = false;
    this.config.editable = true;
  })
}, 

技术支持:昆明猫咪科技
参考文档:https://blog.csdn.net/iteye_5904/article/details/82571912

Logo

前往低代码交流专区

更多推荐