vue-full-calendarドラッグイベントを保存

2883 ワード

vue-full-calendarを使用してイベントのドラッグアンドドロップ保存を行う場合、多くの例を参考にして、以下に自分で書いたDEMOを貼ります.

                

プロファイル:
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