ICalendar2web
Render an iCalendar feed as a HTML calendar or as JSON
Install / Use
/learn @200ok-ch/ICalendar2webREADME
- Rationale
We all use calendars. Some digital calendars have a standardized interface called iCalendar (see [[https://en.wikipedia.org/wiki/ICalendar][Wikipedia]]). This iCalendar2web microservice is for the times when you do have an iCalendar feed (for example a meetup group or a Google calendar), and you want to show them quickly on a website. The microservice either yields a ready to use HTML table that you can inject, or it returns the events in a simplified JSON structure.
You can host this project yourself or you can use a hosted SaaS version (see below).
** Initial use case
Meetup is great to organize your local meetup. Meetup also has great sharing and API options. They do support embedding the meetup group together with the next meetup. However, there is no out-of-the-box support to embed your schedule to another website.
This is a Ruby Sinatra project can solve this issue by accessing the [[https://www.meetup.com/meetup_api/feeds/][Meetup calendar feeds API]].
As the abbot of the [[https://zen-temple.net/lambda-zen-temple/introduction/][Lambda Zen Temple]], I post the daily meditation schedule and several other events to Meetup. However, I want that schedule also to be seen on our website. You can see this as a demo [[https://zen-temple.net/zen-temples/lambda-zen-temple/zen-meditation-schedule/][here]].
*** Plain
[[file:images/html_example.png]]
*** Integrated into a website
[[file:images/integrated_example.png]]
*** JSON Response
Request: #+BEGIN_SRC restclient GET http://localhost:9292/meetup/Zen-Meditation-Schweiz?filter=retreat&format=json #+END_SRC
Results: #+BEGIN_SRC js [ { "name": "One-Day-Retreat", "start_time": "2019-08-25T10:00:00.000+02:00", "end_time": "2019-08-25T17:00:00.000+02:00" }, ... ] #+END_SRC
** Alternative use case
You can do the same for any calendar application that exports iCalendar via HTTP. For example, if you want to embed a Google calendar filtered down to specific keywords to your website.
** Use as a Service
iCalendar2web is generic in that it can render any public Meetup schedule. Instead of installing iCalendar2web yourself, you can use this hosted version:
[[https://icalendar-to-web.herokuapp.com/calendar/YourQualifier]]
With =YourQualifier= being the Meetup Group URL, eg "Zen-Meditation-Schweiz".
*** iFrame
If you want to embed it to your own website, use an iframe - similar to Youtube:
#+BEGIN_SRC html
<iframe width="800px" height="800px" src="https://icalendar-to-web.herokuapp.com/calendar/Zen-Meditation-Schweiz" frameborder="0"> </iframe> #+END_SRC*** Load via Ajax
You can also load the html via Ajax into your page. For example if you want to show a loading spinner upfront. The required access-control headers are set on this service, so no worries about CORS.
#+BEGIN_SRC javascript $.get("https://icalendar-to-web.herokuapp.com/calendar/MyMeetupGroup", function(data) { $("#my-schedule").html(data); }); #+END_SRC
- Configuration
For iCalendar2web to run, you need to set a base URL. Most generic calendar applications will export their various calendars using a URL scheme.
For example for meetup.com:
#+BEGIN_SRC shell export ICALENDAR_URL="https://www.meetup.com/PLACEHOLDER/events/ical/" #+END_SRC
For example for a Google calendar:
#+BEGIN_SRC export ICALENDAR_URL="https://calendar.google.com/calendar/ical/PLACEHOLDER.calendar.google.com/public/basic.ics" #+END_SRC
The PLACEHOLDER is the param you enter via =YourQualifier=.
- Parameters
iCalendar2web takes the following parameters:
- =filter=: takes a RegExp to filter the name of the meetup
- =show_from_to=: when set, this changes the default table columns from |date|time| to |date from|date to|
- =limit=: set a limit of how often a specific meetup shall be repeated in the table, the default is 25. This flag is not supported for the =json= response.
- =format=: when set to =json=, it returns the results as JSON and not as an HTML table
** Examples
-
=/calendar/YourQualifier=
- will show all events with the table columns |date|time|
-
=/calendar/YourQualifier?format=json=
- will show all events rendered in a JSON list
-
=/calendar/YourQualifier?limit=5=
- will show up to 5 events per category with the table columns |date|time|
-
=/calendar/YourQualifier?limit=5&filter=retreat=
- will show up to 5 events that include 'retreat' in the title with the table columns |date|time|
-
=/calendar/YourQualifier?limit=5&filter=retreat&show_from_to=1=
- will show up to 5 events that include 'retreat' in the title with the table columns | date from | date to |
- Deployment
** Heroku
Please refer to the documentation of Heroku to install
https://devcenter.heroku.com/articles/rack
- Running
Install Ruby (using [[https://github.com/rbenv/rbenv][rbenv]] in this example):
#+BEGIN_SRC shell rbenv install #+END_SRC
Install dependencies:
#+BEGIN_SRC shell gem install bundler bundle #+END_SRC
Configure your iCalendar target URL by setting (more information see [[*Configuration][Configuration]]):
#+BEGIN_SRC shell export ICALENDAR_URL="https://www.meetup.com/PLACEHOLDER/events/ical/" #+END_SRC
Run the application:
#+BEGIN_SRC shell rackup config.ru #+END_SRC
Related Skills
node-connect
348.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
108.8kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
348.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
348.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签,系统根据文件扩展名自动识别类型(图片/语音/视频/文件)。
