[fullcalendar]拥有列表月份显示的详细信息比月份更多 [英] [fullcalendar]Have listMonth display more details than month

问题描述

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

I'd like to display different event information with different views.

在月"视图中，我只想显示最必要的数据，例如标题".

In view 'month' I'd like to only display the most necessary data, like 'title'.

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

But in view 'listMonth' I'd like to display additional information about an event.

我尝试了以下操作，但不知道为什么在listMonth视图中这样做不会改变事件的标题.

I tried the following but have no idea why this doesn't change the event's title when in listMonth view.

$("#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;
    }
  }
});

推荐答案

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

As per the docs (https://fullcalendar.io/docs/event_rendering/eventRender/) when eventRender runs, it has already created the HTML element which is going to be added to the calendar. This is provided as the "element" parameter in the callback. Modifying the "event" object at this stage has no effect - it's only there so you can access more properties of the event, in order to alter the HTML element.

相反，您必须检查该视图类型的呈现事件的HTML结构，并找出要更改的内容.在这种情况下，代码非常简单:

Instead you must inspect the HTML structure for rendered events in that view type, and work out what to alter. In this case, the code is quite simple:

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

请参阅此处以获取有效的演示: http://jsfiddle.net/sbxpv25p/81/

See here for a working demo: http://jsfiddle.net/sbxpv25p/81/

这篇关于[fullcalendar]拥有列表月份显示的详细信息比月份更多的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！