Fullcalendar v4：addEvent() 在自定义视图中不起作用答案

【问题标题】：Fullcalendar v4: addEvent() not working in custom viewFullcalendar v4：addEvent() 在自定义视图中不起作用
【发布时间】：2020-04-01 11:34:24
【问题描述】：

我正在使用 fullcalendar v4 (https://fullcalendar.io/)，我正在尝试在自定义视图“timeGridSixMonth”中刷新已删除的事件。

var calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: [ 'bootstrap', 'interaction', 'dayGrid', 'timeGrid', 'list' ],
                defaultView: 'timeGridSixMonth',
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timeGridSixMonth,timeGridWeek,timeGridDay,listSixMonth'
                },
                buttonText: {
                    timeGridSixMonth: '6 Month',
                    listSixMonth: 'List 6 Month'
                },
                views: {
                        timeGridSixMonth: {
                        type: 'dayGrid',
                        duration: { month: 6 },
                        titleFormat: { year: 'numeric', month: 'short', day: 'numeric' },
                    },
                        listSixMonth: {
                        type: 'listMonth',
                        duration: { month: 6 },
                        titleFormat: { year: 'numeric', month: 'short', day: 'numeric' } 
                    }
},

.....

drop: function(info) {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                console.log(info);

                $.ajax({
                    url: '/api/plan',
                    type: "POST",
                    data: {
                        'title':          info.jsEvent.explicitOriginalTarget.textContent
                        'item_id':        $('#item_id').children("option:selected"). val(),
                        'start':          start,
                        'end':            end,
                        'users_id':{{ \Illuminate\Support\Facades\Auth ::user() -> id }},
                     },
                    success: function (response) {

                        console.log(response);
                        calendar.addEvent({
                            title:  response.data.title,
                            start:  response.data.start,
                            end:    response.data.end,
                            allDay: false,
                            id:     response.data.id,
                        });
                        displayMessage('gespeichert.');
                    }
                });
            },

回复是：

{
  "success": true,
  "data": {
    "Fach": "Rhetorik",
    "faecher_id": 22,
    "dozenten_id": 112,
    "schulungsorte_id": 18,
    "Beginn": "2020-10-29T16:00:00.000000Z",
    "Ende": "2020-10-29T20:00:00.000000Z",
    "kurstermine_id": "14,17,7,21",
    "users_id": 3,
    "updated_at": "2020-04-01T16:15:34.000000Z",
    "created_at": "2020-04-01T16:15:34.000000Z",
    "id": 26,
    "title": "Rhetorik\n        Mr. Miller",
    "start": "2020-10-29T16:00:00.000000Z",
    "end": "2020-10-29T20:00:00.000000Z"
  },
  "message": "stored."
}

在自定义视图中创建了一个没有 id 的事件，并且 addEvent() 不起作用。

在标准视图中，我得到一个没有 id 的重复事件。

你猜为什么？

【问题讨论】：

“不起作用”是什么意思？你得到一个错误？还是其他一些意想不到的结果？如果之后您将视图更改为标准视图，您可以看到该事件吗？它存在于您的数据库中吗？目前尚不清楚视图类型如何影响它，或者“创建没有 id 的事件”是什么意思……ID 从哪里来？你的意思是没有ID来自数据库到response.data.id或什么？请您进一步澄清整个情况。
好的。您是否意识到您正在创建两个事件？首先是删除的，然后是通过addEvent() 添加的另一个？这是故意的吗？
另外能否请您显示您定义和填充可拖动外部事件的代码，以便我准确知道您在日历上放置了什么？
没有错误。该事件已正确存储在数据库中，response.data.id 回来了，但删除的元素没有 id。（如果我点击事件 'eventClick: function(info) { alert(info.event.id);} ' 显示 'undefined'。所以我尝试使用 addEvent() 方法添加事件，这在标准中显示视图，但不在自定义视图“timeGridSixMonth”中。在标准视图中，我有两个事件：一个来自 addEvent(9，另一个没有来自“drop:”的 id：抱歉我的描述不准确。感谢您的帮助。
被删除的元素不会有任何 ID，如果你没有给它分配一个。这并不奇怪，除非您认为应该这样做？如果有，从哪里来？这就是为什么我要求看看你是如何创建可拖动事件的。无论如何，要尝试了解为什么 addEvent() 的结果可能不会显示在您的自定义视图中，我首先需要查看事件数据。如果可以请在您的“成功”回调中添加console.log(JSON.stringify(response));，然后将结果发布到您的问题中，这将非常有帮助。

标签： javascript fullcalendar fullcalendar-4

【解决方案1】：

已解决：

我用 eventReceive 代替 drop：

eventReceive: function(info) {

       console.log('eventReceive', info);

       var starttime   = moment(info.event._instance.range.start).utcOffset(0).format("YYYY-MM-DD HH:mm:ss");
       var endtime     = moment(info.event._instance.range.start).utcOffset(0).format("YYYY-MM-DD HH:mm:ss");

                        $.ajaxSetup({
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            }
                        });

                        console.log(info);

                        $.ajax({
                            url: '/api/plan',
                            type: "POST",
                            data: {
                                'title':            info.draggedEl.innerText,
                                'item_id':      info.draggedEl.dataset.event,
                                'start':          starttime,
                                'end':            endtime,
                                'users_id':{{ \Illuminate\Support\Facades\Auth ::user() -> id }},
                            },
                            success: function (response) {

                                console.log(response);
                                info.event.setProp('title', response.data.title);
                                info.event.setProp('id', response.data.id);
                                info.event.setProp('start', response.data.start);
                                info.event.setProp('end', response.data.end);
                            }
                        });
                    },

【讨论】：

我不确定您是否需要对 title、start 和 end 属性执行 setProp。它们应该已经是正确的 - 除非您的服务器在将响应发回之前更改它们？我认为你只需要运行 setProp 来设置 ID，真的。
我使用数据库中的两个字段并将输出合并到标题以显示信息。感谢您的帮助，您的提示对我帮助很大。