FullCalendar.io 从 JSON 个事件扩展事件对象

Question

我一直在使用旧版本的 fullcalendar，但在当前版本的 fullCalendar 中重新创建我的日历时遇到了问题。

我已经看到 documentation 并了解在事件对象中创建的 extendedProp，但是我无法根据 JSON 事件结果重新创建此操作。

旧版 fullCalendar v3.9

function DoCalendar() {

    var URX = document.getElementById('url').value;
    var URL = AppUrl + "JSON/GetCalendar/" + URX;

    $('#Calendar').fullCalendar("destroy");
    $('#Calendar').fullCalendar("render");

    $('#Calendar').fullCalendar({
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'basicWeek,month'
        },
        defaultView: 'month',
        //defaultDate:
        height: 'auto',
        fixedWeekCount: false,
        allDay: false,
        allDaySlot: false,
        displayEventTime: false,
        navLinks: false,
        eventLimit: false,
        events: { url: URL },
        eventColor: 'yellow',
        eventTextColor: 'black',
        eventRender: function (event, element) {

            element.find('.fc-title').html(event.title);

            event.eventColor = event.color;

            $(element).popover({
                title: event.start,
                content: event.popover,
                trigger: 'hover',
                placement: 'auto',
                html: true,
                container: 'body'
            });
        }
    })

新的完整日历 v5

function TestCalendar() {
    var calendarEl = document.getElementById('calendario');
    var teamId = document.getElementById('teamId').innerText;
    var eventsURL = "/api/Calendar/GetTeamCalendar?id=" + teamId;
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        events: {
            url: eventsURL,
            error: function () {
                $('#script-warning').show();
            }
        },
        eventColor: 'yellow',
        eventTextColor: 'black',
        eventClick: function (info) {
            alert('Event: ' + info.event.extendedProp);
        },
        eventRender: function (event, element) {
            console.log(event.extendedProp);
        }
    });
    calendar.render();
}

当前JSON结果

[{"id":"436969","title":"Practice","start":"2020-10-31T22:29:00","end":"2020-10-31T22:40:00","someField":"the field"},
{"id":"955138","title":"Practice","start":"2020-10-31T03:15:00","end":"2020-10-31T04:15:00","someField":"the field"},
{"id":"985289","title":"Practice","start":"2020-11-02T17:37:00","end":"2020-11-02T17:42:00","someField":"the field"]

eventClick: function (info) {
            alert('Event: ' + info.event.someField);
        }

继续return未定义

感谢任何帮助

Answer 1

根据此处的文档， https://fullcalendar.io/docs/event-object

您可以在对象中获取这些详细信息，如下所示。它对我有用。

    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            events: [{
                "id": "436969", "title": "Practice", "start": "2020-10-31T22:29:00", "end": "2020-10-31T22:40:00", "someField": "the field"
            },
                { "id": "955138", "title": "Practice", "start": "2020-10-31T03:15:00", "end": "2020-10-31T04:15:00", "someField": "the field" },
                { "id": "985289", "title": "Practice", "start": "2020-11-02T17:37:00", "end": "2020-11-02T17:42:00", "someField": "the field" }],

            eventColor: 'yellow',
            eventTextColor: 'black',
            eventClick: function (info) {                
                alert('Event: ' + info.event.extendedProps["someField"]);
            },
            eventRender: function (event, element) {
                console.log(event.extendedProp);
            }
        });
        calendar.render();
    });

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

FullCalendar.io 从 JSON 个事件扩展事件对象

FullCalendar.io extend event object from JSON events

javascript

json

fullcalendar

fullcalendar-5