全日歷，如何限制月視圖中每天的事件數

Question

我一天有很多事件，它按預期運行，但是現在查看月視圖，我的日歷網格比預期的高得多。 我想從月視圖中隱藏一些此類事件，例如帶有可視化提示的摘要，表明這一天的活動量超出了顯示的范圍。

我可以使用eventRender並返回false，但是我想知道在給定的一天中有多少個事件，因此我可以將渲染次數限制為4個，那么也許我會添加一個表示“更多...”的事件。

所以問題可能是：如何計算給定日期的事件？

還是更像一個功能請求，以公開一個最大的月視圖計數器？

謝謝

Answer 1

從FullCalendar 2.1.0開始，此功能已包括在內，只需使用：

$('#calendarBlock').fullCalendar({
    eventLimit: true
    [...]
});

演示： http : //arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html

文檔： http : //fullcalendar.io/docs/display/eventLimit/

Answer 2

目前不可能。 查看功能請求： http : //code.google.com/p/fullcalendar/issues/detail?id=304

Answer 3

我有一個類似的要求，並正在考慮做這樣的事情：

在json feed中，我將返回特殊事件，其中包含每天的事件計數。

使用適當的完整日歷eventRender回調，我只會根據視圖通過在eventRender（）中為我不想看到的任何事件返回false來顯示這些特殊的總數事件。

我還沒有實現，但是也許它是一個有效的途徑。 如果我錯了糾正我。

Answer 4

這個越野車（大部分是廢棄的）插件確實 究竟 您要的是什么。 快來看看，並隨時貢獻自己的力量。 警告：這是一個hack，但是fullcalendar本身具有需要大量工作的API。 大多數重要部件都被封閉在一個封閉物中，這使其很難擴展。 除非您要編輯插件的源代碼，否則如果沒有黑客，實際上是沒有辦法實現的。

話雖如此，這是我找到的最接近您要求的內容： https : //github.com/lyconic/fullcalendar/tree/view-more

Answer 5

我就是這樣

CSS：

        .MaxHght
        {
        height:16px;
        }
        .viewMore
        {
        float:right;
        color: rgb(219, 104, 28);
        cursor:pointer;
        }

插件代碼

dayClick: function (date, allDay, jsEvent, view) {
                   $('#fullCalendar').fullCalendar('changeView', 'agendaDay').fullCalendar('gotoDate', date.getFullYear(), date.getMonth(), date.getDate());
               },
eventRender: function (event, element, view) {
                element.qtip({
                   content: event.QText,

                   position: {
                       my: 'CenterBottom',
                           at:'TopCenter'

                   },
                   style: {
                       tip: 'bottomMiddle'

                   }
               });
               $(element).removeClass('MaxHght');
               if (view.name == 'month') {

                       $(element).addClass('MaxHght');
                   var year = event.start.getFullYear(), month = event.start.getMonth() + 1, date = event.start.getDate();
                   var result = year + '-' + (month < 10 ? '0' + month : month) + '-' + (date < 10 ? '0' + date : date);
                   $(element).addClass(result);
                   var ele = $('td[data-date="' + result + '"]'),count=$('.' + result).length;
                   $(ele).find('.viewMore').remove();
                   if ( count> 3) {
                       $('.' + result + ':gt(2)').remove();                          
                       $(ele).find('.fc-day-number').after('<a class="viewMore"> More</a>');

                   } 
               }

           },
           eventAfterAllRender: function (view) {
               if (view.name == 'month') {
                   $('td.fc-day').each(function () {
                       var EventCount = $('.' + $(this).attr('data-date')).length;
                       if (EventCount == 0)
                           $(this).find('.viewMore').remove();
                   });
               }
           },

Answer 6

您無需花費太多精力就可以統計事件的總數。 我有一種簡單的方法來計算我的fullCalendar上的事件總數。 在eventAfterAllRender ，編寫這樣的內容，

eventAfterAllRender: function(view) {
                    var allevents = $('#calendar').fullCalendar('clientEvents');
                    var countevents = 0;
                    if( allevents.length ) {
                        countevents = countevents + allevents.length;
                    }
                    if(!countevents) {
                        // alert('event count is'+countevents);
                        console.log('event count is',countevents);
                    }
                }

- calendar是我的日歷＃

這是我的全部方式。 我從這里離開。 但是我敢肯定，如果您嘗試在fullCalendar的loading: function()上進行一些操作以根據您的意願限制事件的數量，這並不難。

不過謝謝

Answer 7

我做了這樣的事情：

function(start, end, callback) {
                var viewName = $("#calendar").fullCalendar('getView');
                var startTime = Math.round(start.getTime() / 1000);
                var endTime = Math.round(end.getTime() / 1000);
                MyWebService.MyWebMethod.GetEventsByView(startTime, endTime, viewName.name,
                    function(args) {
                        callback(args);
                    },
                    function(error) {
                        var e = error;
                    }
                );
            }

在這里， GetEventsByView方法返回用於月視圖的分組集和用於議程周和日視圖的詳細集。 但是，要使其正常工作，我必須為日歷設置lazyFetching:false 。