javascript - Fullcalendar 4，使用 eventRender 时出现错误解析 JSON 失败

Question

我正在使用 FullCalendar 4，并且在脚本中设置了日历对象

function createBookingCalendar() {

var calendarEl = document.getElementById('bookingCalendar');

let calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'en-gb', // the initial locale
    timeZone: 'Europe/London',
    plugins: ['interaction', 'list', 'timeGrid'],
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'listDay,listWeek,timeGridDay,timeGridWeek, dayGridWeek,DayGridMonth'
    },
    businessHours: [ // specify an array instead
        {
            daysOfWeek: [1, 2, 3, 4, 5], // Monday - Friday
            startTime: '09:00', // 9am
            endTime: '18:00' // 6pm
        }, {
            daysOfWeek: [6], // Saturday
            startTime: '10:00', // 10am
            endTime: '16:00' // 4pm
        }
    ],
    hiddenDays: [7],
    // customize the button names,
    // otherwise they'd all just say "list"
    views: {
        listDay: {
            buttonText: 'Goto Day View'
        },
        listWeek: {
            buttonText: 'Goto Week View'
        },
        timeGridDay: {
            buttonText: 'Goto Time Grid Day View'
        },
        timeGridWeek: {
            buttonText: 'Goto Time Grid Week View'
        }
    },
    slotDuration: '02:00', // 2 hours
    defaultView: 'listWeek',
    defaultDate: Date.now(),
    navLinks: true, // can click day/week names to navigate views
    editable: false,
    eventLimit: true, // allow "more" link when too many events
    eventSources: [
        // CAD Solutions Event Source (Remote Database)
        {

            url: '../php/getBookings.php',
            method: 'GET',
            failure: function () {

                $.confirm({
                    theme: 'Modern',
                    icon: 'fas fa-exclamation-triangle',
                    title: 'Error',
                    content: '<p>There was an error fetching the bookings from our database, we appologise for the inconvenience.</p><p class="text-muted">This error has been logged with our engineers.</p><small>Error 0x86451 (Fetch Bookings Database Error)</small>',
                    type: 'red',
                    columnClass: 'col-md-6 col-md-offset-3',
                    buttons: {
                        close: {
                            text: 'Close.',
                            action: function () {
                                //reset flag and recall the function.

                            }
                        }
                    }
                });
            }

        }
    ],
    eventRender: function (info) {

        var tooltip = new Tooltip(info.el, {
                    title: info.event.title,
                    content: 'asdadasdqweqweqweqweqwasssd',
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });


    },
    noEventsMessage: '<div class="panel panel-primary" style="height: 245px;width: 654px;margin:0 auto;padding:10px;margin-top:30px;"><div class="panel-heading"><h4><i class="fas fa-info-circle"></i> There are no bookings for this day.</h4></div><div class="panel-body"><p>There are no bookings saved for this date, you can add a booking to this day using the buttons below, or select a different date.</p><p class="text-muted">You can create a booking for this date as all timeslots are available.</small></div><div class="panel-footer"><a class="btn btn-primary" href="javascript:void(0);" id="addBooking" style="color:#fff;"><i class="fas fa-calendar-plus"></i> Create Booking For This Date.</a></div></div><div class="divider">&nbsp;</div><div class="divider">&nbsp;</div><div class="divider">&nbsp;</div>',

    eventClick: function (info) {
        //Prevent Default Behaviour.
        info.jsEvent.preventDefault();
        $.confirm({
            theme: 'Modern',
            icon: 'fas fa-info-circle',
            title: 'Selected Booking Information',
            content: '<ul class="list-group list-group-flush" id="assetContent"><li class="list-group-item">Booking Company Name: ' + info.event.extendedProps.companyName + '</li><li class="list-group-item">Booking Date: ' + info.event.start + '</li><li class="list-group-item">Booking Slot: ' + info.event.startTime + ' - ' + info.event.endTime + '</li></ul>',
            type: 'blue',
            columnClass: 'col-md-6 col-md-offset-3',
            buttons: {
                close: {
                    text: 'Close.',
                    action: function () {
                        //reset flag and recall the function.

                    }
                }
            }
        });

    }
});

calendar.render();

}

当我在代码中设置了eventRender时，日历会停止从我的源中获取事件，并显示我在函数中添加的eventSources>failure对话框。

当我删除脚本的 eventRender 部分时，日历对象会完美呈现，并且我能够从我的数据库中查看所有事件。

有人能指出我的编码哪里出错了吗？真的很想让 eventRender 部分工作，这样我就可以更改设置的事件的背景颜色，此外，在源从服务器获取事件后，我将如何添加我自己的事件？我想这样做，以便我可以填写日历中缺少的时间段，以便用户可以选择一个空闲时间段来创建预订。

非常感谢

编辑我取出了我在完整日历文档中找到的工具提示代码，并将其替换为 ui 工具提示，现在可以使用了。添加我自己的事件的程序是什么？

标签： javascriptfullcalendarfullcalendar-4