How to show all events without range limitation in fullcalendar?

Question

I want to show all events without any limitation in fullcalendar v5.

Here's my code.

document.addEventListener('DOMContentLoaded', function() {
    var calendarEventsEl = document.getElementById('calendar-events');

    calendarEvents = new FullCalendar.Calendar(calendarEventsEl, {
        initialView: 'listMonth',
        navLinks: false, // can click day/week names to navigate views
        dayMaxEvents: true,
        eventTimeFormat: {
            hour: 'numeric',
            minute: '2-digit',
            meridiem: false
        },
        eventSources: [{
            method: 'POST',
            url: '/calendar/get_all',

            failure: function() {
                document.getElementById('script-warning').style.display = 'block'
            }
        }]
    });

    calendarEvents.render();
})

At this moment, I can show all events for the month.

If I check the response for eventSources api, the response has all events.

But what I want to do is to show all events without any limitation like week, month, etc.

I tried to change the initialView option to list and tried to set validRange and visibleRange to null.

Any ideas?

Setting `null` will not work. The calendar needs _some_ kind of range. Even if you make 100 years from now. But be warned it's not very efficient at showing thousands of events at once - it's designed to show you a few days or weeks at a time, and then let you page through it. (In fact if you monitor the POST requests to get_all you'll see fullCalendar has automatically appended `start` and `end` parameters to the request which are the start and end of the current displayed date range, to tell the server what events to return). — ADyson, Feb 01 '21 at 15:10
Also, humans are not very efficient at seeing and processing massive amounts of data at once, so think carefully about what you're displaying, from a user-experience perspective. If your events are very infrequent, then it might be fine to have a calendar spanning multiple months or years (but then again, do you even need a calendar, for that sort of thing? You could probably achieve a similar result with just a simple HTML list). — ADyson, Feb 01 '21 at 15:11
Change `initialView: 'listMonth'` to `initialView: 'listYear'`. It will show year view.. See [here](https://codepen.io/nimittshah/pen/QWGwXLg?editors=001) — Nimitt Shah, Feb 01 '21 at 15:19

score -2 · Answer 1 · edited Jan 31 '21 at 19:38

When there are too many events, a link that looks like “+2 more” is displayed. The exact action that happens when the user clicks the link is determined by eventLimitClick.

A value of false (the default) will display all events as-is.

A value of true will limit the number of events to the height of the day cell. View a live demo.

An integer value will limit the events to a specific number of rows.

For the all-day section in the TimeGrid views, a value of true will limit the number of events to 5. To fine-tune this, use View-Specific Options like this:

var calendar = new Calendar(calendarEl, {
  eventLimit: true, // for all non-TimeGrid views
  views: {
    timeGrid: {
      eventLimit: 6 // adjust to 6 only for timeGridWeek/timeGridDay
    }
  }
});

How to show all events without range limitation in fullcalendar?

1 Answers1