💾 Archived View for gemini.robrohan.com › 2018-02-15-webcomponent-schedule.md captured on 2022-06-11 at 23:32:34. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2022-04-28)
-=-=-=-=-=-=-
---
author: rob
date: 2018-02-15 08:00:00+11:00
slug: ical-web-component
title: Web Components and Training Plans
---
[Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are the future... at least that's what this news letter I read said.
I like the promise of web components. They basically, seem to me, to be Angular 5 / React like functionality built into standard HTML. They give you the ability to create new tags for HTML that do super special things.
I've been wanting a way to publish and share some basic .ics (ICalendar) files on my [running / triathlon site](https://bloodynipples.com).
I [use emacs to create my training plans](https://www.youtube.com/watch?v=gGO4RPzAKQY), and then export them to _.ics_ files. I can use those on my desktop and iPhone, but I was after a simple way to share them with people in general. Not that anyone cares mind you, it just seemed like an interesting thing to do.
So I threw together a simple little proof of concept web component to load _.ics_ files, and display the events in a GitHub style contribution graph.
The graph css code is mostly lifted from this [cool article by Ire Aderinokun](https://bitsofco.de/github-contribution-graph-css-grid/?utm_source=frontendfocus&utm_medium=email). Here is basically all you'd have to add to your web page (after include in the head section):
<rohan-schedule year="2016" files="/static/assets/plan.ics"></rohan-schedule>
Here is what it looks like:
<rohan-schedule year="2016" files="https://raw.githubusercontent.com/robrohan/schedule/master/static/assets/plan.ics"></rohan-schedule>
I think this might be a useful component for some fitness sites that do custom training plans (especially if they are somehow generated and allow you to pick a start or a race date). Or maybe for popular fitness people like [Rich Roll](http://richroll.com) or [Scott Jurek](http://www.scottjurek.com) to post their yearly training plans so people can "train along".
You can [see the code here](https://github.com/robrohan/schedule). The code is proof of concept but it is usable enough for my purposes. I think the source is a pretty straight forward example of a basic web component (albeit in a stream of consciousness design style). I wouldn't use if for anything too serious, but you might find it a good starting point.