Today was mostly a learning time: How to use the google calendar API.

After a couple of tries, I was able to get all my calendar events. Tomorrow will be about doing the integration with the app.

browse google calendar events

You can try in https://www.kalena.dev/login

The most exciting part was doing async iterators for returning an object with paging. This way, I ended with a nice API that uses the "for-await-of" format.

const Events = ({ calendarId }) => {
  let [api] = useGoogleApi()
  let [events, setEvents] = useState([])

  const loadEvents = async () => {
    let events = []
    for await (const newEvents of api.getEvents({calendarId}) ) {
      events = [...events,...newEvents];
      setEvents(events)
    }
  }


  return <>
    <button onClick={loadEvents}>LoadEvents</button>
    <ol>
      <li>{events.length} events</li>
      {events.map((e) => <Event key={e.id} {...e} />)}
    </ol>
  </>
}

The implementation was not so difficult:

  async function *getEvents({calendarId}) {
    let pageToken = 'first'

    while(pageToken){
      let requestArgs = {calendarId}
      if(pageToken !== 'first') requestArgs.pageToken = pageToken;
      
      let {result} = await gapi.client.calendar.events.list(requestArgs);
      yield result.items
      pageToken = result.nextPageToken;
    }
  }

Try and let me know if it works for you.