Geek Answers Handbook

FullCalendar limits the number of events and has a MORE link

I saw that there was a request to add the MORE link to the calendar and limit the number of events. Is it still done? Or did someone do their own work there so they can share? If yes, write your code.

+4
source share
5 answers

In the new version v2.1.0-beta2 Launch 17 days ago, Arshaw completed the following

RESOLVED ISSUES:

  • Maximum events with a link "more ..." (304)
  • Do not fire eventMouseover / eventMouseout when dragging / resizing (1297)

NEW OPTIONS:

  • eventLimit
  • eventLimitClick
  • eventLimitText
  • dayPopoverFormat

A 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) });
+7
source

I recently wrote a plugin that does exactly what you ask for. I hope that Adam Shaw, the developer of fullcalendar, will contact him or enable this extension plugin with the fullcalendar kernel.

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

thanks

+6
source

I handle this on eventRender. The code looks something like this: maxEvents is what you want to set max and BuildMoreLink(currentMoreNum) builds your link. Returning false prevents an 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 yes, and here is my formatter to get 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; }
+1
source

There seems to be an open “enhanced” ticket for this feature on the fullcalendar google code page. If you run this problem, you will be notified of any feature updates.

Also, in this thread, someone posted an attempted solution. I have not tried it myself, but it might be worth a look. Check out this specific comment here .

0
source

If someone else having the same problem read the following:

if PHP / MySQL is used to extract events from the database:

just enter the start date and end date of the 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 the $allEvents to display events. He worked for me, and every day displays 10 events maximum.

0
source

More articles:


All Articles