fullcalendar, как ограничить количество событий в день в представлении месяца

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

Этот глючный (в основном заброшенный) плагин делает точно то, что вы просите. Проверьте это, и не стесняйтесь внести свой вклад. Предупреждение: Это взлом, но у fullcalendar есть API, который требует много работы. Большинство важных частей находятся в закрытом положении, что затрудняет их удлинение. На самом деле нет способа сделать это без взлома, если только вы не хотите редактировать исходный код плагина.

Как говорится, это самое близкое к тому, о чем вы просите, я нашел: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 3

У меня похожее требование, и я думал сделать что-то вроде этого:

в фиде json я бы возвращал специальные события, содержащие количество событий на каждый день.

Используя соответствующий полный календарь обратного вызова eventRender, я бы отображал эти события общего общего количества только в зависимости от представления, возвращая false в eventRender () для любых событий, которые я не хочу видеть.

Я еще не реализовал это, но, возможно, это может быть правильным способом. Поправь меня, если я ошибаюсь.

Answer 4

в настоящее время невозможно. см. запрос функции: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 5

Вам не нужно прилагать больших усилий для подсчета общего количества событий. У меня есть простой способ подсчитать общее количество событий в моем 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 мой календарь #

Это все, что я делаю. Я иду налево отсюда. Но я уверен, что это не так сложно, если вы попробуете что-то на loading: function() в fullCalendar, чтобы ограничить количество событий по вашему желанию.

Спасибо, хотя.

Answer 6

Я так делаю

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 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 для календаря.