Integrate calendar on site (PoC with iCal)

[hollandjg]

Final Update: December 8, 2023

Calendar is a potential Project Portal feature we have been exploring. Specifically, trying to implement the fullcalendar library as seen here https://fullcalendar.io/docs/icalendar.

Tested with 2 approaches

1. iCalendar plugin

<FullCalendar
  plugins={[dayGridPlugin, iCalendarPlugin]}
  initialView="dayGridMonth"
  events={
    {
      url: '{path_to_ics_file}',
      format: 'ics'
    }
  }
/>

2. Google calendar through google API

 <FullCalendar
  plugins={[dayGridPlugin, googleCalendarPlugin]}
  initialView="dayGridMonth"
  eventSources={
    {
      googleCalendarApiKey: '{generated_api_key}',
      googleCalendarId: '{google_email}'
    }
  }
/>

The iCalendar approach does not work, for some unresolved reason. The Google calendar approach works but obviously restricts the compatibility of email types for a potential calendar feature.

Either way, this approach using the FullCalendar library represents only a basic feature of displaying calendar events based on a specified calendar source. It wouldn't provide us the power to manipulate these calendar events obtained from an external source.

If we want to be able to implement stretch goals of showing specific events from the calendar on Project Detail pages or include calendar updates in the "New updates" digest, a more complex calendar system, perhaps one built in-house will be required.

[hollandjg]

• Display the events from a publicly shared iCalendar/.ics calendar
• Allow users access to that calendar
• Stretch goal: Show specific events from the calendar in the Project Detail page
• Stretch goal: Include calendar updates in the “New updates” digest

[jashlu]

https://fullcalendar.io/docs/icalendar

• trying out FullCalendar package, seems to be the most popular/recommended library for calendar
• Tried with iCalendar plugin provided by fullcalendar packag, all you need is to provide the ".ics" link for the package.
• Attempted with my google calendar .ics path, also tried finding .ics link for Apple iCal but cannot find.
• Could not get it to work with google calendar .ics path, tried making my calendar public, also tried "secret" .ics url provided by google as well.

https://fullcalendar.io/docs/google-calendar

• trying this next, implementing google calendar through google api
• assumption that google calendar will be the most popular source of iCalendar anyways, could be an alternative

[jashlu]

May need to write own ical parser, there are many examples online, but it seems like the logic is easy enough to make our own, and make sure it does what we need it to. Ex. https://github.com/jens-maus/node-ical

• We need to trigger the curl to get data from the .ics file and have it formatted in a way that makes it easy for us to query for potential "project detail" details.
• Calendar data will be separate from cms data.
• It will have to be formatted into a file, maybe json like the rest of our data, in order for our email-service to query these files and detect calendar updates for potential "New Updates" feature
• we will need some way of standardizing how we link these calendar events to the actual projects. Such as using the slug. Hard to enforce, and. could be a weak point in this implementation as we will be relying on user-generated slug to make the relationship between calendar event and project.
• we can feed the .ics file in its own format to the FullCalendar prop.

[jashlu]

Using google api works
as shown below

 <FullCalendar
          plugins={[dayGridPlugin, googleCalendarPlugin]}
          initialView="dayGridMonth"
          eventSources={
            {
              googleCalendarApiKey: '....',
              googleCalendarId: '[email protected]'
            }
          }
        />

[jashlu]

[jashlu]

Google calendar "sync token" https://developers.google.com/calendar/api/guides/sync

Could be interesting, method to efficiently keep local calendar data up-to-date with changes happening on remote google calendar.

First, it does initial full sync, to make sure local calendar matches everything on the remote server. You collect all info from the server and store.. perhaps in json files?
After collecting data, you get special token from server (sync token)
If you want to find out what's new or has changed since last sync, send sync token to server, and it sends you all the new and changed stuff since last sync.

[jashlu]

https://developers.google.com/calendar/api/guides/push

has built-in push notification system as well to send notifications when changes are made to the calendar

[jashlu]

@thepolicylab-projectportals/renci

Here is an in-progress feature that we simply did research on. Passing on to you all!