CODEWITHSUNDEEP
javascriptjqueryfullcalendar
ProgrammerNeo
ProgrammerNeo

Reputation: 248

FullCalendar limit number of events and have a MORE link

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.

Upvotes: 4

Views: 18047

Answers (5)

Michel Ayres
Michel Ayres

Reputation: 5985

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

Upvotes: 7

jumpdart
jumpdart

Reputation: 1712

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

Upvotes: 1

Giorgi
Giorgi

Reputation: 609

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.

Upvotes: 0

Scott Greenfield
Scott Greenfield

Reputation: 2828

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

Upvotes: 6

theycallmemorty
theycallmemorty

Reputation: 12962

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.

Upvotes: 0

Related Questions