fullcalendar, how to limit the number of events per day in the month view

Question

I have many events on a day, and it works as expected but now looking at the month view, my calendar grid is much taller that expected. I'd like to hide some of these events from the month view, like a summary with a visual que that there are more on this day than can be shown.

I can use eventRender and return false, but i would like to know how many events are on a given day, so i can limit the rendering to about 4, then perhaps i would add an event that says " more ... "

So the question may be : how to count the events on a given date ?

or is this more like a feature request to expose a max counter for month view ?

thanks

Answer 1

As of FullCalendar 2.1.0, this feature is included, just use:

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

Demo: http://arshaw.com/js/fullcalendar-2.1.0-beta2/demos/agenda-views.html

Documentation: http://fullcalendar.io/docs/display/eventLimit/

Answer 2

I have a similar requirement and was thinking of doing something like this:

in json feed, I would return special events that contain a count of events for each day.

Using appropriate full calendar eventRender callback, I would only display these special total count events depending on view by returning false in eventRender() for any events I don't want to see.

I haven't implemented this yet, but perhaps it can be a valid avenue. Correct me if I'm wrong.

Answer 3

This buggy (mostly abandoned) plugin does exactly what you're asking for. Check it out, and feel free to contribute. Warning: It is a hack, but fullcalendar itself has an API that needs a lot of work. Most of the important parts are trapped in a closure, which makes it very difficult to extend. There really is no way to accomplish this without hackery, unless you want to edit the plugin's source code.

That being said, this is the closest I have found to what you are asking for: https://github.com/lyconic/fullcalendar/tree/view-more

Answer 4

currently not possible. see feature request: http://code.google.com/p/fullcalendar/issues/detail?id=304

Answer 5

I did something like this:

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;
                    }
                );
            }

Here the GetEventsByView method returns a grouped set for month view and detailed set for agendaWeek and day views. But for this to work correctly, I had to set lazyFetching:false for the calendar.

Answer 6

I am doing like this

Css:

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

plugin code

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

You don't need to take much effort on taking the total count of events. I have got a simple way to count total events on my fullCalendar. In the eventAfterAllRender , write something like this,

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);
                    }
                }

-where calendar is my calendar #

This is all my way of doing. I am taking left from here. But I am sure, it is not that harder if you try something on the loading: function() of the fullCalendar to limit the number of events according to your wish.

Thanks though.