如何将自定义属性字段添加到 fullcalendar v5答案

【问题标题】：How to add custom property field to fullcalendar v5如何将自定义属性字段添加到 fullcalendar v5
【发布时间】：2021-08-16 15:02:10
【问题描述】：

我正在尝试在标题下方的日历中添加自定义字段，它没有显示，有什么帮助吗？

see example

我的代码：

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

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
          

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                initialDate: '2021-08-17',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                events: [{

                    title: 'Event',
                    name: 'John',
                    start: '2021-08-17'
                }]

            });

            calendar.render();
            
        });
    </script>
</head>
<body>
    <div id='calendar'></div>
</body>

</html>

在 fullcalendar v3 工作代码中：

$(document).ready(function() {

  $('#calendar').fullCalendar({
   events: [{
                    title: 'My Event',
                    name: 'John',
                    start: '2021-08-12T12:00:00'
                }],
    eventRender: function(event, element) {
      element.find('.fc-title').append(event.name);
    }
  });
});

在 v5 中 eventRender 已更改为 eventDidMount，但是当我尝试使用 find 方法时出现错误。

【问题讨论】：

请将您当前的代码显示为文本，而不是图片，并包括您尝试使用 eventDidMount，并准确告诉我们错误消息是什么。另请参阅How to Ask 以确认此指导。谢谢。
欢迎来到 SO！此外，请在您下次发布问题时提供文档/库的链接，以便其他人立即知道您使用的技术。
@gerstams 信息已包含在 fullCalendar 标签 wiki - stackoverflow.com/tags/fullcalendar/info
好的，你可以直接在这里添加你的代码而不使用上面建议的截图吗？然后我们也许可以进行下一步:-)
@gerstams 你误认为我是 OP。我已经在我的第一条评论中向 OP 询问了这些信息。 :-)

标签： javascript fullcalendar fullcalendar-5

【解决方案1】：

我使用了 vanilla js，并且从事件中使用了包含非标准字段的 extendedProps 对象：

 events: [{

                    title: 'Event',
                    name: 'John',
                    start: '2021-08-17'
                }],

                eventDidMount: function(info) {
                    let name = document.createElement('div');
                    name.innerHTML=info.event.extendedProps.name;
                    document.querySelector('.fc-event-title-container').append(name);
                    
                }

【讨论】：