fullCalendar - 活动标题和详细信息

Question

我正在使用相当完整的Calendar jQuery 插件。

我希望能够为每个活动提供标题和详细信息，如下面的屏幕截图所示：

这里的详细信息是参与者每次会议。 （溢出隐藏在细节上）

Answer 1

看看这个（尤里卡的答案）

eventRender: function(event, element)
{ 
    element.find('.fc-event-title').append("<br/>" + event.description); 
}

Answer 2

基于 fullcalendar 文档

V5

如果要设置标题，请使用 eventDidMount 而不是 eventRender

eventDidMount:function(info){
   info.el.title="---- YOUR TEXT----"
}

Answer 3

目前 (V6) 的解决方案是使用 eventDidMount 回调并访问 extendedProps 数据：

eventDidMount: function(info) {
  var eventElement = info.el;
  let descriptionElement = document.createElement('div');
  descriptionElement.innerHTML = info.event.extendedProps.description;
  eventElement.appendChild(descriptionElement);
}

设置元素的样式以根据需要显示。

Answer 4

对于在 Angular 8 中遇到此问题的任何人：

eventRender: function(event, element)
{ 
    (element as Element).querySelector('span.fc-title').append("<br/>" + event.description); 
}