src/FilterItem.svelte

@@ -6,6 +6,8 @@
   import { createTriState, createTriStates, UNCHECKED, CHECKED, WEIRD } from './stores';
   import { Icon } from 'sveltestrap';
 
+  import { mkSource } from './calendar.js';
+
   export let item = null;
   export let level = 1;
   export let generalToggle = undefined;
@@ -78,6 +80,11 @@
     });
   }
 
+  const url = (() => {
+    const source = mkSource(item);
+    return source ? source.export_url : undefined;
+  })();
+
   $: selected =
     $filtering === CHECKED ? [item, ...subselected.flat()] : subselected.flat();
   $: subHidden = () => (collapsed ? 'd-none' : '');
@@ -90,6 +97,7 @@
       on:change={handleChange}
       value={item}
       bind:collapsed
+      {url}
     />
   </div>
 

src/TriStateCheckbox.svelte

@@ -4,6 +4,7 @@
   export let state;
   export let value;
   export let collapsed = undefined;
+  export let url;
 
   import { UNCHECKED, CHECKED, WEIRD } from './stores';
   import { createEventDispatcher } from 'svelte';
@@ -28,14 +29,32 @@
 <span class="cal w-100 d-block" on:click={handleClick}>
   <Icon name={icon} class="ms-2" />
   <span class="ms-1">{value}</span>
-  {#if collapsed !== undefined}
+  <span class="float-end">
-    <span class="float-end" on:click|stopPropagation={() => (collapsed = !collapsed)}>
+    {#if url}
-      <Icon name={chevron} />
+      <a href={url} class="cal-link" download={value} on:click|stopPropagation>
-    </span>
+        <Icon name="cloud-download" />
-  {/if}
+      </a>
+    {/if}
+
+    {#if collapsed !== undefined}
+      <span class="cal-link" on:click|stopPropagation={() => (collapsed = !collapsed)}>
+        <Icon name={chevron} />
+      </span>
+    {/if}
+  </span>
 </span>
 
 <style>
+  .cal-link {
+    margin-right: 0.5rem;
+    padding: 3px;
+    color: inherit;
+  }
+  .cal-link:hover {
+    color: #aabbfe;
+    text-shadow: 2px 2px 3px #62a1fe;
+  }
+
   .cal {
     cursor: pointer;
     padding: 0.2em;

src/calendar.js

@@ -82,6 +82,10 @@ function mkCalendarUrl(id, { cloud }, extra = {}) {
   )
 }
 
+function mkExportUrl(id, { cloud }) {
+  return `/cal/${cloud}/${id}/?export`
+}
+
 function fetchCalendar(id, cal, extra = {}) {
   return fetch(mkCalendarUrl(id, cal, extra), { credentials: 'omit' })
     .then(resp => resp.json())
@@ -178,6 +182,7 @@ export function mkSource(name) {
         start: start.valueOf() / 1000,
         end: end.valueOf() / 1000
       }).then(successCallback, failureCallback)
-    }
+    },
+    export_url: mkExportUrl(calendarId, calendar)
   }
 }