vue-full-calendar拖拽事件进行保存
在使用 vue-full-calendar 进行事件拖拽保存的时候,参考过很多例子,下面贴下我自己写的DEMO:<full-calendar ref="calendar" :events="getRows()" :config="config" class="test-fc" locale="fr" @event-selected="eventSelected" @day-click="d.
·
在使用 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
更多推荐
已为社区贡献5条内容
所有评论(0)