From 71ffcd3d467e74ff658fb308345e015d8a1e3e93 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Sat, 25 Jul 2026 18:56:18 +0200
Subject: [PATCH 01/11] ical import first version

---
 src/assets/locales/cs.json              |  10 +-
 src/assets/locales/en.json              |  10 +-
 src/components/modals/CalendarModal.vue | 328 ++++++++++++++----------
 src/types/core.ts                       |   8 +-
 4 files changed, 220 insertions(+), 136 deletions(-)

diff --git a/src/assets/locales/cs.json b/src/assets/locales/cs.json
index 7dfc170..797099d 100644
--- a/src/assets/locales/cs.json
+++ b/src/assets/locales/cs.json
@@ -48,7 +48,9 @@
     "password": "Heslo/Token",
     "encrypted": "Šifrování",
     "encryptionKey": "Šifrovací heslo",
-    "readonly": "Pouze čtení"
+    "readonly": "Pouze čtení",
+    "file": "Soubor",
+    "destination": "Importovat do"
   },
   "tag": {
     "name": "Jméno",
@@ -94,6 +96,8 @@
   },
   "saveBtn": "Uložit",
   "savingBtn": "Ukládání...",
+  "importBtn": "Importovat",
+  "importingBtn": "Importování...",
   "createBtn": "Vytvořit",
   "closeBtn": "Zavřít",
   "cancelBtn": "Zrušit",
@@ -127,7 +131,9 @@
   },
   "message": {
     "confirmCalendarDelete": "Chcete opravdu smazat celý kalenář?",
-    "errorRemoteUrlEndDotGit": "Remote URL musí končit \".git\"."
+    "errorRemoteUrlEndDotGit": "Remote URL musí končit \".git\".",
+    "errorICalUrlEndDotIcs": "iCalendar URL musí končit \".ics\".",
+    "noWritableCalendars": "Před importem souboru vytvořte zapisovatelný kalendář."
   },
   "colors": {
     "blue": "Modrá",
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 619a803..88616c7 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -48,7 +48,9 @@
     "password": "Password/Token",
     "encrypted": "Encrypted",
     "encryptionKey": "Encryption key/password",
-    "readonly": "Read-only"
+    "readonly": "Read-only",
+    "file": "File",
+    "destination": "Import into"
   },
   "tag": {
     "name": "Name",
@@ -94,6 +96,8 @@
   },
   "saveBtn": "Save",
   "savingBtn": "Saving...",
+  "importBtn": "Import",
+  "importingBtn": "Importing...",
   "createBtn": "Create",
   "closeBtn": "Close",
   "cancelBtn": "Cancel",
@@ -127,7 +131,9 @@
   },
   "message": {
     "confirmCalendarDelete": "Do you really want to delete the whole calendar?",
-    "errorRemoteUrlEndDotGit": "Remote URL must end with \".git\"."
+    "errorRemoteUrlEndDotGit": "Remote URL must end with \".git\".",
+    "errorICalUrlEndDotIcs": "iCalendar URL must end with \".ics\".",
+    "noWritableCalendars": "Create a writable calendar before importing a file."
   },
   "colors": {
     "blue": "Blue",
diff --git a/src/components/modals/CalendarModal.vue b/src/components/modals/CalendarModal.vue
index 96d14a9..1082ced 100644
--- a/src/components/modals/CalendarModal.vue
+++ b/src/components/modals/CalendarModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, watch, onMounted, useTemplateRef, ref, computed } from 'vue';
+import { reactive, watch, onMounted, useTemplateRef, ref, computed, type DeepReadonly } from 'vue';
 import MultiToggle from '@/components/MultiToggle.vue';
 import { CalendarCore } from '@/wasm/core-wrapper';
 import { useCalendarModal } from '@/composables/modals/useCalendarModal';
@@ -7,21 +7,24 @@ import type { Calendar } from '@/types/core';
 import { useAlertModal } from '@/composables/modals/useAlertModal';
 import { useI18n } from 'vue-i18n';
 import { syncAllWrapper } from '@/services/gitSync';
-import { refreshCalendars } from '@/services/calendarCache';
+import { cachedCalendars, refreshCalendars } from '@/services/calendarCache';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
 
 const { t } = useI18n();
 const thisModal = useCalendarModal();
 const { alert, confirm } = useAlertModal();
 
-const originalCalendar = ref<Calendar | undefined>();
+const originalCalendar = ref<DeepReadonly<Calendar>>();
 const isSaving = ref(false);
 const isDeleting = ref(false);
 const isLocked = computed(() => isSaving.value || isDeleting.value);
 
