Displaying/Embedding an ICS calendar

[noatamir]

Hi folks,

Does anyone have an example for how to display an ICS calendar in their Quarto website?
I found a couple of JS methods folks shared for website in general, but I haven't seen an example for how to include it in Quarto, and I want to be sure I'm doing it right 😇 .

Thanks in advance!

[jawadakhan97]

Looking into this as well. Seems most use something called an iFrame to embed a calendar from some other service (typically Google Calendar).

I was working on making a website for an academic group, they have short presentations, a mailing list, etc. Quarto would be wonderful because it could easily host academic works (stuff like a bibliography, citations for their presentations, etc.)

At present I'm looking at hosting the site using GitHub Pages, using GitHub Actions to update the calendar. I'm looking into Python packages (I don't know JavaScript) that can produce a CalDav server or .ics file.

I'll update if I figure something out. If there was a Quarto extension for this that would make life so much easier.

[mcanouil]

Any solution using HTML/Javascripts/etc. should work on Quarto either by including the code in include-* YAML keys and/or in the body within a raw block code ```{=html}.
There are plenty of examples in the discussion part of this repository.

See https://quarto.org/docs/output-formats/html-basics.html#includes.

Additionally, one could make an extension out of a JavaScript library: https://quarto.org/docs/extensions/creating.html

[jawadakhan97]

thanks for the response, for clarity's sake (and to perhaps ensure future searches have a specific solution rather than a broad one), could i ask your thoughts on a specific case in line with what you mentioned? to save the trouble of other folks who may have the same or similar goal as myself and @noatamir

CASE:
presuming an .ics file is within the project directory and available to a webpage, e.g. index.qmd with URL https://www.domain.tld/embedded-calendar and a include-before-body:

would the following js package, with this example blog post with this repo, and this demo involve the following:

---
title: embedded-calendar
author: testpersonpleaseignore
filters:
   - ???
include-before-body:
  text: |
    <script>
      custom_display.FUNCTION({
        ICS FILE
      });
    </script>
---

thanks for your help, really appreciate the resources you shared, i obviously looked at them before, but i didn't understand them until you pointed it out (and mentioned examples on the repo), perhaps fleshing out documentation for that could help folks like me who have trouble understanding js/html stuff with quarto that is not R or Python which has ample examples and very easy (and why i use quarto in the first place...)

[mcanouil]

I'm afraid that you have to handle the JavaScript/HTML part yourself, this includes finding the right code and the right library to do what you want as this is out of Quarto scope.
It's very unlikely you get something other than a "broad answer/solution" because I and other don't have the time to make all I suggested and to address all question like this from all users.
There are way better places to learn and ask questions about JS/HTML.

So from the two links I shared, it would mean the following:

• Either you create a filter and/or an extension to embed the JavaScript code (look at the various extensions that already exist):

---
filters:
   - include-ics.lua
---

• or include directly the whole code at the appropriate place in the HTML document.
  The position depends on what the JavaScript is doing, but again this is unrelated to Quarto and is a pure JS/HTML question.

---
include-in-header:
  text: |
    <script>
    </script>
include-before-body:
  text: |
    <script>
    </script>
include-after-body:
  text: |
    <script>
    </script>
---

[jawadakhan97]

ok, fair enough, thanks for the help