[fullcalendar]让listMonth显示比月份更多的细节

Posted 2021-04-07

我想用不同的视图显示不同的事件信息。

在视图“月份”中，我只想显示最必要的数据，例如“标题”。

但在视图'listMonth'中，我想显示有关事件的其他信息。

我尝试了以下但不知道为什么在listMonth视图中这不会改变事件的标题。

$("#calendar").fullCalendar({
  views: {
    listMonth: {
      buttonText: 'list',
      displayEventTime: true
    }
  },
  events: [{
    title: 'event1',
    id: '1',
    start: '2018-01-13T11:00:00',
    end: '2018-01-13T15:00:00',
    addtlTitle: 'event1, where, what, how'
  }],
  eventRender: function(event, element, view) {
    if (view.name == "listMonth") {
      event.title = event.addtlTitle;
    }
  }
});

答案

根据eventRender运行时的文档（https://fullcalendar.io/docs/event_rendering/eventRender/），它已经创建了将要添加到日历中的html元素。这是作为回调中的“element”参数提供的。在此阶段修改“event”对象没有任何效果 - 它只是在那里您可以访问事件的更多属性，以便更改HTML元素。

相反，您必须检查该结构类型中呈现事件的HTML结构，并确定要更改的内容。在这种情况下，代码非常简单：

eventRender: function( event, element, view ) {
  if (view.name == "listMonth")
  {
     element.find('.fc-list-item-title').html(event.addtlTitle);
  }
}, 

请看这里的工作演示：http://jsfiddle.net/sbxpv25p/81/