-const howOptions = ['Init', 'Clone'];
+const howOptions = ['Init', 'Clone', 'iCal'];
+const iCalSourceOptions = ['URL', 'File'];
+const writableCalendars = computed(() => cachedCalendars.value.filter((calendar) => !calendar.readonly));
 const form = reactive({
   how: 'Init',
+  iCalSource: 'URL',
   name: '',
   remoteURL: '',
   username: '',
@@ -29,40 +32,47 @@ const form = reactive({
   encrypted: false,
   encryptionKey: '',
   readonly: false,
+  destination: writableCalendars.value[0]?.name ?? '',
+  file: undefined as File | undefined,
 });
-const errors = reactive({
-  missingName: false,
-  badURL: false,
+
+const isICal = computed(() => form.how === 'iCal');
+const isICalURL = computed(() => isICal.value && form.iCalSource === 'URL');
+const isICalFile = computed(() => isICal.value && form.iCalSource === 'File');
+const saveButtonText = computed(() => {
+  if (thisModal.isNew.value && isICal.value) {
+    return t(isSaving.value ? 'importingBtn' : 'importBtn');
+  }
+  return t(isSaving.value ? 'savingBtn' : 'saveBtn');
+});
+const urlPlaceholder = computed(() => {
+  if (isICal.value) return 'URL';
+  return form.how === 'Init' ? `Remote URL (${t('optionalText')})` : 'Remote URL';
 });
 
 watch(
-  () => thisModal.openedCalendarName,
-  async (newName) => {
-    const calendars = await CalendarCore.listCalendars();
-    for (const cal of calendars) {
-      if (cal.name === newName.value) {
-        originalCalendar.value = cal;
-        break;
-      }
-    }
-    if (originalCalendar.value) {
-      updateFormFromCalendar(originalCalendar.value);
-    }
+  thisModal.openedCalendarName,
+  (name) => {
+    resetForm();
+    originalCalendar.value = cachedCalendars.value.find((calendar) => calendar.name === name);
+    if (originalCalendar.value) updateFormFromCalendar(originalCalendar.value);
   },
   { immediate: true },
 );
 
-function updateFormFromCalendar(calendar: Calendar) {
-  resetForm();
-
-  if (!calendar) return;
-
-  form.how = '';
-  form.name = calendar.name ?? '';
+function updateFormFromCalendar(calendar: DeepReadonly<Calendar>) {
+  form.name = calendar.name;
   form.encrypted = calendar.encrypted;
   form.encryptionKey = ''; // secret
   form.readonly = calendar.readonly;
 
+  if (calendar.icalUrl) {
+    form.how = 'iCal';
+    form.iCalSource = 'URL';
+    form.remoteURL = calendar.icalUrl;
+    return;
+  }
+
   if (calendar.remoteUrl) {
     const remoteUrl = authFromUrl(calendar.remoteUrl);
     form.remoteURL = remoteUrl.url;
@@ -71,23 +81,23 @@ function updateFormFromCalendar(calendar: Calendar) {
   }
 }
 
-async function saveCalendar(e: Event) {
+async function saveCalendar() {
   if (isLocked.value) return;
   if (!validate()) return;
 
   isSaving.value = true;
 
-  e.preventDefault();
-
   try {
     if (thisModal.isNew.value) {
       await createCalendar();
     } else {
       await updateCalendar();
     }
-    await CalendarCore.loadCalendars();
+    if (!isICal.value) {
+      await CalendarCore.loadCalendars();
+    }
 
-    refreshCalendars();
+    await refreshCalendars();
     notifyEventsChanged();
     thisModal.close();
   } catch (err) {
@@ -119,27 +129,42 @@ async function createCalendar() {
         form.readonly,
       );
       break;
+
+    case 'iCal':
+      if (form.iCalSource === 'URL') {
+        await CalendarCore.importICalURL(form.name, form.remoteURL);
+      } else {
+        if (!form.file) throw new Error('No iCalendar file selected');
+
+        await CalendarCore.importICalFile(form.destination, await form.file.text());
+        void syncAllWrapper();
+      }
+      break;
   }
 }
 
 async function updateCalendar() {
   const calendar = originalCalendar.value;
-  const origName = calendar?.name;
+  if (!calendar) throw new Error('Cannot update calendar. This should not happen...');
+  let calendarName = calendar.name;
+  console.log('updating calendar', calendarName);
 
-  console.log('updating calendar', origName);
-
-  if (!origName) throw new Error('Cannot update calendar. This should not happen...');
-
-  let calendarName = origName;
-  if (origName !== form.name) {
-    await CalendarCore.renameCalendar(origName, form.name);
+  if (calendar.name !== form.name) {
+    await CalendarCore.renameCalendar(calendar.name, form.name);
     calendarName = form.name;
   }
 
-  const rawUrl = form.remoteURL.trim();
-  if (rawUrl !== '') {
+  const rawUrl = form.remoteURL;
+  if (calendar.icalUrl) {
+    if (calendar.icalUrl !== rawUrl) {
+      await CalendarCore.updateICalURL(calendarName, rawUrl);
+    }
+    return;
+  }
+
+  if (rawUrl) {
     const newRemoteUrl = urlWithAuth(rawUrl, form.username, form.password);
-    if (calendar.remoteUrl !== newRemoteUrl || originalCalendar.value?.readonly !== form.readonly) {
+    if (calendar.remoteUrl !== newRemoteUrl || calendar.readonly !== form.readonly) {
       await CalendarCore.updateRemote(calendarName, newRemoteUrl, form.readonly);
       await syncAllWrapper(); // merge/pull or whatever
     }
@@ -154,13 +179,13 @@ async function deleteCal() {
   isDeleting.value = true;
 
   try {
-    let ok = await confirm(t('message.confirmCalendarDelete'));
+    const ok = await confirm(t('message.confirmCalendarDelete'));
     if (!ok) return;
 
     await CalendarCore.removeCalendar(originalCalendar.value.name);
     await CalendarCore.loadCalendars();
 
-    refreshCalendars();
+    await refreshCalendars();
     notifyEventsChanged();
     thisModal.close();
   } catch (err) {
@@ -171,50 +196,35 @@ async function deleteCal() {
 }
 
 function validate(): boolean {
-  resetErrors();
-
-  const needsName = !thisModal.isNew.value || form.how === 'Init';
-  const needsURL = thisModal.isNew.value && form.how === 'Clone';
-
   form.name = form.name.trim();
-  if (needsName && form.name === '') {
-    errors.missingName = true;
-    return false;
-  }
-
   form.remoteURL = form.remoteURL.trim();
-  if (needsURL && form.remoteURL === '') {
-    errors.badURL = true;
-    return false;
-  }
+  if (!form.remoteURL || isICalFile.value) return true;
 
-  if (form.remoteURL !== '') {
-    if (!isValidUrl(form.remoteURL)) {
-      errors.badURL = true;
-      return false;
-    }
+  const url = parseURL(form.remoteURL);
+  if (!url) return false;
 
-    if (!form.remoteURL.endsWith('.git')) {
-      errors.badURL = true;
-      alert(t('message.errorRemoteUrlEndDotGit'));
-      return false;
-    }
-  }
+  const suffix = isICalURL.value ? '.ics' : '.git';
+  if (url.pathname.toLowerCase().endsWith(suffix)) return true;
 
-  return true;
+  alert(t(isICalURL.value ? 'message.errorICalUrlEndDotIcs' : 'message.errorRemoteUrlEndDotGit'));
+  return false;
 }
 
-function isValidUrl(value: string): boolean {
+function parseURL(value: string): URL | undefined {
   try {
-    new URL(value);
-    return true;
+    return new URL(value);
   } catch {
-    return false;
+    return undefined;
   }
 }
 
+function selectICalFile(event: Event) {
+  form.file = (event.target as HTMLInputElement).files?.[0];
+}
+
 function resetForm() {
   form.how = howOptions[0];
+  form.iCalSource = iCalSourceOptions[0];
   form.name = '';
   form.remoteURL = '';
   form.username = '';
@@ -222,13 +232,8 @@ function resetForm() {
   form.encrypted = false;
   form.encryptionKey = '';
   form.readonly = false;
-
-  resetErrors();
-}
-
-function resetErrors() {
-  errors.missingName = false;
-  errors.badURL = false;
+  form.destination = writableCalendars.value[0]?.name ?? '';
+  form.file = undefined;
 }
 
 function urlWithAuth(repoUrl: string, username: string, password: string): string {
@@ -281,75 +286,110 @@ onMounted(() => {
   <div id="calendar-modal" class="modal">
     <form @submit.prevent="saveCalendar" :aria-busy="isLocked">
       <fieldset :disabled="isLocked">
-        <MultiToggle v-if="thisModal.isNew.value" v-model="form.how" :options="howOptions" style="align-self: center" />
+        <MultiToggle v-if="thisModal.isNew.value" v-model="form.how" :options="howOptions" class="mode-toggle" />
+
+        <MultiToggle
+          v-if="thisModal.isNew.value && isICal"
+          v-model="form.iCalSource"
+          :options="iCalSourceOptions"
+          :labels="['URL', $t('calendar.file')]"
+          class="mode-toggle"
+        />
 
         <input
+          v-if="form.how !== 'Clone' && !isICalFile"
+          v-model="form.name"
+          ref="name-input-field"
           type="text"
           name="name"
           :placeholder="$t('calendar.name')"
-          autocomplete="none"
-          :disabled="thisModal.isNew.value && form.how != 'Init'"
-          v-model="form.name"
-          ref="name-input-field"
-          :class="{ red: errors.missingName }"
-          @input="errors.missingName = false"
+          autocomplete="off"
+          required
         />
 
         <input
+          v-if="!isICalFile"
+          v-model="form.remoteURL"
           type="url"
           name="url"
-          :placeholder="`Remote URL ${form.how == 'Init' ? '(' + $t('optionalText') + ')' : ''}`"
-          autocomplete="none"
-          v-model="form.remoteURL"
-          :class="{ red: errors.badURL }"
-          @input="errors.badURL = false"
+          :placeholder="urlPlaceholder"
+          autocomplete="url"
+          :required="form.how === 'Clone' || isICalURL"
         />
 
-        <div id="git-credentials">
-          {{ $t('calendar.gitCredentials') }}
-          <div class="form-row">
-            <input
-              type="text"
-              name="username"
-              :placeholder="$t('calendar.username')"
-              autocomplete="username"
-              v-model="form.username"
-            />
+        <template v-if="isICalFile">
+          <select
+            v-model="form.destination"
+            name="destination-calendar"
+            :aria-label="$t('calendar.destination')"
+            required
+          >
+            <option v-for="calendar in writableCalendars" :key="calendar.name" :value="calendar.name">
+              {{ calendar.name }}
+            </option>
+          </select>
+
+          <input
+            class="ical-file-input"
+            type="file"
+            name="ical-file"
+            accept=".ics,text/calendar"
+            :aria-label="$t('calendar.file')"
+            required
+            @change="selectICalFile"
+          />
+
+          <small v-if="writableCalendars.length === 0" class="ical-warning">
+            {{ $t('message.noWritableCalendars') }}
+          </small>
+        </template>
+
+        <template v-if="!isICal">
+          <div id="git-credentials">
+            {{ $t('calendar.gitCredentials') }}
+            <div>
+              <input
+                v-model="form.username"
+                type="text"
+                name="username"
+                :placeholder="$t('calendar.username')"
+                autocomplete="username"
+              />
+              <input
+                v-model="form.password"
+                type="password"
+                name="password"
+                :placeholder="$t('calendar.password')"
+                autocomplete="current-password"
+              />
+            </div>
+          </div>
+
+          <label v-if="form.how === 'Clone' || (!thisModal.isNew.value && form.remoteURL)">
+            {{ $t('calendar.readonly') }}
+            <input v-model="form.readonly" type="checkbox" name="readonly" />
+          </label>
+
+          <div v-if="thisModal.isNew.value" id="encryption">
+            <!-- TODO: re-encrypt option for existing calendars -->
+            <label>
+              {{ $t('calendar.encrypted') }}
+              <input v-model="form.encrypted" type="checkbox" name="encrypted" />
+            </label>
             <input
+              v-if="form.encrypted"
+              v-model="form.encryptionKey"
               type="password"
-              name="password"
-              :placeholder="$t('calendar.password')"
+              name="encryption-key"
+              :placeholder="$t('calendar.encryptionKey')"
               autocomplete="current-password"
-              v-model="form.password"
             />
           </div>
-        </div>
-
-        <label v-if="form.how === 'Clone' || (form.how === '' && form.remoteURL !== '')">
-          {{ $t('calendar.readonly') }}
-          <input type="checkbox" name="readonly" v-model="form.readonly" />
-        </label>
-
-        <div id="encryption" v-if="thisModal.isNew.value">
-          <!-- TODO: re-encrypt option for existing calendars -->
-          <label>
-            {{ $t('calendar.encrypted') }}
-            <input type="checkbox" name="encrypted" v-model="form.encrypted" />
-          </label>
-
-          <input
-            v-if="form.encrypted"
-            type="password"
-            name="encryption-key"
-            :placeholder="$t('calendar.encryptionKey')"
-            autocomplete="current-password"
-            v-model="form.encryptionKey"
-          />
-        </div>
+        </template>
 
         <div class="bottom-btns">
-          <button type="submit">
-            {{ isSaving ? $t('savingBtn') : $t('saveBtn') }}
+          <button type="submit" :disabled="isICalFile && writableCalendars.length === 0">
+            {{ saveButtonText }}
           </button>
           <button type="button" @click="thisModal.close">{{ $t('closeBtn') }}</button>
           <button v-if="!thisModal.isNew.value" type="button" @click="deleteCal" class="delete-btn">
@@ -362,6 +402,32 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.mode-toggle {
+  align-self: center;
+}
+
+.ical-file-input {
+  padding: 0.2rem;
+  cursor: pointer;
+
+  &::file-selector-button {
+    height: 1.6rem;
+    margin-right: 0.6rem;
+    padding: 0 0.6rem;
+    border: 0;
+    border-radius: var(--small-border-radius);
+    background-color: var(--btn-bg-color-checked);
+    color: var(--text-color-harder);
+    cursor: pointer;
+    font: inherit;
+  }
+}
+
+.ical-warning {
+  color: var(--git-color);
+  font-size: 0.8rem;
+}
+
 #git-credentials,
 #encryption {
   display: flex;
diff --git a/src/types/core.ts b/src/types/core.ts
index 4877f10..aa06f04 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -17,6 +17,8 @@ export interface Calendar {
   name: string;
   tags: Tag[];
   remoteUrl: string;
+  /** Source URL for URL-backed iCalendar calendars; empty otherwise. */
+  icalUrl: string;
   encrypted: boolean;
   readonly: boolean;
 }
@@ -34,9 +36,13 @@ export interface CalendarApi {
   cloneCalendar(url: string, password: string, readonly: boolean): void;
   removeCalendar(name: string): void;
   renameCalendar(oldName: string, newName: string): void;
+  updateRemote(calendar: string, remoteUrl: string, readonly: boolean): void;
   listCalendars(): Calendar[];
   loadCalendars(): void;
-  updateRemote(calendar: string, remoteUrl: string, readonly: boolean): void;
+
+  importICalFile(calendar: string, data: string): void;
+  importICalURL(name: string, url: string): void;
+  updateICalURL(calendar: string, url: string): void;
 
   createEvent(event: CalendarEvent): CalendarEvent;
   updateEvent(event: CalendarEvent): CalendarEvent;

From b567e928f68a3a5e78d2d65bdc285f95b044e8ce Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Tue, 28 Jul 2026 14:14:51 +0200
Subject: [PATCH 02/11] fix whole day meaning

---
 src/components/AllDayBar.vue         |  5 +++--
 src/components/modals/EventModal.vue |  8 +++++---
 src/composables/useCalendarDrag.ts   |  2 +-
 src/utils.ts                         | 10 +++++++++-
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/components/AllDayBar.vue b/src/components/AllDayBar.vue
index facd014..21168e4 100644
--- a/src/components/AllDayBar.vue
+++ b/src/components/AllDayBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useEventModal } from '@/composables/modals/useEventModal';
 import type { CalendarEvent } from '@/types/core';
-import { getCurrentViewDatetime } from '@/utils';
+import { getAllDayEndDate, getCurrentViewDatetime, isWholeDay } from '@/utils';
 import { DateTime } from 'luxon';
 import { computed, useTemplateRef } from 'vue';
 import { useRoute } from 'vue-router';
@@ -37,8 +37,9 @@ const todayGridColumn = computed(() => {
 });
 
 function visibleRange(event: CalendarEvent) {
+  const end = isWholeDay(event) ? getAllDayEndDate(event) : event.to;
   const startIndex = event.from.startOf('day').diff(currentDate.value, 'days').days;
-  const endIndex = event.to.startOf('day').diff(currentDate.value, 'days').days;
+  const endIndex = end.startOf('day').diff(currentDate.value, 'days').days;
 
   if (endIndex < 0 || startIndex >= props.numOfDays) return null;
 
diff --git a/src/components/modals/EventModal.vue b/src/components/modals/EventModal.vue
index 78b4198..9f00dbf 100644
--- a/src/components/modals/EventModal.vue
+++ b/src/components/modals/EventModal.vue
@@ -13,6 +13,7 @@ import { syncAllWrapper } from '@/services/gitSync';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { notifyEventsChanged } from '@/composables/useEventsRefresh';
 import { cachedCalendars, getDefaultCalendar, loadCalendars } from '@/services/calendarCache';
+import { getAllDayEndDate, isWholeDay } from '@/utils';
 
 const repeatEndOptions = [
   { value: 'on', label: 'On' },
@@ -135,9 +136,10 @@ function updateFormFromEvent(event: CalendarEvent | undefined) {
   hasCustomRepeat = false;
   lastRegularRepeatSelection = 'never';
 
-  if (form.fromTime == '00:00' && form.toTime == '23:59') {
+  if (isWholeDay(event)) {
     form.entireDay = true;
-    form.fromTime = '14:00'; // TODO some defaults
+    form.toDate = getAllDayEndDate(event).toISODate() ?? form.toDate;
+    form.fromTime = '14:00'; // defaults used when switching back to a timed event
     form.toTime = '16:00';
   } else {
     form.entireDay = false;
@@ -224,7 +226,7 @@ function reconstructEvent(): CalendarEvent {
       ? DateTime.fromISO(`${form.fromDate}T00:00`, { zone: originalEvent?.from.zone })
       : DateTime.fromISO(`${form.fromDate}T${form.fromTime}`, { zone: originalEvent?.from.zone }),
     to: form.entireDay
-      ? DateTime.fromISO(`${form.toDate}T23:59`, { zone: originalEvent?.to.zone })
+      ? DateTime.fromISO(`${form.toDate}T00:00`, { zone: originalEvent?.to.zone }).plus({ days: 1 })
       : DateTime.fromISO(`${form.toDate}T${form.toTime}`, { zone: originalEvent?.to.zone }),
     parentId: originalEvent?.parentId,
   };
diff --git a/src/composables/useCalendarDrag.ts b/src/composables/useCalendarDrag.ts
index 938e4fa..faad10e 100644
--- a/src/composables/useCalendarDrag.ts
+++ b/src/composables/useCalendarDrag.ts
@@ -315,7 +315,7 @@ export function useCalendarDrag(refreshEvents: () => Promise<void>) {
     const lastDate = dates[lastIndex];
     if (!firstDate || !lastDate) return;
 
-    active.value = blankEvent(firstDate.startOf('day'), lastDate.endOf('day'));
+    active.value = blankEvent(firstDate.startOf('day'), lastDate.plus({ days: 1 }).startOf('day'));
   }
 
   function onPointerMove(event: PointerEvent) {
diff --git a/src/utils.ts b/src/utils.ts
index 2b80b8c..612a5d9 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -124,7 +124,15 @@ export function numberOfHours(): number {
  * Returns true/false whether event is wholeDay/allDay.
  */
 export function isWholeDay(event: CalendarEvent): boolean {
-  return event.from.toFormat('HH:mm') == '00:00' && event.to.toFormat('HH:mm') == '23:59';
+  const startsAtMidnight = event.from.toMillis() === event.from.startOf('day').toMillis();
+  const usesExclusiveEnd = event.to.toMillis() === event.to.startOf('day').toMillis();
+  const usesLegacyEnd = event.to.toFormat('HH:mm') === '23:59';
+  return startsAtMidnight && (usesExclusiveEnd || usesLegacyEnd) && event.to > event.from;
+}
+
+export function getAllDayEndDate(event: CalendarEvent): DateTime {
+  const usesExclusiveEnd = event.to.toMillis() === event.to.startOf('day').toMillis();
+  return usesExclusiveEnd ? event.to.minus({ days: 1 }) : event.to;
 }
 
 /**

From d8de67714d641edfe6bd0473efcafbc8c46ee2f5 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Tue, 28 Jul 2026 20:15:17 +0200
Subject: [PATCH 03/11] fix filtering

---
 src/services/calendarFilters.ts | 35 ++++++++++++++-------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/services/calendarFilters.ts b/src/services/calendarFilters.ts
index 97a42cd..9641f41 100644
--- a/src/services/calendarFilters.ts
+++ b/src/services/calendarFilters.ts
@@ -5,9 +5,16 @@ export type GetEventsFilter = Record<string, string[]>;
 
 const storageKey = 'calendar-filters';
 
-const stored = JSON.parse(localStorage.getItem(storageKey) ?? '{}');
+function loadHiddenTags(): string[] {
+  try {
+    const tags: unknown = JSON.parse(localStorage.getItem(storageKey) ?? '{}')?.['hidden-tags'];
+    return Array.isArray(tags) ? tags.filter((tag): tag is string => typeof tag === 'string') : [];
+  } catch {
+    return [];
+  }
+}
 
-const hiddenTags = reactive(new Set<string>(stored['hidden-tags'] ?? []));
+const hiddenTags = reactive(new Set(loadHiddenTags()));
 
 function tagKey(calendar: string, tagId: string): string {
   return `${calendar}:${tagId}`;
@@ -24,30 +31,18 @@ function saveFilters() {
 
 export function useCalendarFilters() {
   const filter = computed<GetEventsFilter | null>(() => {
-    if (hiddenTags.size === 0) {
-      return null;
-    }
-
     const out: GetEventsFilter = {};
+    let hasActiveFilter = false;
 
     for (const cal of cachedCalendars.value) {
-      if (cal.tags == null) {
-        out[cal.name] = [];
-        continue;
-      }
-
-      const tagIds = cal.tags.flatMap((tag) => {
-        if (!tag.id || hiddenTags.has(tagKey(cal.name, tag.id))) {
-          return [];
-        }
-
-        return [tag.id];
-      });
+      const tagIds = ['', ...(cal.tags ?? []).flatMap((tag) => (tag.id ? [tag.id] : []))];
+      const visibleTagIds = tagIds.filter((tagId) => !hiddenTags.has(tagKey(cal.name, tagId)));
 
-      out[cal.name] = tagIds;
+      hasActiveFilter ||= visibleTagIds.length < tagIds.length;
+      out[cal.name] = visibleTagIds;
     }
 
-    return out;
+    return hasActiveFilter ? out : null;
   });
 
   function toggleTag(calendar: string, tagId: string) {

From 0dd89c9d4bbdf81db867fa30bb7ba0f7c2108458 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Tue, 28 Jul 2026 20:15:21 +0200
Subject: [PATCH 04/11] simplify

---
 src/components/timeline/XDaysView.vue | 91 ++++++++++++---------------
 1 file changed, 40 insertions(+), 51 deletions(-)

diff --git a/src/components/timeline/XDaysView.vue b/src/components/timeline/XDaysView.vue
index f0f3126..b432a95 100644
--- a/src/components/timeline/XDaysView.vue
+++ b/src/components/timeline/XDaysView.vue
@@ -13,7 +13,6 @@ import AllDayBar from '@/components/AllDayBar.vue';
 import { settings } from '@/services/settings';
 import { eventsRevision } from '@/composables/useEventsRefresh';
 import { useCalendarFilters } from '@/services/calendarFilters';
-
 import { useCalendarDrag } from '@/composables/useCalendarDrag';
 
 type TimelineRange = {
@@ -23,7 +22,7 @@ type TimelineRange = {
 
 const { dayNameShort, dayNameSuperShort } = useTranslation();
 const { width } = useWindowSize();
-const { filter, isEventVisible } = useCalendarFilters();
+const { filter } = useCalendarFilters();
 const route = useRoute();
 
 const props = defineProps<{
@@ -36,8 +35,7 @@ const dates = computed(() =>
   Array.from({ length: props.numOfDays }, (_, index) => startDate.value.plus({ days: index })),
 );
 
-const eventsTimeline = ref<CalendarEvent[][]>([]);
-const eventsWholeDay = ref<CalendarEvent[]>([]);
+const events = ref<CalendarEvent[]>([]);
 
 const configuredTimelineRange = computed<TimelineRange>(() => {
   const startHour = settings.value.dayViewStartHour;
@@ -54,19 +52,39 @@ function timelineColumnDate(date: DateTime, range: TimelineRange) {
   return range.endHour > 24 && date.hour < postMidnightEndHour ? calendarDate.minus({ days: 1 }) : calendarDate;
 }
 
+const eventGroups = computed(() => {
+  const timeline: CalendarEvent[][] = Array.from({ length: props.numOfDays }, () => []);
+  const allDay: CalendarEvent[] = [];
+  const viewStart = startDate.value.startOf('day');
+  const range = configuredTimelineRange.value;
+
+  for (const event of events.value) {
+    const eventDate = timelineColumnDate(event.from, range);
+    const fitsTimelineColumn = event.to <= eventDate.plus({ hours: range.endHour });
+
+    if (isWholeDay(event) || (!event.from.hasSame(event.to, 'day') && !fitsTimelineColumn)) {
+      allDay.push(event);
+      continue;
+    }
+
+    const dayIndex = Math.floor(eventDate.diff(viewStart, 'days').days);
+    timeline[dayIndex]?.push(event);
+  }
+
+  return { timeline, allDay };
+});
+
 const timelineRange = computed<TimelineRange>(() => {
   const configuredRange = configuredTimelineRange.value;
   let startHour = configuredRange.startHour;
   let endHour = configuredRange.endHour;
 
-  for (const events of eventsTimeline.value) {
-    for (const event of events) {
-      const columnStart = timelineColumnDate(event.from, configuredRange).startOf('day');
-      const fromHour = event.from.diff(columnStart, 'hours').hours;
-      const toHour = event.to.diff(columnStart, 'hours').hours;
-      startHour = Math.min(startHour, Math.floor(fromHour));
-      endHour = Math.max(endHour, Math.ceil(toHour));
-    }
+  for (const event of eventGroups.value.timeline.flat()) {
+    const columnStart = timelineColumnDate(event.from, configuredRange).startOf('day');
+    const fromHour = event.from.diff(columnStart, 'hours').hours;
+    const toHour = event.to.diff(columnStart, 'hours').hours;
+    startHour = Math.min(startHour, Math.floor(fromHour));
+    endHour = Math.max(endHour, Math.ceil(toHour));
   }
 
   return { startHour, endHour };
@@ -74,20 +92,16 @@ const timelineRange = computed<TimelineRange>(() => {
 
 const hoursOnGrid = computed(() => {
   const { startHour, endHour } = timelineRange.value;
-  const hours: string[] = [];
 
-  for (let offset = 0; offset < endHour - startHour; offset++) {
+  return Array.from({ length: endHour - startHour }, (_, offset) => {
     const hour = (startHour + offset) % 24;
 
     if (settings.value.timeFormat === 'h12') {
-      const displayHour = hour % 12 || 12;
-      hours.push(`${displayHour} ${hour < 12 ? 'AM' : 'PM'}`);
-    } else {
-      hours.push(`${String(hour).padStart(2, '0')}:00`);
+      return `${hour % 12 || 12} ${hour < 12 ? 'AM' : 'PM'}`;
     }
-  }
 
-  return hours;
+    return `${String(hour).padStart(2, '0')}:00`;
+  });
 });
 
 let latestRequest = 0;
@@ -95,35 +109,11 @@ let latestRequest = 0;
 async function updateData() {
   const request = ++latestRequest;
   const viewStart = startDate.value;
-  const numOfDays = props.numOfDays;
   const range = configuredTimelineRange.value;
-  const queryEnd = viewStart.plus({ days: numOfDays + (range.endHour > 24 ? 1 : 0) });
-  const events = await CalendarCore.getEvents(viewStart, queryEnd, filter.value);
-
-  if (request !== latestRequest) return;
-
-  const timelineEvents: CalendarEvent[][] = Array.from({ length: numOfDays }, () => []);
-  const allDayEvents: CalendarEvent[] = [];
-
-  for (const event of events) {
-    if (!isEventVisible(event.calendar, event.tagId)) continue;
-
-    const eventDate = timelineColumnDate(event.from, range);
-    const fitsTimelineColumn = event.to <= eventDate.plus({ hours: range.endHour });
-
-    if (isWholeDay(event) || (!event.from.hasSame(event.to, 'day') && !fitsTimelineColumn)) {
-      allDayEvents.push(event);
-      continue;
-    }
-
-    const dayIndex = Math.floor(eventDate.diff(viewStart.startOf('day'), 'days').days);
-    if (dayIndex >= 0 && dayIndex < numOfDays) {
-      timelineEvents[dayIndex]?.push(event);
-    }
-  }
+  const queryEnd = viewStart.plus({ days: props.numOfDays + (range.endHour > 24 ? 1 : 0) });
+  const result = await CalendarCore.getEvents(viewStart, queryEnd, filter.value);
 
-  eventsTimeline.value = timelineEvents;
-  eventsWholeDay.value = allDayEvents;
+  if (request === latestRequest) events.value = result;
 }
 
 const drag = useCalendarDrag(updateData);
@@ -143,8 +133,7 @@ watchEffect(() => {
   <div id="view-container">
     <div id="top-bar">
       <span v-for="day in dates" :key="day.toMillis()" :class="{ today: day.hasSame(DateTime.now(), 'day') }">
-        <template v-if="isMobile">{{ `${day.day}. ${dayNameSuperShort(day)}` }}</template>
-        <template v-else>{{ `${day.day}. ${dayNameShort(day)}` }}</template>
+        {{ `${day.day}. ${isMobile ? dayNameSuperShort(day) : dayNameShort(day)}` }}
       </span>
     </div>
 
@@ -158,7 +147,7 @@ watchEffect(() => {
     </div>
 
     <span>{{ $t('allday') }}</span>
-    <AllDayBar :numOfDays="numOfDays" :events="eventsWholeDay" :drag="drag" />
+    <AllDayBar :numOfDays="numOfDays" :events="eventGroups.allDay" :drag="drag" />
 
     <div id="left-time-bar">
       <span v-for="h in hoursOnGrid" :key="h">{{ h }}</span>
@@ -180,7 +169,7 @@ watchEffect(() => {
         v-for="(d, i) in dates"
         :key="d.toMillis()"
         :date="d"
-        :events="eventsTimeline[i]"
+        :events="eventGroups.timeline[i]"
         :start-hour="timelineRange.startHour"
         :end-hour="timelineRange.endHour"
         :drag="drag"

From b5793517be6745918594bb6a70fbc8873a4ab14f Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Tue, 28 Jul 2026 20:15:37 +0200
Subject: [PATCH 05/11] handle long strings

---
 src/assets/styles.css           |  1 +
 src/components/CalendarList.vue | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/src/assets/styles.css b/src/assets/styles.css
index 3512d32..d0581e7 100644
--- a/src/assets/styles.css
+++ b/src/assets/styles.css
@@ -128,6 +128,7 @@ input[type='checkbox'] {
   position: relative;
   width: 1rem;
   height: 1rem;
+  flex-shrink: 0;
   padding: 0;
   vertical-align: middle;
   cursor: pointer;
diff --git a/src/components/CalendarList.vue b/src/components/CalendarList.vue
index e6db087..98d9dde 100644
--- a/src/components/CalendarList.vue
+++ b/src/components/CalendarList.vue
@@ -44,6 +44,7 @@ function getTagColor(calName: string, tagId?: string) {
             :title="$t('tag.create')"
             :aria-label="$t('tag.create')"
             @click="tagModal.open(cal.name)"
+            v-show="!cal.icalUrl"
           >
             <FiPlus />
           </button>
@@ -160,10 +161,15 @@ function getTagColor(calName: string, tagId?: string) {
   .calendar {
     height: 2rem;
     padding: 0 0.25rem 0 0.4rem;
+    gap: 0.2rem;
 
     .name {
       flex-grow: 1;
       font-weight: 600;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 }
@@ -221,6 +227,10 @@ function getTagColor(calName: string, tagId?: string) {
       flex-grow: 1;
       font-size: 0.9em;
       opacity: 0.9;
+
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .action-btn {

From 94c65e225c01952296fb61905fc0e5f5ccc2b8d6 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Tue, 28 Jul 2026 21:03:15 +0200
Subject: [PATCH 06/11] reversed filters

---
 src/services/calendarFilters.ts | 26 +++++++++++---------------
 src/types/core.ts               |  9 +++++++--
 src/wasm/mapper.ts              |  4 ++++
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/services/calendarFilters.ts b/src/services/calendarFilters.ts
index 9641f41..eb1126e 100644
--- a/src/services/calendarFilters.ts
+++ b/src/services/calendarFilters.ts
@@ -1,7 +1,6 @@
 import { computed, reactive } from 'vue';
 import { cachedCalendars } from '@/services/calendarCache';
-
-export type GetEventsFilter = Record<string, string[]>;
+import type { GetEventsFilter } from '@/types/core';
 
 const storageKey = 'calendar-filters';
 
@@ -31,18 +30,20 @@ function saveFilters() {
 
 export function useCalendarFilters() {
   const filter = computed<GetEventsFilter | null>(() => {
-    const out: GetEventsFilter = {};
-    let hasActiveFilter = false;
+    const out: GetEventsFilter = new Map();
 
     for (const cal of cachedCalendars.value) {
-      const tagIds = ['', ...(cal.tags ?? []).flatMap((tag) => (tag.id ? [tag.id] : []))];
-      const visibleTagIds = tagIds.filter((tagId) => !hiddenTags.has(tagKey(cal.name, tagId)));
-
-      hasActiveFilter ||= visibleTagIds.length < tagIds.length;
-      out[cal.name] = visibleTagIds;
+      const hiddenTagIds = (cal.tags ?? []).flatMap((tag) =>
+        tag.id && hiddenTags.has(tagKey(cal.name, tag.id)) ? [tag.id] : [],
+      );
+      const hideUntagged = hiddenTags.has(tagKey(cal.name, ''));
+
+      if (hiddenTagIds.length > 0 || hideUntagged) {
+        out.set(cal.name, { hiddenTagIds, hideUntagged });
+      }
     }
 
-    return hasActiveFilter ? out : null;
+    return out.size > 0 ? out : null;
   });
 
   function toggleTag(calendar: string, tagId: string) {
@@ -62,14 +63,9 @@ export function useCalendarFilters() {
     return !hiddenTags.has(tagKey(calendar, tagId ?? ''));
   }
 
-  function isEventVisible(calendar: string, tagId?: string): boolean {
-    return isTagVisible(calendar, tagId);
-  }
-
   return {
     filter,
     toggleTag,
     isTagVisible,
-    isEventVisible,
   };
 }
diff --git a/src/types/core.ts b/src/types/core.ts
index aa06f04..95f08a8 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -29,6 +29,13 @@ export interface Tag {
   color: string;
 }
 
+export interface CalendarEventsFilter {
+  hiddenTagIds: string[];
+  hideUntagged: boolean;
+}
+
+export type GetEventsFilter = Map<string, CalendarEventsFilter>;
+
 // Interface showing all the methods of CalendarCore.
 // The response types are all made async (Promise<T>) using Asyncify type.
 export interface CalendarApi {
@@ -66,5 +73,3 @@ export enum UpdateStrategy {
   Following,
   All,
 }
-
-type GetEventsFilter = Record<string, string[]>;
diff --git a/src/wasm/mapper.ts b/src/wasm/mapper.ts
index a530761..a63fcaf 100644
--- a/src/wasm/mapper.ts
+++ b/src/wasm/mapper.ts
@@ -82,6 +82,10 @@ export function dehydrateDates<T>(data: T): T {
     return data.map(dehydrateDates) as unknown as T;
   }
 
+  if (data instanceof Map) {
+    return Object.fromEntries(Array.from(data, ([key, value]) => [String(key), dehydrateDates(value)])) as unknown as T;
+  }
+
   const result: Record<string, unknown> = {};
 
   for (const [key, value] of Object.entries(data)) {

From 0de35cb0bc72da337ec40c7935fd0bd81367c406 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Tue, 28 Jul 2026 21:49:08 +0200
Subject: [PATCH 07/11] calendar type icons

---
 src/assets/locales/cs.json      |  2 ++
 src/assets/locales/en.json      |  2 ++
 src/components/CalendarList.vue | 45 ++++++++++++++++++++++++++++-----
 3 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/assets/locales/cs.json b/src/assets/locales/cs.json
index 797099d..8905ae4 100644
--- a/src/assets/locales/cs.json
+++ b/src/assets/locales/cs.json
@@ -43,6 +43,8 @@
   },
   "calendar": {
     "name": "Název",
+    "gitRepository": "Git repozitář",
+    "ical": "iCalendar pomocí odkazu",
     "gitCredentials": "Git přihlašovací údaje",
     "username": "Uživatelské jméno",
     "password": "Heslo/Token",
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 88616c7..eccd622 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -43,6 +43,8 @@
   },
   "calendar": {
     "name": "Name",
+    "gitRepository": "Git repository",
+    "ical": "iCalendar subscribtion using URL",
     "gitCredentials": "Git credentials",
     "username": "Username",
     "password": "Password/Token",
diff --git a/src/components/CalendarList.vue b/src/components/CalendarList.vue
index 98d9dde..3f532f7 100644
--- a/src/components/CalendarList.vue
+++ b/src/components/CalendarList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FiPlus, FiEdit2 } from 'vue-icons-plus/fi';
+import { FiPlus, FiEdit2, FiGitBranch, FiLink } from 'vue-icons-plus/fi';
 import { useCalendarModal } from '@/composables/modals/useCalendarModal';
 import { useTagModal } from '@/composables/modals/useTagModal';
 import { cachedCalendars, getTag } from '@/services/calendarCache';
@@ -37,19 +37,36 @@ function getTagColor(calName: string, tagId?: string) {
     <div class="calendar-list">
       <div v-for="cal in cachedCalendars" :key="cal.name" class="calendar-wrap">
         <div class="calendar">
-          <span class="name">{{ cal.name }}</span>
+          <span class="calendar-label">
+            <span class="name">{{ cal.name }}</span>
+
+            <span
+              class="calendar-icon"
+              role="img"
+              :title="$t(cal.icalUrl ? 'calendar.ical' : 'calendar.gitRepository')"
+              :aria-label="$t(cal.icalUrl ? 'calendar.ical' : 'calendar.gitRepository')"
+            >
+              <FiLink v-if="cal.icalUrl" />
+              <FiGitBranch v-else />
+            </span>
+          </span>
 
           <button
             class="action-btn"
             :title="$t('tag.create')"
             :aria-label="$t('tag.create')"
             @click="tagModal.open(cal.name)"
-            v-show="!cal.icalUrl"
+            v-show="!cal.icalUrl && !cal.readonly"
           >
             <FiPlus />
           </button>
 
-          <button class="action-btn" @click="calendarModal.open(cal.name)">
+          <button
+            class="action-btn"
+            :title="$t('event.repeat.edit')"
+            :aria-label="$t('event.repeat.edit')"
+            @click="calendarModal.open(cal.name)"
+          >
             <FiEdit2 />
           </button>
         </div>
@@ -163,14 +180,30 @@ function getTagColor(calName: string, tagId?: string) {
     padding: 0 0.25rem 0 0.4rem;
     gap: 0.2rem;
 
-    .name {
+    .calendar-label {
+      display: flex;
+      align-items: center;
       flex-grow: 1;
-      font-weight: 600;
+      min-width: 0;
+      gap: 0.3rem;
+    }
+
+    .name {
+      min-width: 0;
+      font-weight: 900;
 
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    .calendar-icon {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      width: 1rem;
+      height: 1rem;
+    }
   }
 }
 

From 724d35bbfb49615412696a2b748eef93306134d4 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Wed, 29 Jul 2026 23:19:14 +0200
Subject: [PATCH 08/11] calendar type icons only show after hover

---
 src/components/CalendarList.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/CalendarList.vue b/src/components/CalendarList.vue
index 3f532f7..62b6c48 100644
--- a/src/components/CalendarList.vue
+++ b/src/components/CalendarList.vue
@@ -203,6 +203,10 @@ function getTagColor(calName: string, tagId?: string) {
       flex-shrink: 0;
       width: 1rem;
       height: 1rem;
+
+      /* hidden by default until hovered */
+      opacity: 0;
+      pointer-events: none;
     }
   }
 }
@@ -217,9 +221,12 @@ function getTagColor(calName: string, tagId?: string) {
     padding: 0.15rem;
   }
 
-  &:hover .action-btn {
-    opacity: 1;
-    pointer-events: auto;
+  &:hover {
+    .action-btn,
+    .calendar-icon {
+      opacity: 1;
+      pointer-events: auto;
+    }
   }
 }
 

From 12c04f6af93aa97c10d3a81aa427172d06f2b60e Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Thu, 30 Jul 2026 10:12:19 +0200
Subject: [PATCH 09/11] fix display of events ending at midnight

---
 src/components/timeline/XDaysView.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/XDaysView.vue b/src/components/timeline/XDaysView.vue
index b432a95..2c7198f 100644
--- a/src/components/timeline/XDaysView.vue
+++ b/src/components/timeline/XDaysView.vue
@@ -61,8 +61,11 @@ const eventGroups = computed(() => {
   for (const event of events.value) {
     const eventDate = timelineColumnDate(event.from, range);
     const fitsTimelineColumn = event.to <= eventDate.plus({ hours: range.endHour });
+    const endsAtNextMidnight =
+      event.to.toMillis() === event.to.startOf('day').toMillis() &&
+      event.from.startOf('day').plus({ days: 1 }).hasSame(event.to, 'day');
 
-    if (isWholeDay(event) || (!event.from.hasSame(event.to, 'day') && !fitsTimelineColumn)) {
+    if (isWholeDay(event) || (!event.from.hasSame(event.to, 'day') && !endsAtNextMidnight && !fitsTimelineColumn)) {
       allDay.push(event);
       continue;
     }

From 333993431758d3099c4d8d66fd793318efa788f1 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Thu, 30 Jul 2026 12:15:27 +0200
Subject: [PATCH 10/11] prettier ical import modal + short description of each
 option

---
 src/assets/locales/cs.json              |   6 +-
 src/assets/locales/en.json              |   6 +-
 src/components/modals/CalendarModal.vue | 130 ++++++++++++++++++------
 src/types/core.ts                       |   2 +-
 4 files changed, 111 insertions(+), 33 deletions(-)

diff --git a/src/assets/locales/cs.json b/src/assets/locales/cs.json
index 8905ae4..14ef011 100644
--- a/src/assets/locales/cs.json
+++ b/src/assets/locales/cs.json
@@ -52,7 +52,11 @@
     "encryptionKey": "Šifrovací heslo",
     "readonly": "Pouze čtení",
     "file": "Soubor",
-    "destination": "Importovat do"
+    "destination": "Importovat do",
+    "initDescription": "Vytvořte prázdný kalendář, který můžete volitelně připojit ke Git repozitáři.",
+    "cloneDescription": "Naklonujte existující kalendář z adresy URL Git repozitáře.",
+    "fileImportDescription": "Vyberte soubor .ics a poté kalendář a štítek, do kterého se události importují.",
+    "urlImportDescription": "Zadejte název a adresu URL souboru .ics. Kalendář bude pouze pro čtení a zůstane propojený se zdrojem."
   },
   "tag": {
     "name": "Jméno",
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index eccd622..9d6270a 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -52,7 +52,11 @@
     "encryptionKey": "Encryption key/password",
     "readonly": "Read-only",
     "file": "File",
-    "destination": "Import into"
+    "destination": "Import into",
+    "initDescription": "Create an empty calendar, optionally connected to a Git repository.",
+    "cloneDescription": "Clone an existing calendar from a Git repository URL.",
+    "fileImportDescription": "Select an .ics file, then choose the calendar and tag to import the events in.",
+    "urlImportDescription": "Enter a name and an .ics URL to add it as a read-only calendar linked to that source."
   },
   "tag": {
     "name": "Name",
diff --git a/src/components/modals/CalendarModal.vue b/src/components/modals/CalendarModal.vue
index 1082ced..b4361eb 100644
--- a/src/components/modals/CalendarModal.vue
+++ b/src/components/modals/CalendarModal.vue
@@ -22,6 +22,9 @@ const isLocked = computed(() => isSaving.value || isDeleting.value);
 const howOptions = ['Init', 'Clone', 'iCal'];
 const iCalSourceOptions = ['URL', 'File'];
 const writableCalendars = computed(() => cachedCalendars.value.filter((calendar) => !calendar.readonly));
+const destinationTags = computed(
+  () => writableCalendars.value.find((calendar) => calendar.name === form.destination)?.tags ?? [],
+);
 const form = reactive({
   how: 'Init',
   iCalSource: 'URL',
@@ -33,12 +36,24 @@ const form = reactive({
   encryptionKey: '',
   readonly: false,
   destination: writableCalendars.value[0]?.name ?? '',
+  destinationTagId: '',
   file: undefined as File | undefined,
 });
 
 const isICal = computed(() => form.how === 'iCal');
 const isICalURL = computed(() => isICal.value && form.iCalSource === 'URL');
 const isICalFile = computed(() => isICal.value && form.iCalSource === 'File');
+const modeDescription = computed(() => {
+  if (!thisModal.isNew.value || isICalFile.value) return '';
+  switch (form.how) {
+    case 'Init':
+      return 'calendar.initDescription';
+    case 'Clone':
+      return 'calendar.cloneDescription';
+    case 'iCal':
+      return 'calendar.urlImportDescription';
+  }
+});
 const saveButtonText = computed(() => {
   if (thisModal.isNew.value && isICal.value) {
     return t(isSaving.value ? 'importingBtn' : 'importBtn');
@@ -60,6 +75,13 @@ watch(
   { immediate: true },
 );
 
+watch(
+  () => form.destination,
+  () => {
+    form.destinationTagId = '';
+  },
+);
+
 function updateFormFromCalendar(calendar: DeepReadonly<Calendar>) {
   form.name = calendar.name;
   form.encrypted = calendar.encrypted;
@@ -136,7 +158,7 @@ async function createCalendar() {
       } else {
         if (!form.file) throw new Error('No iCalendar file selected');
 
-        await CalendarCore.importICalFile(form.destination, await form.file.text());
+        await CalendarCore.importICalFile(form.destination, form.destinationTagId, await form.file.text());
         void syncAllWrapper();
       }
       break;
@@ -233,6 +255,7 @@ function resetForm() {
   form.encryptionKey = '';
   form.readonly = false;
   form.destination = writableCalendars.value[0]?.name ?? '';
+  form.destinationTagId = '';
   form.file = undefined;
 }
 
@@ -296,6 +319,8 @@ onMounted(() => {
           class="mode-toggle"
         />
 
+        <p v-if="modeDescription" class="ical-import-description">{{ $t(modeDescription) }}</p>
+
         <input
           v-if="form.how !== 'Clone' && !isICalFile"
           v-model="form.name"
@@ -317,37 +342,10 @@ onMounted(() => {
           :required="form.how === 'Clone' || isICalURL"
         />
 
-        <template v-if="isICalFile">
-          <select
-            v-model="form.destination"
-            name="destination-calendar"
-            :aria-label="$t('calendar.destination')"
-            required
-          >
-            <option v-for="calendar in writableCalendars" :key="calendar.name" :value="calendar.name">
-              {{ calendar.name }}
-            </option>
-          </select>
-
-          <input
-            class="ical-file-input"
-            type="file"
-            name="ical-file"
-            accept=".ics,text/calendar"
-            :aria-label="$t('calendar.file')"
-            required
-            @change="selectICalFile"
-          />
-
-          <small v-if="writableCalendars.length === 0" class="ical-warning">
-            {{ $t('message.noWritableCalendars') }}
-          </small>
-        </template>
-
         <template v-if="!isICal">
           <div id="git-credentials">
-            {{ $t('calendar.gitCredentials') }}
-            <div>
+            {{ $t('calendar.gitCredentials') }} ({{ $t('optionalText') }})
+            <div class="form-row">
               <input
                 v-model="form.username"
                 type="text"
@@ -387,6 +385,43 @@ onMounted(() => {
           </div>
         </template>
 
+        <template v-if="isICalFile">
+          <p class="ical-import-description">{{ $t('calendar.fileImportDescription') }}</p>
+
+          <input
+            class="ical-file-input"
+            type="file"
+            name="ical-file"
+            accept=".ics,text/calendar"
+            :aria-label="$t('calendar.file')"
+            required
+            @change="selectICalFile"
+          />
+
+          <div class="ical-destination">
+            <select
+              v-model="form.destination"
+              name="destination-calendar"
+              :aria-label="$t('calendar.destination')"
+              required
+            >
+              <option v-for="calendar in writableCalendars" :key="calendar.name" :value="calendar.name">
+                {{ calendar.name }}
+              </option>
+            </select>
+            <select v-model="form.destinationTagId" name="destination-tag" :aria-label="$t('event.tag')">
+              <option value="">{{ $t('tag.notag') }}</option>
+              <option v-for="tag in destinationTags" :key="tag.id" :value="tag.id">
+                {{ tag.name }}
+              </option>
+            </select>
+          </div>
+
+          <small v-if="writableCalendars.length === 0" class="ical-warning">
+            {{ $t('message.noWritableCalendars') }}
+          </small>
+        </template>
+
         <div class="bottom-btns">
           <button type="submit" :disabled="isICalFile && writableCalendars.length === 0">
             {{ saveButtonText }}
@@ -406,6 +441,25 @@ onMounted(() => {
   align-self: center;
 }
 
+.bottom-btns:has(> button:nth-child(2):last-child) {
+  position: relative;
+  display: block;
+  align-self: stretch;
+  height: 2rem;
+
+  > button {
+    position: absolute;
+  }
+
+  > button:first-child {
+    right: calc(50% + 0.5rem);
+  }
+
+  > button:last-child {
+    left: calc(50% + 0.5rem);
+  }
+}
+
 .ical-file-input {
   padding: 0.2rem;
   cursor: pointer;
@@ -423,6 +477,22 @@ onMounted(() => {
   }
 }
 
+.ical-destination {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+
+  select {
+    width: 100%;
+  }
+}
+
+.ical-import-description {
+  margin: 0;
+  color: color-mix(in srgb, var(--text-color) 75%, transparent);
+  font-size: 0.9rem;
+}
+
 .ical-warning {
   color: var(--git-color);
   font-size: 0.8rem;
diff --git a/src/types/core.ts b/src/types/core.ts
index 95f08a8..297f4bd 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -47,7 +47,7 @@ export interface CalendarApi {
   listCalendars(): Calendar[];
   loadCalendars(): void;
 
-  importICalFile(calendar: string, data: string): void;
+  importICalFile(calendar: string, tagId: string, data: string): void;
   importICalURL(name: string, url: string): void;
   updateICalURL(calendar: string, url: string): void;
 

From 6ee71218c48180f36e4f4a3906772e07a5b81f45 Mon Sep 17 00:00:00 2001
From: firu11 <firu@firu.dev>
Date: Thu, 30 Jul 2026 13:07:21 +0200
Subject: [PATCH 11/11] bump core

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c92ddfb..c4815b7 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build",
     "format": "prettier --write src/ index.html tsconfig.json vite.config.ts .prettierrc.json",
-    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.2.0/core.wasm",
+    "fetch-wasm": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/download/v0.2.2/core.wasm",
     "fetch-wasm-latest": "curl -L -o src/assets/core.wasm https://github.com/git-calendar/core/releases/latest/download/core.wasm"
   },
   "dependencies": {