[feature request] iCal component (use-case: render ICS provided by Google Calendar endpoint)

[vadimkantorov]

Often calendar systems allow export of iCal (in ICS format - so ical.js can be used for parsing), this lets one do a generic component rendering information about events.

For instance, events from a public Google Calendar can be accessed via https://calendar.google.com/calendar/ical/{google_calendar_id}@group.calendar.google.com/public/basic.ics?orderby=starttime&sortorder=descending, even without setting up an API key

This endpoint provides several events (could not figure out a query string parameter for filtering a single event by id), they have properties like name, description, location (it would be nice to be able to render it as a link to Google Maps or as a small Leaflet JS), times. It would be nice to have a basic nice-looking component for rendering these

The only tricky part would be on correctly displaying recurrent events: https://github.com/kewisch/ical.js/wiki/Parsing-iCalendar#recurring-events

[delucis]

Interesting. We’ve mostly focused on small contained embeds so far — this one feels like it could be very sprawling potentially (daily/weekly/monthly views, styles, sizes, etc.) and require a completely custom UI (where most of our embeds re-use or mimic a single standard presentation of the content). So seems like a big lift, but I’m not opposed in principle. It is a good candidate for something that can get read and rendered statically I suspect.

Not something I’ll personally have time to implement, but not opposed to someone else attempting to write the code for this!

[vadimkantorov]

My usecase was to just display a list of upcoming offline events for a small NGO website (with maybe one recurrent event). I'm displaying it just as ul > li > article list with small card with fields: summary, description, location, dtstart, dtend.

An interesting case could be to check how Google Calendar provides the URL for images attached in the event. If provided, this image could be used as a lead image for the event card.

So my take would be to just have some small generic card layout with some semantic fields ( and have some CSS classes set, so that the user can customize as they see fit), and have some utils for preparing ICS for displaying these cards.

So I was not proposing to actually display calendar table or anything like that.

[eveeifyeve]

What about a google calendar embed?

https://support.google.com/calendar/answer/41207?hl=en

[vadimkantorov]

What about a google calendar embed?

It's possible, but it doesn't offer the full customization that the static component / custom CSS can add. And the Google Calendar embed would likely ensue Google trackers (and having to add a GDPR cookie consent)

[delucis]

Just stumbled across this, so dropping it here for safe keeping: https://github.com/Neuvernetzung/ts-ics