fullCalendar:来自 DB 中外部事件的安全变量

问题描述 投票:0回答:0

我的网站上有一个可用的完整日历,我想实施“从外部事件拖放”。 到目前为止,一切都很好。拖放有点用。我可以在日历上删除事件。 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)到功能(信息)尝试了几种不同的方法,但没有任何效果。

mysql drag-and-drop draggable external fullcalendar-5
© www.soinside.com 2019 - 2024. All rights reserved.