How to show all events without range limitation in fullcalendar?

user_11223414 0
Viewed 107

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?

fullcalendar-5 fullcalendar javascript
1 Answers

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