簡體   English   中英

FullCalendar 4 - 向事件對象添加/顯示附加值

[英]FullCalendar 4 - add / display additional values to the Event Object

我在這里從具有這種結構的 JSON 導入 a:

{
    "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"
}

一切正常,我看到我的活動有各自的時間和標題,但我也需要顯示標准。

我正在閱讀文檔並嘗試像這樣啟動:

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"}

那么如何將每個事件的標准值附加到對象? 一定有什么我忽略了。

哦,這太簡單了 - 結束,但也許有人會發現這很有用:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM