FullCalendar 4-向事件对象添加/显示其他值

时间:2020-01-04 11:52:37

标签: javascript fullcalendar fullcalendar-4

我在这里从具有以下结构的JSON导入:

{
    "title": "M 11 Zoe Weihnachtskurs ",
    "klasse": "Klasse B",
    "color": "Ebreichsdorf",
    "standort": "Ebreichsdorf",
    "start": "2020-01-02T08:00:00",
    "end": "2020-01-02T09:40:00",
    "description": "Theorie B 11"
}

一切正常,我正在查看事件及其各自的时间和标题,但我也需要显示standort。

我正在阅读文档,并尝试像这样启动它:

document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('steinmonth');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            plugins: [ 'dayGrid', 'timeGrid' ],
            defaultView: 'dayGridMonth',
            weekNumberCalculation: 'ISO',
            hiddenDays: [ 0 ],
            views: {
                dayGrid: {
                    // options apply to dayGridMonth, dayGridWeek, and dayGridDay views
                    displayEventEnd: true,
                    titleFormat: { day: 'numeric', month: 'short' },
                    eventTimeFormat: {
                        hour: 'numeric',
                        minute: '2-digit',
                        meridiem: false
                    }
                },
                timeGrid: {
                // options apply to timeGridWeek and timeGridDay views
                },
                week: {
                // options apply to dayGridWeek and timeGridWeek views
                },
            },
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,timeGridWeek',
                },
            eventSources: [
                {
                url: 'https://arcanas.at/wp-content/plugins/steincal/steinmonth.json',
                method: 'POST',
                title: 'name',
                start: 'start',
                end: 'end',
                extendedProps: {
                    standort: 'standort',
                    color: 'color',
                    description: 'description'
                },
                color: 'white',  
                textColor: 'black' 
                }
            ],
            eventRender: function (info) {
                console.log(info.event.extendedProps)
                if ( event.standort ) {
                    element.find('.fc-title').append('<br />' + event.standort);
                    //element.find('.fc-content').append('<span class="fc-standort">' + event.standort + '</span>');
                }
            },
        });
        calendar.setOption('locale', 'de-at');
        calendar.render();
      });

并且控制台输出为

{klasse: "Klasse B", standort: "Ebreichsdorf", description: "Theorie GW 03"}

那么我如何将每个事件的standort值附加到对象?肯定有些东西我被忽略了。

1 个答案:

答案 0 :(得分:1)

哦,这太简单了-关闭,但是也许有人会发现这个有用:

eventRender: function(info) {
                info.el.querySelector('.fc-title').innerHTML = info.event.title + "</br>" + info.event.extendedProps.standort;
            },