W3C Calendar with fullcalendar library

[danielpeintner]

TODOs:

• [ ] use online ICS file instead of local one (easier for now w.r.t. testing)
• [x] add complete list of timezones in TZ selector
• [x] listen onload events to collect W3C events
• [ ] start website with local timezone as we used to have?
• [ ] rephrase intro text "We have grouped our weekly meetings in the table below...."
• [x] limit view to weekdays only

ISSUES:

• [ ] changing week to month view does not reload timezone correctly
• [ ] moment(..) always reports local time
• [ ] repeat events not shown after TZ changer
• [x] avoid calendar entry being editable

fixes https://github.com/w3c/wot-marketing/issues/268

[netlify[bot]]

✅ Deploy Preview for wot-marketing ready!

Name	Link
🔨 Latest commit	bb59156d59fff97f144b7166c4327c8a80c77c15
🔍 Latest deploy log	https://app.netlify.com/sites/wot-marketing/deploys/6478370ce6d9a10007281afc
😎 Deploy Preview	https://deploy-preview-420--wot-marketing.netlify.app/activities/meetings
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[egekorkan]

This is actually pretty good for a first try. I agree with the improvements above. Also not showing the useless days (Friday, Saturday, Sunday) and useless hours (where there are no meetings) would be nice improvements that can be done in another PR

[danielpeintner]

Also not showing the useless days (Friday, Saturday, Sunday)

Partially done. It does no longer show weekends

useless hours (where there are no meetings) would be nice improvements

This, I think, is hard to do since changing the timezone makes other hours useful et cetera

[danielpeintner]

There is somehow an issue with ICS and the combination of fullcalendar&timezones.

There are simple examples like https://fullcalendar.io/docs/timeZone-demo

Unfortunately.. this does NOT work with ICS files.. like we use now

            events: {
                url: 'localCopy.ics',
                // url: 'https://www.w3.org/groups/ig/wot/calendar/export',
                format: 'ics'
            },

Once I change it to something like the following it does work

            events: [
                {
                  title  : 'event3',
                  start  : '2023-05-31T12:30:00',
                  end    : '2023-05-31T14:30:00',
                  allDay : false // will make the time show
                }

So either we find the reason for it or we need to parse the ICS file on our own... which wouldn't be an issue since we have https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.min.js but we also need to convert it to the format fullcalendar is looking for...

Any ideas/proposals...

[egekorkan]

but we also need to convert it to the format fullcalendar is looking for...

I think that the library you have used before (https://gitlab.nomagic.uk/popi/js_calendar_from_ics/-/tree/master/) is doing exactly that no?

[danielpeintner]

I think that the library you have used before (https://gitlab.nomagic.uk/popi/js_calendar_from_ics/-/tree/master/) is doing exactly that no?

Maybe, did not look into it more closely... the library we are using (https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.js) does also something along these lines but I guess it is better if we can rely on the library. Hence I opened https://github.com/fullcalendar/fullcalendar/issues/7364

For the time being I think we can also have a simple solution for now.

[egekorkan]

Call of 06.06:

• This is a simple approach that uses ics and not the W3C API. So we do not have a strong dependency on W3C systems.
• We should not redo the work of W3C Systems team

[egekorkan]

Call of 13.06: Let's wait 2 weeks to see any progress on the abovementioned issue. Otherwise, we can switch to https://gitlab.nomagic.uk/popi/js_calendar_from_ics/-/tree/master/ and do the timezone changes before passing it to the fullcalendar.

[egekorkan]

Call of 11.07: @danielpeintner will try with the js_calendar_from_ics from above. If that works, no manual timezone conversion is needed. https://gist.github.com/danielpeintner/c2a744aa2c37574d7e2e16686e64f84d can be used as the starting point.

[danielpeintner]

I quickly looked into the library and I think it works somehow.. anyhow.. the library seems to have issues with timezone again 🤷‍♂️

https://gitlab.nomagic.uk/popi/js_calendar_from_ics/-/blob/master/js/ical_fullcalendar.js#L10-13

[egekorkan]

Call of 18.07:

• We need to transform strings like DTSTART;TZID=America/New_York:20230620T080000 to full calendar json using the script above. Full Calendar requires start: '2018-09-01T12:30:00+XX:XX'. Since we know that all W3C events are in East Coast tz, we can hardcode the +XX:XX to UTC -5. Then, as shown in the demo (https://fullcalendar.io/docs/timeZone-demo), we can transform that to the local timezone of the browser client.

[egekorkan]

Now fixed via #495