如何显示带有完整日历描述的弹出窗口

Question

我正在使用 fullcalendar，我的目标是在事件点击时有一个简单的弹出窗口，但由于某种原因，我无法让它在警报中提取描述。

我是不是漏掉了一些要包含的 JS 之类的东西？我尝试使用他们网站上的示例，但没有用。我确定这是我想念的愚蠢的东西。

<script src='../assets/calendar/packages/core/main.js'></script>
<script src='../assets/calendar/packages/interaction/main.js'></script>
<script src='../assets/calendar/packages/daygrid/main.js'></script>
<script src='../assets/calendar/packages/timegrid/main.js'></script>
<script src='../assets/calendar/packages/list/main.js'></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var d = new Date();
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            height: 'parent',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            },
            defaultView: 'dayGridMonth',
            defaultDate: d,

            eventClick: function(info) {
                alert('Event: ' + info.description);
            },

            navLinks: true, // can click day/week names to navigate views
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            events:
            [
                {
                    title: 'All Day Event<br>second line',
                    description: 'description for Long Event',
                    start: '2020-05-01'
                },
                {
                    title: 'Session',
                    start: '2020-05-12T10:30:00',
                    description: 'description for Long Event',
                    end: '2020-05-12T12:30:00'
                },
                {
                    title: 'Practical',
                    start: '2020-05-27T10:30:00',
                     description: 'description for Long Event',
                    end: '2020-05-27T12:30:00'
                }

            ]
        });

        calendar.render();
    });

</script>

Answer 1

你需要写

alert('Event: ' + info.event.extendedProps.description);

因为

1) info 对象不是事件，事件是该信息对象的子属性 - 这在 https://fullcalendar.io/docs/eventClick

中有描述

和

2) description对于fullCalendar来说是一个非标准字段，所有非标准字段都放在事件的extendedProps子属性里面fullCalendar 根据您提供的数据生成的对象 - 这在 https://fullcalendar.io/docs/event-parsing

中有描述

如何显示带有完整日历描述的弹出窗口

How can I show a popup with description for fullcalendar

javascript

fullcalendar

fullcalendar-4