我的网站上有一个可用的完整日历,我想实施“从外部事件拖放”。 到目前为止,一切都很好。拖放有点用。我可以在日历上删除事件。 Event-Titel 在 mysql 表上是安全的。但是数据事件字符串中给出的所有其他信息都不安全。
显示颜色和标题,仅保存标题。 开始时间和结束时间既不显示在日历上,也不保存在 mysql 中。
这是我的外部DIV:
<div id='external-events'>
<p>
<strong>Draggable Events</strong>
</p>
<div class='work-event' data-event='{"title":"my 1 event","start_time":"02:00","end_time":"14:00","color":"#123456"}'>My Event 1</div>
<div class='work-event' data-event='{"title":"my 2 event","start_time":"08:00","end_time":"15:00","color": "#00ff00" }'>My Event 2</div>
<div class='work-event' data-event='{"title":"my 3 event","start_time":"09:00","end_time":"16:00","color": "#ff0000" }'>My Event 3</div>
<div class='work-event' data-event='{"title":"my 4 event","start_time":"11:00","end_time":"17:00","color": "#0000ff" }'>My Event 4</div>
<div class='work-event' data-event='{"title":"my 5 event","start_time":"12:00","end_time":"20:00","color": "#f0000f" }'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
这是我的脚本代码:
document.addEventListener('DOMContentLoaded', function()
{
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('external-events');
var calendarEl = document.getElementById('calendar');
var checkbox = document.getElementById('drop-remove');
new Draggable(containerEl, {
itemSelector: '.work-event',
eventData: function(eventEl) {
var json_event = eventEl.getAttribute("data-event");
var event_array = JSON.parse(json_event);
var event_title = event_array['title'];
var event_starttime = event_array['start_time'];
var event_endtime = event_array['end_time'];
var event_color = event_array['color'];
return {
//title: eventEl.innerText
title: event_title,
start: event_starttime,
end: event_endtime,
color: event_color
};
}
});
var calendar = new Calendar(calendarEl,
{
locale: 'de',
firstDay: 1,
initialView: 'timeGridWeek',
height: '1000px',
headerToolbar:
{
left: "prev,next today",
center: "title",
right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
},
editable: true,
events: 'dash/fetchevents.php', // Fetch all events
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(arg) {
//get the bits of data we want to send into a simple object
console.log('eventRecieve', arg.event);
const eventData = {
title: arg.event.title,
start: arg.event.startStr,
end: arg.event.end,
color: arg.event.color,
};
console.log(eventData);
//send the data via an AJAX POST request, and log any response which comes from the server
fetch('timeInsert.php', {
method: 'POST',
headers: {
'Accept': 'application/json'
},
body: encodeFormData(eventData)
})
.then(response => console.log(response))
.catch(error => console.log(error));
},
//--------------------
eventDrop: function(info) {
alert(info.event.title + " was dropped on " + info.event.start.toISOString());
}
});
calendar.render();
});
const encodeFormData = (data) => {
var form_data = new FormData();
for (var key in data) {
form_data.append(key, data[key]);
}
return form_data;
}
怎么会,标题和颜色在日历上可见,但只有标题给了mysql? 我怎样才能将我的外部事件的所有信息保存到 mysql? 现在已经尝试了好几天,在网上搜索,连续 4 个晚上保持清醒。
如果有人能提供帮助,我会很高兴。
从功能(arg)到功能(信息)尝试了几种不同的方法,但没有任何效果。