Show total count of events in month view(Full Calendar)?

Question

Can I show count of events in month view agenda calendar instead of showing all events. In full calendar. I m using latest plugin of full calendar. If yes then kindly help.

Solution 1

This is my workaround if you need. Add 'date-num' to the event element, then count them using eventAfterAllRender callback

        eventRender: function (event, element, view) { 
            $(element).each(function () { 
                $(this).attr('date-num', event.start.format('YYYY-MM-DD')); 
            });
        },
        eventAfterAllRender: function(view){
            for( cDay = view.start.clone(); cDay.isBefore(view.end) ; cDay.add(1, 'day') ){
                var dateNum = cDay.format('YYYY-MM-DD');
                var dayEl = $('.fc-day[data-date="' + dateNum + '"]');
                var eventCount = $('.fc-event[date-num="' + dateNum + '"]').length;
                if(eventCount){
                    var html = '<span class="event-count">' + 
                                '<i>' +
                                eventCount + 
                                '</i>' +
                                ' Events' +
                                '</span>';

                    dayEl.append(html);

                }
            }
        }

Solution 2

I don't know if this is what do you need but in a project that I'm working I needed to count the events in the month view with FullCalendar javascript plug-in and made this:

In my HTML I have a label where I update the counter after the calendar was rendered:

eventAfterAllRender: function (view) {
    // Count events
    var quantity = $('.fc-event').length;
    $("#quantity").html(quantity);
},

Simply count the quantity of .fc-events and update the counter dynamically

Comments

[Risky Pathak]

This works perfect. Also I wanted to hide all event data, so below link helped me. stackoverflow.com/questions/33100954/…

[tcanbolat]

eventAfterAllRender has been removed for V4 and V5 of fullcalender.js