[fullcalendar]让 listMonth 显示比月份更多的详细信息

Posted 2023-02-26

【中文标题】[fullcalendar]让 listMonth 显示比月份更多的详细信息

【英文标题】：[fullcalendar]Have listMonth display more details than month

【发布时间】：2018-01-01 16:17:38

【问题描述】：

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

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

但在视图“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;
    
  
);

【问题讨论】：

通常答案是通过编写一些代码来做到这一点！但是您肯定不能指望我们为您编写代码，尤其是基于如此模糊的描述

您似乎希望我们为您编写一些代码。虽然许多用户愿意为陷入困境的编码人员编写代码，但他们通常只有在发布者已经尝试自己解决问题时才会提供帮助。展示这项工作的一个好方法是包含您迄今为止编写的代码、示例输入（如果有的话）、预期输出以及您实际获得的输出（控制台输出、回溯等）。您提供的详细信息越多，您可能收到的答案就越多。检查FAQ 和How to Ask。

其实，我对我的问题做了一些研究，发现了这个提示：***.com/questions/9410576/… 但是渲染根本没有效果。我被困住了，只是在寻找一些额外的例子。我已将给定链接中的代码添加到我的脚本中，虽然它运行没有错误，但它也不会更改视图“listMonth”中的 event.title...

这是我在脚本中实际放入的内容： $("#calendar").fullCalendar( [...] views: listMonth: buttonText: 'list', displayEventTime: true ，[...] 事件：[ title：'event1'，id：'1'，开始：'2018-01-13T11:00:00'，结束：'2018-01-13T15:00:00 ', addtlTitle: 'event1, where, what, how' ], eventRender: function(event, element, view) if (view.name == "listMonth") event.title=event.addtlTitle; ); );不知道在 listMonth 视图中这不会改变事件的标题。欢迎任何提示...

【参考方案1】：

根据文档 (https://fullcalendar.io/docs/event_rendering/eventRender/)，当 eventRender 运行时，它已经创建了要添加到日历中的 html 元素。这在回调中作为“元素”参数提供。在这个阶段修改“事件”对象没有任何效果 - 它只是在那里你可以访问事件的更多属性，以改变 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/

【讨论】：

非常感谢阿迪森！我试图在 Alexxus 的帖子上留下我的 Q，但作为一个新手，我不允许这样做。我必须承认，作为非母语人士，我时不时地让我不确定，但我有一种感觉，我在这里遗漏了一些明显的东西。所以，再次，非常感谢 - 你的代码就像一个魅力！

附带说明，我在哪里可以找到有关“.fc-list-item-title”等属性的文档？它们似乎没有包含在 fullcalendar.io 上的文档中...

它们不是属性，它们是 fullCalendar 装饰它创建的 HTML 元素的类名（大概是为了操纵它们并赋予它们有意义的标识和样式）。严格来说，它们是内部的东西（因此没有记录），并且在 fullCalendar 升级时可能会发生变化，但就尝试操纵事件的 HTML 而言，这是最好的。使用的 HTML 和类在不同类型的视图之间也有所不同（不可避免地），这是一个额外的复杂因素。