我有一个拖放列表，但我不确定当用户将事件拖放到区域中时如何设置全日历事件的 ID...
我计划使用 jQuery 将 ajax 请求发送到我的后端并检索事件的 ID，但我不确定如何将其更新到我的全日历对象中。这是我的示例代码:
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale:'zh-cn',
events:[
{
id: 'a',
title: 'testing',
start: '2021-03-27'
}
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
customButtons: {
add_event: {
text: 'Add',
click: function() {
alert();
}
}
},
{#eventLimit: true,#}
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(arg) {
// is the "remove after drop" checkbox checked?
if (document.getElementById('drop-remove').checked) {
// if so, remove the element from the "Draggable Events" list
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
}
},
eventReceive: function( info ) {
//get the bits of data we want to send into a simple object
var eventData = {
id:info.event.id,
title: info.event.title,
start: info.event.start,
end: info.event.end,
description: info.event.description,
};
//send the data via an AJAX POST request, and log any response which comes from the server
$.ajax({
url: '/home/update_event/',
method: 'POST',
data: eventData,
success: (e)=>{
console.log(e)
}
})
fetch('/home/update_events/', {
method: 'POST',
{#headers: {'Accept': 'application/json'},#}
body: eventData,
}
)
.then(response => console.log(response))
.catch(error => console.log(error));
},
datesRender: function(info){
console.log(info)
},
eventClick: function(calEvent) {
console.log(calEvent)
var title = prompt('name:', calEvent.event.title, { buttons: { Ok: true, Cancel: false} });
if (title === 'x' || title === 'X'){
var event = calendar.getEventById(calEvent.event.id);
event.remove()
}
else{
if (title){
calEvent.event.title = title;
var event2 = calendar.getEventById('a');
event2.setProp('title', title);
}
}
}
});
calendar.render();
storeCalendar = calendar
$('#save').click(()=>{
console.log(calendar.getEvents())
})
});
最佳答案
eventReceive: function (event) {
var title = event.event.title;
var start = event.event.startStr;
var backgroundColor = event.event.backgroundColor;
var end = null;
event.event.remove();
calendar.addEvent({
id:345(here you can put any id, including text),
title: title,
start: start,
allDay: true,
backgroundColor: backgroundColor,
end: end
});
},
关于javascript - 拖放时如何为FullCalendar中的元素设置id？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66827925/