Fullcalendar 显示每天的事件数答案

【问题标题】：Fullcalendar display the count of events per dayFullcalendar 显示每天的事件数
【发布时间】：2013-12-03 11:09:40
【问题描述】：

我使用 FullCalendar，我想在每天的所有视图中显示每天的事件计数。

例子：

<div class="fc-day-number">1</div>

改为：

<div class="fc-day-count">X</div>
<div class="fc-day-number">1</div>

请以截图为例： link

提前致谢

【问题讨论】：

您能否详细说明一下。这个问题太模糊了。
您好，感谢您的回复，请找到截图链接作为示例：link
您使用的是什么技术？ JSP？只有javascript吗？您可以使用所使用的技术为您的问题设置标签。这样，更多具有正确技能的人会发现您的问题并可以回答。但是有了链接，现在功能方面就很清楚了。 :) +1
我只是添加标签，我使用 Javascript、Jquery 和 php
id 还想知道如何在日视图的每个单元格中不显示任何事件，而不是显示事件本身（这是默认设置）并从 aax 源加载事件

标签： javascript php jquery events fullcalendar

【解决方案1】：

我希望这对某人有所帮助，但不知道这是否是您正在寻找的确切答案。

要获取一天发生的事件数，您可以使用以下代码：

$('#calendar').fullCalendar( 'clientEvents', function(eventObj){
    if (eventObj.start.isSame('2014-11-21')) {
        return true;
    } else {
        return false;
    }
}).length;

根据 fullcalendar 文档，您可以使用过滤功能 clientEvents 搜索事件。

函数中的 if 语句使用包含在 fullcalendar 2.0 中的moment.js 比较日期

【讨论】：

这正是我想要的。我将.isSame() 更改为简单的== 以将每个事件的时刻的年份与当前显示的年份进行比较，快速计算listYear 视图中显示的事件数量。
@itnAAnti 很高兴它有帮助，我为此经历了很多痛苦。

【解决方案2】：

月视图中的示例 EventsPerDay 变量给出计数

 eventRender: function (event, element, view) { 
 $(element).each(function () { $(this).addClass('dateClass-' + event.start.getDate().toString()); $(this).attr('date-num', event.start.getDate().toString()); });
                   if (view.name == "month") {
                       // $('.shifts,.tasks,.shiftOut,.shiftIn').hide();
                       var CellDates = [];
                       var EventDates = [];
                       var EventCount = 0, i = 0;

                       $('.fc-view-month').find('.fc-day-number').each(function () {
                           CellDates[i] = $(this).text();
                           //                           alert( $(this).text());
                           i++;
                       });

                       for (j = 0; j < CellDates.length; j++) {

                           EventsPerDay = $(".fc-view-month>div>.dateClass-" + CellDates[j]).length;}}

【讨论】：

您好，谢谢您的回答，但是一个月的时间超过 800 个事件需要大量资源 (CPU)。所以我编辑了我的 php 脚本，并在 json 源文件中传递了每天的事件数。

【解决方案3】：

我在名为

的方法中为 fullcalendar.js 添加了一行

函数 fetchEventSource(source, fetchID)：

    function fetchEventSource(source, fetchID) {
    _fetchEventSource(source, function(events) {
        if (fetchID == currentFetchID) {
            if (events) {

                if (options.eventDataTransform) {
                    events = $.map(events, options.eventDataTransform);
                }
                if (source.eventDataTransform) {
                    events = $.map(events, source.eventDataTransform);
                }
                // TODO: this technique is not ideal for static array event sources.
                //  For arrays, we'll want to process all events right in the beginning, then never again.

                for (var i=0; i<events.length; i++) {
                    events[i].source = source;
                    normalizeEvent(events[i]);
                }
                cache = cache.concat(events);
            }
            pendingSourceCnt--;
            if (!pendingSourceCnt) {
                reportEvents(cache);
            }
        }

        // add this next line here to dump the running count
        $("#someElement").html("There are " + cache.length + " events scheduled for this view");
    });
}

这具有充分利用 fullcalendar 已经在做的事情的净效果。然后，您可以为自己节省数据库上的额外网络调用。

【讨论】：