feat: fetch using a start/end window rather than everything, use eventSources from FC.js

src/App.svelte

@@ -10,7 +10,7 @@
   import frLocale from '@fullcalendar/core/locales/fr';
   import EventModal from './EventModal.svelte';
   import FilterBar from './FilterBar.svelte';
-  import { refreshEvents, calendarTree } from './calendar';
+  import { mkSource, calendarTree } from './calendar';
   import { debounce } from 'lodash';
 
   import 'bootstrap/dist/css/bootstrap.css';
@@ -57,35 +57,19 @@
       month: mobile ? 'numeric' : 'long',
       day: 'numeric'
     },
-    events: [],
+    eventSources: [],
     themeSystem: 'bootstrap5'
   });
 
-  let selectedCalendars;
+  let selectedCalendars = [];
-  let updateTimer;
-
-  async function reloadEvents(selectedCalendars) {
-    const evts = await refreshEvents(selectedCalendars);
-    return evts.flat();
-  }
 
   const updateEvents = debounce(calendars => {
-    return reloadEvents(calendars).then(events => {
     options.update(opts => ({
       ...opts,
-        events
+      eventSources: selectedCalendars.map(mkSource).filter(x => !!x)
     }));
-    });
   }, 300);
 
-  onMount(async () => {
-    const events = await reloadEvents(selectedCalendars);
-    options.update(opts => ({
-      ...opts,
-      events
-    }));
-  });
-
   $: updateEvents(selectedCalendars);
 </script>
 

src/calendar.js

@@ -1,5 +1,3 @@
-import ICAL from 'ical.js'
-
 const clouds = {
   KLUB_RESEAU: 'klub-reseau',
   ELEVES_ENS: 'eleves-ens'
@@ -29,6 +27,10 @@ const calendars = {
   }
 }
 
+const calendarsByName = Object.fromEntries(
+  Object.entries(calendars).map(([id, {name}]) => ([name, id]))
+);
+
 export const calendarTree = {
   'Clubs COF': {
     'Club réseau': {},
@@ -47,12 +49,17 @@ export const calendarTree = {
 
 const calendarIds = Object.keys(calendars)
 
-function mkCalendarUrl(id, { cloud }) {
+function mkCalendarUrl(id, { cloud }, extra={}) {
-  return `/cal/${cloud}/${id}/?export&accept=jcal`
+  return `/cal/${cloud}/${id}/?` + new URLSearchParams({
+    ...extra,
+    export: true,
+    expand: true,
+    accept: 'jcal'
+  });
 }
 
-function fetchCalendar(id, cal) {
+function fetchCalendar(id, cal, extra={}) {
-  return fetch(mkCalendarUrl(id, cal), { credentials: 'omit' })
+  return fetch(mkCalendarUrl(id, cal, extra), { credentials: 'omit' })
     .then(resp => resp.json())
     .catch(err => console.error(err))
 }
@@ -125,25 +132,29 @@ function mkEventsFromCalendar(id, cal) {
   })
 }
 
-export function mkEvent(title, start, duration, ...rest) {
+export function mkSource(name) {
-  start = new Date(start)
+  const calendarId = calendarsByName[name];
-  const end = new Date(start)
+  if (!calendarId) return null;
-  end.setMinutes(start.getMinutes() + duration)
+  const calendar = calendars[calendarId];
+
   return {
-    title,
+    id: name,
-    start,
+    ...(calendar?.meta || {}),
-    end,
+    success: calendarData => {
-    ...rest
+      if (calendarData[0] !== 'vcalendar') return;
+      const cal = new Calendar(calendarId, calendarData);
+      return cal.events.map(fcEventFromjCalEvent(cal));
+    },
+    failure: error => {
+      console.error(`Fatal error during event source fetching of '${name}': ${error}`);
+    },
+    events: (info, successCallback, failureCallback) => {
+      const { start, end } = info;
+      fetchCalendar(calendarId, calendar, {
+        start: start.valueOf() / 1000,
+        end: end.valueOf() / 1000
+      })
+      .then(successCallback, failureCallback);
+    }
   }
 }
-
-// TODO: move to FullCalendar custom fetcher to control start&end.
-export function refreshEvents(selectedCalendars) {
-  return Promise.all(
-    calendarIds
-      .filter(id =>
-        selectedCalendars ? selectedCalendars.includes(calendars[id].name) : true
-      )
-      .map(id => mkEventsFromCalendar(id, calendars[id]))
-  )
-}