Calendar is slow loading with 30k events

[jcanning]

Is your feature request related to a problem? Please describe

I am trying to load 30,000 events and it is taking around 2 minutes to load them. I am using basic calendar settings

Describe the solution you'd like

I cannot find a switch for lazy loading/fetching and hoping there is someway around this. What I would like to see here is that when someone first loads the calendar that it only loads the data for that view (in my case month view) and then only load the data for each navigation click (changing the month, day, week, etc).

Describe your use case for implementing this feature

The use case here is pretty simple, it takes a long time to load the events. once the calendar loads it's fast and as expected but waiting 2 minutes for it to load is not really an option for my client.

Additional context

None at this time.

[matts-bot[bot]]

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

[billyjov]

@jcanning i Suppose you load your events from a endpoint..How fast is your endpoint? Can you make a demo on stackblitz to reproduce the issue?

[jcanning]

Hey @billyjov,

Doing a stackblitz for 30,000 events would be a challenge for me as the datasource i am using is private data. I can say there is roughly 15 fields per event, so i get that this is a pretty decent load. I am just looking for a way to limit events to just the selected calendar view (i.e. only load events for month/day/week that is currently selected.

Is that something built in or will have i do do something custom there?

Thanks, jAC

[dodgycode]

@jcanning have you looked at the demo for async fetching? https://mattlewis92.github.io/angular-calendar/#/async-events

In my implementation I just fetched events for the visible month/week/day. My endpoint takes a start date and a number of days to return. So depending on the calendar view I can filter to only the days I need to display. For example, this is how I fetch for the week view: getEvents = (viewDate: Date, daysToReturn: number): Observable<CalendarEvent[]> => { let offsetFromSunday = viewDate.getDay(); viewDate.setDate(viewDate.getDate() - offsetFromSunday); let month = viewDate.getMonth() + 1; // zero indexed return this.http.get<CalendarEvent[]>(${this.apiUrl()}/${viewDate.getFullYear()}-${month}-${viewDate.getDate()}/${daysToReturn}); }

I make the call to fetch days by binding on the (viewDateChange) event, which is triggered by some buttons I have for next/previous/today. `

<button type="button" class="button p-solid-button medium white" mwlCalendarPreviousView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="refreshEventsData()"> <button type="button" class="button next p-solid-button medium white" mwlCalendarNextView [view]="view" [(viewDate)]="viewDate" (viewDateChange)="refreshEventsData()"> <button type="button" class="button p-solid-button medium white" mwlCalendarToday [(viewDate)]="viewDate"> Today

{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}

  </div>`

I can't think of a use case for needing 30k events on screen at a single time. Maybe you could filter them down somehow at server side? When you say it's private data, you have control over the endpoint design yeah?

[jcanning]

Hey @dodgycode I will give your approach a try. There is absolutely no need to have 30k events loaded at a time which is what i'm trying to avoid as loading takes too long and like you, i only want events to load for the day/week/month that is selected. Thanks so much for the tip!