iCalendar import file or subscribe URL

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": {

src/assets/locales/cs.json

@@ -43,12 +43,20 @@
   },
   "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",
     "encrypted": "Šifrování",
     "encryptionKey": "Šifrovací heslo",
-    "readonly": "Pouze čtení"
+    "readonly": "Pouze čtení",
+    "file": "Soubor",
+    "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",
@@ -94,6 +102,8 @@
   },
   "saveBtn": "Uložit",
   "savingBtn": "Ukládání...",
+  "importBtn": "Importovat",
+  "importingBtn": "Importování...",
   "createBtn": "Vytvořit",
   "closeBtn": "Zavřít",
   "cancelBtn": "Zrušit",
@@ -127,7 +137,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á",

src/assets/locales/en.json

@@ -43,12 +43,20 @@
   },
   "calendar": {
     "name": "Name",
+    "gitRepository": "Git repository",
+    "ical": "iCalendar subscribtion using URL",
     "gitCredentials": "Git credentials",
     "username": "Username",
     "password": "Password/Token",
     "encrypted": "Encrypted",
     "encryptionKey": "Encryption key/password",
-    "readonly": "Read-only"
+    "readonly": "Read-only",
+    "file": "File",
+    "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",
@@ -94,6 +102,8 @@
   },
   "saveBtn": "Save",
   "savingBtn": "Saving...",
+  "importBtn": "Import",
+  "importingBtn": "Importing...",
   "createBtn": "Create",
   "closeBtn": "Close",
   "cancelBtn": "Cancel",
@@ -127,7 +137,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",

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;

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;
 

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,18 +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 && !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>
@@ -160,10 +178,35 @@ function getTagColor(calName: string, tagId?: string) {
   .calendar {
     height: 2rem;
     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;
+
+      /* hidden by default until hovered */
+      opacity: 0;
+      pointer-events: none;
     }
   }
 }
@@ -178,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;
+    }
   }
 }
 
@@ -221,6 +267,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 {