FullCalendar - 自定义事件标签

Question

简介：

Primefaces p:schedule 使用 FullCalendar，所以我必须问 FullCalendar 是否可以满足我的需要。如果 FullCalendar 不能，那么我就知道 Primefaces 也不能。

问题： （简短清楚）

有没有办法自定义事件标签？
我想要一个包含三行的标签（没有小时），例如：

洽谈
斯科特·泰格
级别：难

如您所见，第二行是粗体，第三行是斜体文本。是否有可能实现这样的开箱即用的东西？如果没有任何建议该怎么做？

Answer 1

旧帖子，但我的问题是一样的。

现在使用 FullCalendar 版本 2.7.3，您可以使用 eventRender 属性修改事件标签。

参见示例：

var calendar = $("#calendar").fullCalendar(
{
//...
eventRender: function(event, element) {
                console.log(event);
                console.log(element);
                element.text("a bigger text for this object, you can modify element as you want now with another label");
            },
//...
}

希望我的回答对你有帮助。

Answer 2

查看源代码（1.6.4版本）后答案是：

这是不可能的

为了实现这一点，必须修改源代码。

Answer 3

我在我使用的版本中就是这样做的。

1-我将以下行添加到日历事件文件中。此行将在 javascript 中创建一个全局变量，以便我可以在任何地方使用它。

        window.calendarColors = {
        Business: 'primary',
        Holiday: 'success',
        Personal: 'danger',
        bar: 'warning',
        foo: 'info'
    };

2-然后我更新了我的主 js 文件，如下所示。

    document.addEventListener('DOMContentLoaded', function () {
  (function () {
    const calendarEl = document.getElementById('calendar'),
      appCalendarSidebar = document.querySelector('.app-calendar-sidebar'),
      addEventSidebar = document.getElementById('addEventSidebar'),
      appOverlay = document.querySelector('.app-overlay'),

....

calendarsColor = window.calendarColors，

....

      offcanvasTitle = document.querySelector('.offcanvas-title'),
      btnToggleSidebar = document.querySelector('.btn-toggle-sidebar'),
      btnSubmit = document.querySelector('button[type="submit"]'),
      btnDeleteEvent = document.querySelector('.btn-delete-event'),

3-最后。

let events = [
        {
            id: 1,
            url: '',
            title: 'Design Review',
            start: date,
            end: nextDay,
            allDay: false,
            extendedProps: {
                calendar: 'foo'
            }
        }
    ];