Full Calendar: Limit events per day in one cell

Question

Is there a way to limit events per one cell on the bootstrap calendar as appears in attached image? I want to show it as 2 events and "... X more" label in case there's more than 2 events with the same date and prevent stretching the whole calendar.

Solution 1

Try the following.

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

tooked from: Fullcalendar, required files for limit number events per day with view more/ more button?

Solution 2

If it's the month view, the configuration should be something like this:

 eventLimit: true,
  views: {
     month: {
       eventLimit: 3
     }
 }

Also if there are several events, adding a scroll bar could be helpful:

.fc-more-popover {
    overflow-y: scroll;
    max-height: 20%;
    max-width: 14%;
}

Solution 3

In v5.0.0-beta.2 the eventLimit option did not seem to work but the dayMaxEvents option did.

Source: https://github.com/fullcalendar/fullcalendar/blob/d3a2b13db43cfe9a450091776da3be25a0ca15c0/packages/daygrid/src/TableRow.tsx#L40

Example:

var calendar = new Calendar(calendarEl, {
  dayMaxEvents: 3 // Can also be set as a boolean
});

Comments

[rohan koshti]

But, if I have 5 events in my day view , 5 events in my month view and eventLimit as 2 for my month configuration, then I get +8 more in my month view which is invalid. Because, I have only 5 events in my month view so it should display +3 more instead of +8 more...

[Tadej Krevh]

For v5.x this is the correct answer. It is also mentioned in their release notes that the eventLimit was replaced: fullcalendar.io/docs/upgrading-from-v4