javascript Fullcalendar 显示每天的事件数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20349496/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 18:17:22  来源:igfitidea点击:

Fullcalendar display the count of events per day

javascriptphpjqueryeventsfullcalendar

提问by user3061121

I using the FullCalendar and i would like display the count of events per day in all views for each days.

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

Example :

例子 :

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

Change to :

改成 :

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

Please find a screenshoot as example: link

请找到屏幕截图作为示例: 链接

Thanks in advance

提前致谢

回答by ModusPwnens

I hope this helps someone but don't know if it's the exact answer you're looking for.

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

To get the number of events that occur on a day you can use the following code:

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

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

As per fullcalendar documentation you can search for events with a filter function clientEvents.

根据 fullcalendar 文档,您可以使用过滤器函数clientEvents搜索事件。

The if statement in the function compares dates using moment.jswhich is included in fullcalendar 2.0

if语句的功能比较了使用日期moment.js包含在fullcalendar 2.0

回答by Mahesh Reddy

Sample in Month ViewEventsPerDay variable gives count

月视图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;}}

回答by bluesockets

I added a line to fullcalendar.js in the method named

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

function fetchEventSource(source, fetchID):

函数 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");
    });
}

This has the net effect of leveraging what fullcalendar is already doing. You can then save yourself the extra network call on the database.

这具有利用 fullcalendar 已经在做的事情的净效果。然后,您可以保存自己对数据库的额外网络调用。