FullCalendar 限制事件数量并有更多链接

Question

我发现有人请求向日历添加“更多”链接并限制活动数量。这件事已经完成了吗？或者有人实施了自己的解决方案，可以分享吗？如果是这样，请发布您的代码。

Answer 1

随着新版本 v2.1.0-beta2 于 17 天前发布，Arshaw 执行了以下操作

已解决的问题：

• 带有“更多...”链接的最大事件 (304)
• 拖动/调整大小时不要触发 eventMouseover/eventMouseout (1297)

新选项：

• 活动限制
• 事件限制点击
• 事件限制文本
• dayPopoverFormat

来源

因此，您可以执行以下操作：

$('#calendar').fullCalendar({
    lang: 'en',
    eventLimit: true, // If you set a number it will hide the itens
    eventLimitText: "Something" // Default is `more` (or "more" in the lang you pick in the option)
});

Answer 2

我最近编写了一个插件，它完全可以满足您的要求。 希望 fullcalendar 的开发者 Adam Shaw 能够链接到它或将这个增强插件包含在 fullcalendar 核心中。

检查一下并告诉我您的想法。 请报告任何错误。 https://github.com/lyconic/fullcalendar.viewmore

谢谢

Answer 3

我在 eventRender 上处理这个问题。代码是这样的，其中

maxEvents

是您想要设置最大值的任何值，

BuildMoreLink(currentMoreNum)

构建您的链接。返回 false 会阻止该项目添加到您的日历中。

    eventRender: function (event, element) {
        var eventDateString = GetDateInCalFormat(event.start);
        var $calDay = $('td.fc-day[data-date="' + eventDateString + '"]');
        var dayEventCount = $calDay.attr('dayEventCount') ? parseInt($calDay.attr('dayEventCount')) : 0;

        dayEventCount = dayEventCount + 1;
        $calDay.attr('dayEventCount', dayEventCount);

        if (dayEventCount <= maxEvents) {
           //[any custom formatting]
        }
        else {
            var missingEvents = dayEventCount - maxEvents;
            $('.moreLink', $calDay).remove();
            $moreLink = $('<div class="moreLink"/>')
            $moreLink.html(BuildMoreLink(missingEvents));
            $calDay.append($moreLink);
            return false;
        }
    }

哦，是的，这是我的格式化程序，用于获取正确的日期值以查找日期：

function GetDateInCalFormat(dateToFormat) {
    dd = dateToFormat.getDate();
    mm = dateToFormat.getMonth() + 1;
    yyyy = dateToFormat.getFullYear();
    if (dd < 10) { dd = '0' + dd }
    if (mm < 10) { mm = '0' + mm }
    results = yyyy + '-' + mm + '-' + dd;
    return results;
}

Answer 4

看起来在fullcalendar google代码页上有一个针对此功能的开放“增强”票证。 如果您为该问题“加星标”，您将收到有关功能更新的通知。

此外，在该线程中有人发布了解决方案的尝试。 我自己还没有尝试过，但可能值得一看。 查看具体评论此处。

Answer 5

如果其他人遇到同样的问题，请阅读以下内容：

如果使用 PHP/MySQL 从数据库获取事件：

只需获取月份的开始日期戳和结束日期戳。

然后使用简单的for循环

  $allEvents = array();
  for ($i = $start; $i <= $end; $i = strtotime("+ 1 day", $i)) {
     //need to have start and end dates to be the same day but end day must be at 23:59:59
     $newStart = $i;
     $newEnd = strtotime("+ 23 hours 59 minutes 59 seconds", $newStart);
     $limit = 10;
     //load all events with limit whatever limit you wish and merge with all events
     $loadedEvents = loadEvents($newStart, $newEnd, $limit, $otheroptions);
     $allEvents = array_merge($allEvents, $loadedEvents);
  }

然后您可以使用

$allEvents

数组来显示事件。它对我有用，每天最多显示 10 个事件。