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

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 = [,...newEvents];

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

The implementation was not so difficult:

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

      let requestArgs = {calendarId}
      if(pageToken !== 'first') requestArgs.pageToken = pageToken;
      let {result} = await;
      yield result.items
      pageToken = result.nextPageToken;

Try and let me know if it works for you.