vue-full-calendarドラッグイベントを保存
2883 ワード
vue-full-calendarを使用してイベントのドラッグアンドドロップ保存を行う場合、多くの例を参考にして、以下に自分で書いたDEMOを貼ります.
プロファイル:
ドラッグ完了:
技術サポート:昆明猫科学技術参考ドキュメント:https://blog.csdn.net/iteye_5904/article/details/82571912
プロファイル:
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