CODEWITHSUNDEEP
javascriptphpjqueryeventsfullcalendar
user3061121
user3061121

Reputation: 31

Fullcalendar display the count of events per day

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

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

Upvotes: 3

Views: 14322

Answers (3)

ModusPwnens
ModusPwnens

Reputation: 185

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.

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

Upvotes: 3

bluesockets
bluesockets

Reputation: 56

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

function 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.

Upvotes: 0

Mahesh Reddy
Mahesh Reddy

Reputation: 356

Sample in Month View EventsPerDay variable gives count 

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

Upvotes: 0

Related Questions