Attempt a shortcode for the schedule overview

assets/js/schedule.js

@@ -0,0 +1,27 @@
+// Day picker for the schedule shortcode. The CSS only uses it on narrow screens;
+// without JavaScript all days stack vertically there.
+for (const schedule of document.querySelectorAll('[data-schedule]')) {
+  const picker = schedule.querySelector('.schedule__picker');
+  const buttons = [...picker.querySelectorAll('button')];
+
+  const select = (selected) => {
+    for (const button of buttons) {
+      const isSelected = button === selected;
+      button.setAttribute('aria-pressed', isSelected);
+      document
+        .getElementById(button.getAttribute('aria-controls'))
+        .classList.toggle('schedule__day--selected', isSelected);
+    }
+  };
+
+  for (const button of buttons) {
+    button.addEventListener('click', () => select(button));
+  }
+
+  // During the event, start on today's tours. The 'sv' locale formats as YYYY-MM-DD.
+  const today = new Date().toLocaleDateString('sv');
+  select(buttons.find((button) => button.dataset.date === today) ?? buttons[0]);
+
+  picker.hidden = false;
+  schedule.classList.add('schedule--picker');
+}