完整日历'+更多'链接未按预期显示当天的所有事件

fullcalendar '+ more' link not displaying all events for the day as expected

本文关键字：显示 事件 日历 更多 链接      更新时间：2023-09-26

我一天有4个事件。

当我将eventLimit设置为3时，它会按预期显示"+2 more"。

但是，当你点击"+2 more"时，它只显示已经可见的2个事件，而它应该显示当天的所有事件。

当我将eventLimit设置为4时，所有4个事件都显示良好。

单击"+2 more"时，如何显示所有4个事件

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.css' />
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.1.1/fullcalendar.js'></script>
</head>
<body>
    <div id="calendar">
    </div>
<script>
  $('#calendar').fullCalendar(
  {editable: false,
   firstday: 1,
   eventLimit: 3,
   eventTextColor: 'white',
  events:[ 
    {
      title: 'Multi day event 1',
      start: '2014-11-09',
      end:   '2014-11-16'
    },
    {
      title: '1 Day event 1',
      start: '2014-11-12',
      end:   '2014-11-12'
    },
    {
      title: '1 Day Event 2',
      start: '2014-11-12',
      end:   '2014-11-12'
    },
    {
      title: '2 Day event',
      start: '2014-11-12',
      end:   '2014-11-14'
    } 
]}
);
  </script>

</body>
</html>

您的events数组有问题，特别是那些没有出现在popover上的数组（1天事件1和11天事件2）。

根据你的描述，我假设这些将是全天的活动。如果是这种情况，您应该以以下方式定义事件（删除end选项并添加allDay: true）：

{
    title: '1 Day event 1',
    allDay: true,
    start: '2014-11-12'
}, 
{
    title: '1 Day Event 2',
    allDay: true,
    start: '2014-11-12'
},

如果事件不应该是全天的，那么您必须定义时间部分，如下所示：

{
    title: '1 Day event 1',
    start: '2014-11-12T12:00:00',
    end:   '2014-11-12T16:00:00'
},
{
    title: '1 Day Event 2',
    start: '2014-11-12T18:00:00',
    end:   '2014-11-12T20:00:00'
},

检查这个jsfiddle，在这里我用这里提供的选项更改了这些事件。

相关文章：