FullCalendar limit number of events and have a MORE link

Question

I have seen that there has been a request to add a MORE link, to the calendar and limit the number of events. Is this done yet? Or has anyone implemented there own work around, that they can share? If so please post your code.

Answer 1

With the new build v2.1.0-beta2 Launch 17 days ago Arshaw did the following

RESOLVED ISSUES:

• Max events with "more..." link (304)
• Don't fire eventMouseover/eventMouseout while dragging/resizing (1297)

NEW OPTIONS:

• eventLimit
• eventLimitClick
• eventLimitText
• dayPopoverFormat

Source

So, you can do the following:

$('#calendar').fullCalendar({
    lang: 'en',
    eventLimit: true, // If you set a number it will hide the itens
    eventLimitText: "Something" // Default is `more` (or "more" in the lang you pick in the option)
});

Answer 2

I very recently wrote a plugin that does exactly what you're asking for. Hopefully Adam Shaw, the developer of fullcalendar will link to it or include this enhancement plugin with the fullcalendar core.

Check it out and let me know what you think. Please report any bugs. https://github.com/lyconic/fullcalendar.viewmore

Thanks

Answer 3

I handle this on eventRender. The code is something like this with maxEvents being whatever you want to set the max to and BuildMoreLink(currentMoreNum) builds your link. Returning false prevents the item from being added to your calendar.

    eventRender: function (event, element) {
        var eventDateString = GetDateInCalFormat(event.start);
        var $calDay = $('td.fc-day[data-date="' + eventDateString + '"]');
        var dayEventCount = $calDay.attr('dayEventCount') ? parseInt($calDay.attr('dayEventCount')) : 0;

        dayEventCount = dayEventCount + 1;
        $calDay.attr('dayEventCount', dayEventCount);

        if (dayEventCount <= maxEvents) {
           //[any custom formatting]
        }
        else {
            var missingEvents = dayEventCount - maxEvents;
            $('.moreLink', $calDay).remove();
            $moreLink = $('<div class="moreLink"/>')
            $moreLink.html(BuildMoreLink(missingEvents));
            $calDay.append($moreLink);
            return false;
        }
    }

Oh yeah and here is my formatter for getting the correct date value to find the day:

function GetDateInCalFormat(dateToFormat) {
    dd = dateToFormat.getDate();
    mm = dateToFormat.getMonth() + 1;
    yyyy = dateToFormat.getFullYear();
    if (dd < 10) { dd = '0' + dd }
    if (mm < 10) { mm = '0' + mm }
    results = yyyy + '-' + mm + '-' + dd;
    return results;
}

Answer 4

It looks like there is an open 'enhancement' ticket for this functionality on the fullcalendar google code page. If you 'star' that issue you'll be notified of any updates to the functionality.

Also, in that thread someone posted an attempt at a solution. I haven't tried it out myself but it might be worth a look. View that specific comment here.

Answer 5

If anyone else having the same problem read this:

if PHP/MySQL is used to fetch events from DB:

just get start date stamp and end date stamp of month.

then use simple for loop

  $allEvents = array();
  for ($i = $start; $i <= $end; $i = strtotime("+ 1 day", $i)) {
     //need to have start and end dates to be the same day but end day must be at 23:59:59
     $newStart = $i;
     $newEnd = strtotime("+ 23 hours 59 minutes 59 seconds", $newStart);
     $limit = 10;
     //load all events with limit whatever limit you wish and merge with all events
     $loadedEvents = loadEvents($newStart, $newEnd, $limit, $otheroptions);
     $allEvents = array_merge($allEvents, $loadedEvents);
  }

and then you can use $allEvents array to display events. It worked for me and each day displays 10 events at max.