FullCalendar 在活动标题中显示 HTML

Question

我正在将我的 Fullcalendar 安装更新到 V4。我通过 JSON 喂我，我的活动标题中有 HTML（一些 FontAwsome 图标）。这是我渲染元素的旧 V3 代码：

$(function() {
  $('#calendars').fullCalendar({
    events: '/activities/calendar.json',
    contentHeight: 750,
    displayEventTime: false,
    header: {
      left: '',
      center: 'title',
      right: 'today prev,next'
    },
    businessHours: {
      dow: [1, 2, 3, 4, 5]
    },
    handleWindowResize: true,
    eventLimit: 2,
    eventLimitClick: 'popover',
    eventRender: function(event, element) {
      element.find('.fc-title').html(event.title);
    }
  });
});

eventRender: 失败了。新文档没有清楚地解释我如何将其转换为新版本。有了这段代码，我的日历就无法加载，并在控制台中出现 json 解析错误。如果我删除它，它会工作，但我的 HTML 呈现为纯文本。我确定我在这里遗漏了一些明显而简单的东西。我的 JS 技能不是很好。

Answer 1

经过一番摸索，我发现了这个：

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

    var calendar = new FullCalendar.Calendar(calendarEl, {
      events: '/activities/timeline.json',
      plugins: [ 'resourceTimeline', 'interaction' ],
      header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear, '
      },
      eventRender: function(info) {
        info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
      }
    });

    calendar.render();
  });

我愿意接受更简洁的答案。

Answer 2

从 FullCalendar v5 开始，您可以使用 eventContent。

document.addEventListener('DOMContentLoaded', function() {
   let calendarEl = document.getElementById('calendar');
   let calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
            
      events: [
            {
                "id": 1,
                "title": "First Line<br>Second Line",
                "start": "2022-06-04",
                "end": null,
                "allDay": true,
                "editable": true,
                "className": "badge-soft-warning",
           
            }
        ],

      eventContent: function( info ) {
          return {html: info.event.title};
      }

    });
    calendar.render();
})

FullCalendar 在活动标题中显示 HTML

FullCalendar display HTML in event title

javascript

fullcalendar

fullcalendar-4