在日历控件中 renderEvent 不起作用？

Question

日历控件插入数据后调用renderEvent获取最近插入的数据。但我发现了不屈不挠。 #when I refresh browser 我得到了数据但是使用渲染我没有得到数据。

这是我的代码。

 $.ajax({
                                type: "POST",
                                url: "/Admin/Calendar/SaveBookings",
                                dataType: "JSON",
                                data: { title, Description, startDate, EndDate },
                                success:function(response)
                                {
                                    debugger
                                    $('#bookingModal').modal('hide');
                                    $('#calendar').fullCalendar('renderEvent',{
                                         'title':response.title,
                                         'description': response.description,
                                         'start': response.startDate,
                                         'end': response.endDate
                                    })
                                  
                                    
                                },
                                error:function(error)
                                {
                                   if(error.responseJSON.errors)
                                   {
                                        $('#titleError').html(error.responseJSON.errors.title);
                                   }
                                }
                            })

Answer 1

这里需要对FullCalendar进行一些修改。

• successCallback 我们需要创建

  eventsArray

  我们将在我们想要更新日历时推送。

events: function (info, successCallback, failureCallback) {
    successCallback(eventsArray);
}

• 使用

  eventsArray.push(eventData);

将新事件推送到日历
• 使用

  calendar.refetchEvents();

刷新日历

试试下面的代码片段

var eventsArray = [];
document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
        height: 600,
        plugins: ['dayGrid', 'interaction'],

        eventClick: function (info) {
            alert(info.event.title)
        },
        events: function (info, successCallback, failureCallback) {
            successCallback(eventsArray);
        }
    });

    calendar.render();
    var eventData = {
        title: 'New Event',
        start: '2023-04-25T14:00:00',
        end: '2023-04-26T16:00:00'
    };
    eventsArray.push(eventData);
    calendar.refetchEvents();
});

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/main.min.css" rel="stylesheet" />
<div id="calendar"></div>