Search code examples
javascriptfullcalendarfullcalendar-3

FullCalendar - How to show specific number of upcoming events in list view?


I'm using FullCalendar to display a list of events from a Google Calendar. What I need is a list of the next 3 events, regardless of the day they are on.

The only option I found so far is to set the amount of days listed:

$('#calendar').fullCalendar({
    defaultView: "listWeek",
        views: {
            listWeek: {
                type: 'list',
                duration: { days: 3 },
            }
        },          
    })

This is list is empty though, if there are no events within the next three days.

Is there a way to set the specific amount of events displayed instead just the number of days?

Note: My knowledge about JS is pretty basic, so if the only option is to create a Custom View I'm grateful for any examples on how this could work.


Solution

  • I feel like this is a conceptual problem more than a programming issue.

    The short answer is:

    Essentially no you can't do this using fullCalendar.

    The longer explanation is:

    The whole point of fullCalendar is that it displays things in a calendar-like way. Calendars are designed to highlight specific points in time - things which take place within the setting of a period of days/weeks/months. The idea of a calendar is to visualise time, and help you to place events within it and see a timeline and context for your events.

    If you just want a boring old list of the next 3 events, no matter when they occur, then you're discarding the visualisation which is the entire purpose of a calendar. For that requirement, simply ditch the calendar plugin completely and just use the data you get from google to display a HTML list.