Adding the helio community events calendar

[jibarnum]

Added the calendar Barbara (and now I) manage to our PyHC page for anyone interested in seeing more general helio/space physics workshops/meetings (many of which are relevant to PyHC members). I'm amenable to not embedding the calendar itself and just having a link. What do you think looks best?

[jtniehof]

Embedding it underneath the PyHC calendar makes sense to me; then it's readily available but not blocking access to anything else.

Two suggestions: -In addition to the embed in the page, make the link to https://helioanalytics.io/events-calendar instead of linking the embed again--that puts it in context -Consider removing the explicit setting of the timezone to Mountain. It's hard to tell what the default is (calendar default? user profile somehow?) If I remove the explicit ctz on the PyHC calendar I still get Mountain, whereas the HelioAnalytics one I get Eastern. Both embedded calendars probably should display in the same TZ, so if they have to be forced to get that, MT makes sense--but if it can be user's TZ, that would be more convenient.

[jibarnum]

Thanks for catching those @jtniehof . I searched, and found a solution that will work... for one calendar. Welcome, the Stack Overflow sol'n:

<div id="calendar-container"></div>
<script type="text/javascript">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
const html = `<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23f9e79f&showTitle=0&title=PyHC%20Events&showDate=1&showPrint=0&showTabs=1&showCalendars=0&showNav=1&src=NG42Z3YyaWZncDZyZ25rOGF1N2pzZjF1azBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%237CB342&ctz=${timezone}" width="100%" height="600" frameborder="0" scrolling="no"></iframe>`
document.getElementById('calendar-container').innerHTML = html;
</script>

Only problem is I'm not a markdown/HTML wiz and I'd need to duplicate this again for the Helio community events calendar... but to my knowledge, you aren't allowed to do the same div id twice? Not sure of the way around it atm.

[jtniehof]

Thanks for catching those @jtniehof . I searched, and found a solution that will work... for one calendar.

Ah, SO, the cause of, and solution to, all our problems. Far more ambitious than I was thinking...I was just wondering if there were a way to make it Google's problem.

Not being enough of a JS + MD + BS + whatever expert to Do It Right (with a truly global const or just local variables), my suggested fudge is to copy/paste, and for the second calendar use timezone2 and html2. (Probably calendar-container2 as well, of course.)

Could probably be mildly nicer and do:

<div id="pyhccalendar-container"></div>
<div id="helioanalyticscalendar-container"></div>
<script type="text/javascript">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
const pyhchtml = `<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23f9e79f&showTitle=0&title=PyHC%20Events&showDate=1&showPrint=0&showTabs=1&showCalendars=0&showNav=1&src=NG42Z3YyaWZncDZyZ25rOGF1N2pzZjF1azBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%237CB342&ctz=${timezone}" width="100%" height="600" frameborder="0" scrolling="no"></iframe>`
const helioanalyticshtml = `<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23f9e79f&showTitle=0&titleFIXTHISALLTOTHECORRECTURLOFCOURSE&showDate=1&showPrint=0&showTabs=1&showCalendars=0&showNav=1&src=NG42Z3YyaWZncDZyZ25rOGF1N2pzZjF1azBAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&color=%237CB342&ctz=${timezone}" width="100%" height="600" frameborder="0" scrolling="no"></iframe>`
document.getElementById('pyhccalendar-container').innerHTML = pyhchtml;
document.getElementById('helioanalyticscalendar-container').innerHTML = helioanalyticshtml;
</script>

(although that's not putting anything between the calendars and, eh, maybe best just to duplicate everything. Repeating the TZ call isn't exactly hideous.)

[sapols]

I got dis.

[jtniehof]

@jtniehof as our resident not-in-mountain-time person, can you confirm it works for you?

I'm not sure how to do that--any trick to get the rendered output as it would be on the site? The GH preview of the MD (shockingly) doesn't send arbitrary JavaScript through to the browser.

[sapols]

@jtniehof as our resident not-in-mountain-time person, can you confirm it works for you?

I'm not sure how to do that--any trick to get the rendered output as it would be on the site? The GH preview of the MD (shockingly) doesn't send arbitrary JavaScript through to the browser.

Oh crap, duh! Sorry! Totally blanked that firing up the website from a feature branch is a whole thing. Don't worry about it. It works. You can trust me. Lol

Once @jibarnum okays my text change we can merge and you'll see for yourself. 😅

[jibarnum]

@sapols @sapols I fudged the timezone thing by going in and changing my system settings to be a totally different timezone and rerunning the bundle exec jekyll serve command 🤓. The changes look great, thanks Shawn! I don't know why, but google doesn't have a simple feature itself to allow a user to select their own timezone, so this annoying workaround is necessary. I'm happy with a merge!

[sapols]

@jtniehof boom: https://heliopython.org/meetings/

[jtniehof]

@jtniehof boom: https://heliopython.org/meetings/

Now if we can just get it not to say "New York"... ;)

[sapols]

Dream on :)