Display your ics calendar on your website
TL;DR: the repository of our fork of Leonaard’s original project is available here.
This started off as a simple-enough request to display a calendar in ICS format (RFC5545) on a web page.
Turns out, it’s not something so easily found. After searching for a while, it soon appeared that there was an elephant in the room that had not been addressed much to bring together the 2 big JavaScript projects around ICS and calendar display:
- ical.js (github repository)
- fullcalendar.js (website, github repository)
Eventually we spotted 2 small projects (turns out you don’t need a lot of code to get an ics URL converted and loaded into fullcalendar) doing just what we needed, and further work was done from Leonaard’s project icalendar2fullcalendar (github repository).
The edited code is terribly hack, but it does all we want so far, and it should work fine for 99% of use cases.
You can find everything on our gitlab repository which contains:
- all code (including copy of ical.js and fullcalendar.js (in the versions that were used/modified for this particular project).
- a README.md file containing information on where to set the ics feed(s)
- a ‘french’ branch is also available on the repo
A working demo is running at https://nomagic.uk/js_calendar_from_ics/
note: be mindful of CORS when testing with your own feeds. Also, many feeds out there do not have the CORS rule that would allow you to load them from your own domain.
Tips: if you want to add an ICS calendar to Android, you can use ICSx5 / https://icsx5.bitfire.at/ , from Bitfire Web Engineering, the awesome team behind DAVx5 — former DAVDroid.
Some good links:
https://www.bitfire.at/
Those tools are FOSS and of amazing quality, please donate!
https://icsx5.bitfire.at/donate/
Hi. I’m no dev, at least not since the days of Cobol and Fortran! Would you consider a donation or other remuneration in lieu of coding two ICS URLs, either are separate pages as you’ve described above or, for extra points, as a single calendar that display both ICS’ events in one view?
Hello,
Well I’m no developer either! We just managed to extract and use two great functionalities from two interesting FOSS programs. If you need this to work with newer versions of fullcalendar.js, this is likely to require some dev work indeed, but I’m not up to the task unfortunately (may be worth checking if it hasn’t been included to the code since then, though).
Otherwise, as it is, you can load the ics feeds of your choice (check on the gitlab repo for a brief howto).
Nice project, not sure if it existed before, but I implemented this solution (adding ics feed to a calendar and add it to my website) using Candifly (candifly.com).
Cheers.
Candifly looks nice, but it’s a GAFAM-dedicated, proprietary solution. So, not really a solution if you are into FOSS philosophy.
How would this work with Baikal CalDAV? I’m having trouble understanding how Baikal would export an ICS file automatically (pretty sure it’s a manual thing) then tie it into this program.
What I’m looking to do is have a calendar appear on a website without having to enter a users credentials. I’m unsure of how this would technically work in realtime with a user updating the calendar from another client, say Thunderbird, and having the updates automatically update the calendar on the site.
Thanks
Pat
Hello,
Can’t say about baikal, but Sogo does allow you to share a calendar publicly in the form of an ICS link.
There may be some form of realtime, but only if you manage both the server providing the ICS file and the server displaying that file. In this case you just need to set up the URL in the javascript, the source ICS file will be loaded everytime the page is loaded.
Otherwise, CORS will prevent you from dynamically sourcing remote ICS files.
However, it’s very simple to set up a cron job which downloads the ICS file(s) periodically.
For example, in our case:
# once a month for UK England and Wales Bank Holidays
30 * 1 * * myuser curl https://www.XXXX.uk/bank-holidays/england-and-wales.ics -o /var/www/nomagic/calendars/gov.uk/events.ics
# same for French holidays
30 * 1 * * myuser curl https://XXXX.github.io/jours-feries-france-data/ics/jours_feries_metropole.ics -o /var/www/nomagic/calendars/gouv.fr/events.ics
Now if you want to keep this a lot more simple, I can’t recommend enough the Nextcloud calendar plugin, which comes with options to make a calendar display publicly. It just does it all: provide ICS AND a human-readable good old calendar on the screen.
Got it working after some cors issues. Just pulled the files with a .sh and crontab locally. Any idea how to reduce the number of days displayed? I have a limited amount of height available on my display and im loosing the bottom section.