Merge 6896d03a3a into b47d132839

components.d.ts

@@ -89,6 +89,9 @@ declare module '@vue/runtime-core' {
     HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
+    IcalGenerator: typeof import('./src/tools/ical-generator/ical-generator.vue')['default']
+    IcalMerger: typeof import('./src/tools/ical-merger/ical-merger.vue')['default']
+    IcalParser: typeof import('./src/tools/ical-parser/ical-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
@@ -130,17 +133,28 @@ declare module '@vue/runtime-core' {
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpace: typeof import('naive-ui')['NSpace']
     NTable: typeof import('naive-ui')['NTable']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']

package.json

@@ -69,6 +69,8 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "ical-generator": "^8.0.0",
+    "ical.js": "^2.1.0",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",

pnpm-lock.yaml

@@ -104,6 +104,12 @@ dependencies:
   ibantools:
     specifier: ^4.3.3
     version: 4.3.3
+  ical-generator:
+    specifier: ^8.0.0
+    version: 8.0.0(@types/node@18.15.11)
+  ical.js:
+    specifier: ^2.1.0
+    version: 2.1.0
   js-base64:
     specifier: ^3.7.6
     version: 3.7.7
@@ -3060,7 +3066,6 @@ packages:
 
   /@types/node@18.15.11:
     resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
-    dev: true
 
   /@types/node@18.18.8:
     resolution: {integrity: sha512-OLGBaaK5V3VRBS1bAkMVP2/W9B+H8meUfl866OrMNQqt7wDgdpWPp5o6gmIc9pB+lIQHSq4ZL8ypeH1vPxcPaQ==}
@@ -3412,7 +3417,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 11.0.3(vue@3.3.4)
+      '@vueuse/shared': 11.1.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4054,8 +4059,8 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@11.0.3(vue@3.3.4):
+  /@vueuse/shared@11.1.0(vue@3.3.4):
-    resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==}
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
     dependencies:
       vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
@@ -6162,6 +6167,47 @@ packages:
     resolution: {integrity: sha512-RUTlGuFj3cU/Qfu5YIrsIZjW34/VDgKOz5fDr64Mc4NWP9b2i48vQ39r5xCl1yyFQeyEG/lASstIQHAUX18rRA==}
     dev: false
 
+  /ical-generator@8.0.0(@types/node@18.15.11):
+    resolution: {integrity: sha512-CvVKK3JJrKop6z7i7/NS69FjYdR6ux1LswIeiZ3yaicX7ocMFLQI475JhQabCT7koUkaCVFNVxLaYaxtdPgwww==}
+    engines: {node: 18 || 20 || >=22.0.0}
+    peerDependencies:
+      '@touch4it/ical-timezones': '>=1.6.0'
+      '@types/luxon': '>= 1.26.0'
+      '@types/mocha': '>= 8.2.1'
+      '@types/node': '*'
+      dayjs: '>= 1.10.0'
+      luxon: '>= 1.26.0'
+      moment: '>= 2.29.0'
+      moment-timezone: '>= 0.5.33'
+      rrule: '>= 2.6.8'
+    peerDependenciesMeta:
+      '@touch4it/ical-timezones':
+        optional: true
+      '@types/luxon':
+        optional: true
+      '@types/mocha':
+        optional: true
+      '@types/node':
+        optional: true
+      dayjs:
+        optional: true
+      luxon:
+        optional: true
+      moment:
+        optional: true
+      moment-timezone:
+        optional: true
+      rrule:
+        optional: true
+    dependencies:
+      '@types/node': 18.15.11
+      uuid-random: 1.3.2
+    dev: false
+
+  /ical.js@2.1.0:
+    resolution: {integrity: sha512-BOVfrH55xQ6kpS3muGvIXIg2l7p+eoe12/oS7R5yrO3TL/j/bLsR0PR+tYQESFbyTbvGgPHn9zQ6tI4FWyuSaQ==}
+    dev: false
+
   /iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -9052,6 +9098,10 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /uuid-random@1.3.2:
+    resolution: {integrity: sha512-UOzej0Le/UgkbWEO8flm+0y+G+ljUon1QWTEZOq1rnMAsxo2+SckbiZdKzAHHlVh6gJqI1TjC/xwgR50MuCrBQ==}
+    dev: false
+
   /uuid@9.0.0:
     resolution: {integrity: sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==}
     dev: false

src/components/TextareaCopyable.vue

@@ -7,8 +7,15 @@ import sqlHljs from 'highlight.js/lib/languages/sql';
 import xmlHljs from 'highlight.js/lib/languages/xml';
 import yamlHljs from 'highlight.js/lib/languages/yaml';
 import iniHljs from 'highlight.js/lib/languages/ini';
+import bashHljs from 'highlight.js/lib/languages/bash';
 import markdownHljs from 'highlight.js/lib/languages/markdown';
+import jsHljs from 'highlight.js/lib/languages/javascript';
+import cssHljs from 'highlight.js/lib/languages/css';
+import goHljs from 'highlight.js/lib/languages/go';
+import csharpHljs from 'highlight.js/lib/languages/csharp';
+import { Base64 } from 'js-base64';
 import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
 
 const props = withDefaults(
   defineProps<{
@@ -17,12 +24,17 @@ const props = withDefaults(
     language?: string
     copyPlacement?: 'top-right' | 'bottom-right' | 'outside' | 'none'
     copyMessage?: string
+    wordWrap?: boolean
+    downloadFileName?: string
+    downloadButtonText?: string
   }>(),
   {
     followHeightOf: null,
     language: 'txt',
     copyPlacement: 'top-right',
     copyMessage: 'Copy to clipboard',
+    downloadFileName: '',
+    downloadButtonText: 'Download',
   },
 );
 hljs.registerLanguage('sql', sqlHljs);
@@ -31,13 +43,25 @@ hljs.registerLanguage('html', xmlHljs);
 hljs.registerLanguage('xml', xmlHljs);
 hljs.registerLanguage('yaml', yamlHljs);
 hljs.registerLanguage('toml', iniHljs);
+hljs.registerLanguage('bash', bashHljs);
 hljs.registerLanguage('markdown', markdownHljs);
+hljs.registerLanguage('css', cssHljs);
+hljs.registerLanguage('javascript', jsHljs);
+hljs.registerLanguage('go', goHljs);
+hljs.registerLanguage('csharp', csharpHljs);
 
-const { value, language, followHeightOf, copyPlacement, copyMessage } = toRefs(props);
+const { value, language, followHeightOf, copyPlacement, copyMessage, downloadFileName, downloadButtonText } = toRefs(props);
 const { height } = followHeightOf.value ? useElementSize(followHeightOf) : { height: ref(null) };
 
 const { copy, isJustCopied } = useCopy({ source: value, createToast: false });
 const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.value);
+
+const valueBase64 = computed(() => Base64.encode(value.value));
+const { download } = useDownloadFileFromBase64(
+  {
+    source: valueBase64,
+    filename: downloadFileName,
+  });
 </script>
 
 <template>
@@ -49,11 +73,16 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         :style="height ? `min-height: ${height - 40 /* card padding */ + 10 /* negative margin compensation */}px` : ''"
       >
         <n-config-provider :hljs="hljs">
-          <n-code :code="value" :language="language" :trim="false" data-test-id="area-content" />
+          <n-code :code="value" :language="language" :word-wrap="wordWrap" :trim="false" data-test-id="area-content" />
         </n-config-provider>
       </n-scrollbar>
-      <div absolute right-10px top-10px>
+      <div
-        <c-tooltip v-if="value" :tooltip="tooltipText" position="left">
+        v-if="value && copyPlacement !== 'none'"
+        absolute right-10px
+        :top-10px="copyPlacement === 'top-right' ? '' : 'no'"
+        :bottom-10px="copyPlacement === 'bottom-right' ? '' : 'no'"
+      >
+        <c-tooltip v-if="value && copyPlacement !== 'outside'" :tooltip="tooltipText" position="left">
           <c-button circle important:h-10 important:w-10 @click="copy()">
             <n-icon size="22" :component="Copy" />
           </c-button>
@@ -65,6 +94,11 @@ const tooltipText = computed(() => isJustCopied.value ? 'Copied!' : copyMessage.
         {{ tooltipText }}
       </c-button>
     </div>
+    <div v-if="downloadFileName !== '' && value !== ''" mt-5 flex justify-center>
+      <c-button secondary @click="download">
+        {{ downloadButtonText }}
+      </c-button>
+    </div>
   </div>
 </template>
 

src/composable/downloadBase64.ts

@@ -1,6 +1,7 @@
 import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
-import type { Ref } from 'vue';
+import type { MaybeRef, Ref } from 'vue';
 import _ from 'lodash';
+import { get } from '@vueuse/core';
 
 export {
   getMimeTypeFromBase64,
@@ -75,21 +76,11 @@ function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
 }
 
 function useDownloadFileFromBase64(
-  { source, filename, extension, fileMimeType }:
-  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
-  return {
-    download() {
-      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
-    },
-  };
-}
-
-function useDownloadFileFromBase64Refs(
   { source, filename, extension }:
-  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  { source: MaybeRef<string>; filename?: MaybeRef<string>; extension?: MaybeRef<string> }) {
   return {
     download() {
-      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+      downloadFromBase64({ sourceValue: get(source), filename: get(filename), extension: get(extension) });
     },
   };
 }
@@ -116,3 +107,13 @@ function previewImageFromBase64(base64String: string): HTMLImageElement {
 
   return img;
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}

src/tools/ical-generator/ical-generator.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import slugify from '@sindresorhus/slugify';
+import ical, { ICalCalendarMethod } from 'ical-generator';
+import { Base64 } from 'js-base64';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+interface Event {
+  startend: [number, number]
+  summary?: string
+  description?: string
+  location?: string
+  url?: string
+}
+
+const events = ref<Array<Event>>([{
+  startend: [Date.now(), Date.now()],
+  summary: 'An event',
+}]);
+function deleteEvent(index: number) {
+  if (events.value.length === 1) {
+    return;
+  }
+  events.value.splice(index, 1);
+}
+function addEvent() {
+  const now = Date.now();
+  events.value.push({
+    startend: [now, now + 3600 * 1000],
+    summary: 'An event',
+  });
+}
+
+const output = computed(() => {
+  try {
+    const calendar = ical({ name: events.value[0]?.summary || 'unamed' });
+
+    // A method is required for outlook to display event as an invitation
+    calendar.method(ICalCalendarMethod.REQUEST);
+
+    for (const event of events.value) {
+      calendar.createEvent({
+        start: new Date(event.startend[0]).toUTCString(),
+        end: new Date(event.startend[0]).toUTCString(),
+        summary: event.summary,
+        description: event.description,
+        location: event.location,
+        url: event.url,
+      });
+    }
+
+    return { ical: calendar.toString() };
+  }
+  catch (e: any) {
+    return { error: e.toString() };
+  }
+});
+const outputBase64 = computed(() => Base64.encode(output.value?.ical || ''));
+const customOutputFileName = ref('');
+const outputFileName = computed(() => {
+  if (customOutputFileName.value) {
+    return customOutputFileName.value;
+  }
+
+  return slugify(events.value[0]?.summary || 'unamed');
+});
+const { download } = useDownloadFileFromBase64(
+  {
+    source: outputBase64,
+    filename: outputFileName,
+    extension: 'ics',
+  });
+</script>
+
+<template>
+  <div>
+    <div mb-2 flex items-baseline gap-2>
+      <c-input-text
+        v-model:value="outputFileName"
+        placeholder="Generated if empty"
+        label="Output filename:"
+        label-position="left"
+        mb-2
+      />
+      <c-button v-if="output.ical" @click="download">
+        Download ICS
+      </c-button>
+    </div>
+
+    <c-alert v-if="output.error" mb-2>
+      {{ output.error }}
+    </c-alert>
+
+    <c-card v-for="(event, index) in events" :key="index" mb-2>
+      <n-form-item label="Title:" label-placement="left">
+        <n-input v-model:value="event.summary" :allow-input="(value:string) => !!value" />
+      </n-form-item>
+      <n-form-item label="Dates and hours:" label-placement="left">
+        <n-date-picker v-model:value="event.startend" type="datetimerange" />
+      </n-form-item>
+      <c-input-text
+        v-model:value="event.description"
+        label="Description"
+        placeholder="Put a description here"
+        multiline
+        rows="2"
+        mb-2
+      />
+      <c-input-text
+        v-model:value="event.url"
+        label="Url:"
+        label-position="left"
+        placeholder="Put an url here"
+        mb-2
+      />
+      <div flex justify-center>
+        <c-button @click="deleteEvent(index)">
+          Delete
+        </c-button>
+      </div>
+    </c-card>
+    <div mt-2 flex justify-center>
+      <c-button @click="addEvent">
+        Add Event
+      </c-button>
+    </div>
+  </div>
+</template>

src/tools/ical-generator/index.ts

@@ -0,0 +1,12 @@
+import { CalendarEvent } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ICAL Generator',
+  path: '/ical-generator',
+  description: 'Generate ICAL/ICS file from event infos',
+  keywords: ['ical', 'calendar', 'event', 'generator'],
+  component: () => import('./ical-generator.vue'),
+  icon: CalendarEvent,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/ical-merger/ical-merger.service.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest';
+import { mergeIcals } from './ical-merger.service';
+
+describe('ical-merger', () => {
+  describe('mergeIcals', () => {
+    it('merge correctly', () => {
+      expect(mergeIcals([
+`BEGIN:VCALENDAR
+PRODID:-//xyz Corp//NONSGML PDA Calendar Version 1.0//EN
+VERSION:2.0
+BEGIN:VEVENT
+DTSTAMP:19960704T120000Z
+UID:uid1@example.com
+ORGANIZER:mailto:jsmith@example.com
+DTSTART:19960918T143000Z
+DTEND:19960920T220000Z
+STATUS:CONFIRMED
+CATEGORIES:CONFERENCE
+SUMMARY:Networld+Interop Conference
+DESCRIPTION:Networld+Interop Conference
+  and Exhibit\\nAtlanta World Congress Center\\n
+ Atlanta\\, Georgia
+END:VEVENT
+END:VCALENDAR`,
+ `BEGIN:VCALENDAR
+METHOD:xyz
+VERSION:2.0
+PRODID:-//ABC Corporation//NONSGML My Product//EN
+BEGIN:VEVENT
+DTSTAMP:19970324T120000Z
+SEQUENCE:0
+UID:uid3@example.com
+ORGANIZER:mailto:jdoe@example.com
+ATTENDEE;RSVP=TRUE:mailto:jsmith@example.com
+DTSTART:19970324T123000Z
+DTEND:19970324T210000Z
+CATEGORIES:MEETING,PROJECT
+CLASS:PUBLIC
+SUMMARY:Calendaring Interoperability Planning Meeting
+DESCRIPTION:Discuss how we can test c&s interoperability\\n
+ using iCalendar and other IETF standards.
+LOCATION:LDB Lobby
+ATTACH;FMTTYPE=application/postscript:ftp://example.com/pub/
+ conf/bkgrnd.ps
+END:VEVENT
+END:VCALENDAR`,
+      ])).to.eq(
+`BEGIN:VCALENDAR
+PRODID:it-tools-ical-merger
+VERSION:1.0
+BEGIN:VEVENT
+DTSTAMP:19960704T120000Z
+UID:uid1@example.com
+ORGANIZER:mailto:jsmith@example.com
+DTSTART:19960918T143000Z
+DTEND:19960920T220000Z
+STATUS:CONFIRMED
+CATEGORIES:CONFERENCE
+SUMMARY:Networld+Interop Conference
+DESCRIPTION:Networld+Interop Conference and Exhibit\\nAtlanta World Congress
+  Center\\nAtlanta\\, Georgia
+END:VEVENT
+BEGIN:VEVENT
+DTSTAMP:19970324T120000Z
+SEQUENCE:0
+UID:uid3@example.com
+ORGANIZER:mailto:jdoe@example.com
+ATTENDEE;RSVP=TRUE:mailto:jsmith@example.com
+DTSTART:19970324T123000Z
+DTEND:19970324T210000Z
+CATEGORIES:MEETING,PROJECT
+CLASS:PUBLIC
+SUMMARY:Calendaring Interoperability Planning Meeting
+DESCRIPTION:Discuss how we can test c&s interoperability\\nusing iCalendar a
+ nd other IETF standards.
+LOCATION:LDB Lobby
+ATTACH;FMTTYPE=application/postscript:ftp://example.com/pub/conf/bkgrnd.ps
+END:VEVENT
+END:VCALENDAR`.replace(/\n/g, '\r\n'));
+    });
+  });
+});

src/tools/ical-merger/ical-merger.service.ts

@@ -0,0 +1,45 @@
+import ICAL from 'ical.js';
+
+export function mergeIcals(inputs: Array<string>, options: {
+  calname?: string
+  timezone?: string
+  caldesc?: string
+} = {}) {
+  let calendar;
+  for (const input of inputs) {
+    try {
+      const jcal = ICAL.parse(input);
+      const cal = new ICAL.Component(jcal);
+
+      if (!calendar) {
+        calendar = cal;
+        calendar.updatePropertyWithValue('prodid', 'it-tools-ical-merger');
+        calendar.updatePropertyWithValue('version', '1.0');
+
+        if (options.calname) {
+          calendar.updatePropertyWithValue('x-wr-calname', options.calname);
+        }
+        if (options.timezone) {
+          calendar.updatePropertyWithValue('x-wr-timezone', options.timezone);
+        }
+        if (options.caldesc) {
+          calendar.updatePropertyWithValue('x-wr-caldesc', options.caldesc);
+        }
+      }
+      else {
+        for (const vevent of cal.getAllSubcomponents('vevent')) {
+          calendar.addSubcomponent(vevent);
+        }
+      }
+    }
+    catch (e) {
+      throw new Error(`Failed to merge: ${e}\n\nWith input: ${input}`);
+    }
+  }
+
+  if (!calendar) {
+    throw new Error('No icals parsed successfully');
+  }
+
+  return calendar.toString();
+}

src/tools/ical-merger/ical-merger.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { mergeIcals } from './ical-merger.service';
+
+const fileInputs = ref<Array<File>>([]);
+const mergedOutput = ref('');
+const calendarName = ref('');
+const calendarDescription = ref('');
+const errors = ref('');
+
+function onUploads(files: Array<File>) {
+  fileInputs.value = [...fileInputs.value, ...files];
+}
+function deleteFile(index: number) {
+  fileInputs.value.splice(index, 1);
+}
+async function mergeFiles() {
+  const fileBuffers: Array<string> = [];
+  for (const file of fileInputs.value) {
+    fileBuffers.push(await readFileAsString(file));
+  }
+  errors.value = '';
+  mergedOutput.value = '';
+  try {
+    mergedOutput.value = mergeIcals(fileBuffers);
+  }
+  catch (e: any) {
+    errors.value = e.toString();
+  }
+}
+
+function readFileAsString(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => {
+      resolve(fr.result as string || '');
+    };
+    fr.onerror = reject;
+    fr.readAsText(file);
+  });
+}
+</script>
+
+<template>
+  <div>
+    <c-file-upload
+      title="Drag and drop iCal file here, or click to select a file"
+      multiple
+      mb-2
+      @files-upload="onUploads"
+    />
+
+    <n-form-item label="Title:" label-placement="left">
+      <n-input v-model:value="calendarName" placeholder="Please input merge calendar title..." />
+    </n-form-item>
+
+    <n-form-item label="Description:">
+      <n-input v-model:value="calendarDescription" placeholder="Please input merged calendar description..." />
+    </n-form-item>
+
+    <ul>
+      <li v-for="(file, index) in fileInputs" :key="index" mb-1>
+        <n-button mr-2 @click="deleteFile(index)">
+          Delete
+        </n-button>
+        File to merge: {{ file.name }}
+      </li>
+    </ul>
+
+    <div flex justify-center>
+      <n-button @click="mergeFiles">
+        Merge iCal files
+      </n-button>
+    </div>
+
+    <n-divider />
+
+    <c-alert v-if="errors" mb-2>
+      {{ errors }}
+    </c-alert>
+
+    <textarea-copyable
+      v-if="mergedOutput"
+      v-model:value="mergedOutput"
+      download-file-name="merge.ics"
+      download-button-text="Download merged iCal"
+      label="Merged ICAL"
+      mb-2
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/ical-merger/index.ts

@@ -0,0 +1,12 @@
+import { CalendarPlus } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'iCal Merger',
+  path: '/ical-merger',
+  description: 'Merge many iCal file to a single',
+  keywords: ['ical', 'ics', 'merger'],
+  component: () => import('./ical-merger.vue'),
+  icon: CalendarPlus,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/ical-parser/ical-parser.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import ICAL from 'ical.js';
+
+const inputType = ref<'file' | 'content'>('file');
+const icalContent = ref('');
+const fileInput = ref() as Ref<File | null>;
+const icalInfosRaw = computedAsync(async () => {
+  const file = fileInput.value;
+  const content = icalContent.value;
+  try {
+    if (inputType.value === 'file' && file) {
+      const jcal = ICAL.parse(await readFileAsString(file));
+      return new ICAL.Component(jcal);
+    }
+    else {
+      const jcal = ICAL.parse(content);
+      return new ICAL.Component(jcal);
+    }
+  }
+  catch (e: any) {
+    return {
+      error: e.toString(),
+    };
+  }
+});
+
+async function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+
+watch(icalContent, (_, newValue) => {
+  if (newValue !== '') {
+    fileInput.value = null;
+  }
+});
+
+function readFileAsString(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const fr = new FileReader();
+    fr.onload = () => {
+      resolve(fr.result as string || '');
+    };
+    fr.onerror = reject;
+    fr.readAsText(file);
+  });
+}
+</script>
+
+<template>
+  <div>
+    <n-radio-group v-model:value="inputType" name="radiogroup" mb-2 flex justify-center>
+      <n-space>
+        <n-radio
+          value="file"
+          label="File"
+        />
+        <n-radio
+          value="content"
+          label="Content"
+        />
+      </n-space>
+    </n-radio-group>
+
+    <c-file-upload
+      v-if="inputType === 'file'"
+      title="Drag and drop iCal file here, or click to select a file"
+      @file-upload="onUpload"
+    />
+
+    <c-input-text
+      v-if="inputType === 'content'"
+      v-model:value="icalContent"
+      label="iCal Content"
+      placeholder="Paste your iCal content here"
+      multiline
+      mb-2
+    />
+
+    <n-divider />
+
+    <textarea-copyable
+      label="Parsed iCal"
+      mb-2
+      :value="JSON.stringify(icalInfosRaw, null, 2)"
+    />
+  </div>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/ical-parser/index.ts

@@ -0,0 +1,12 @@
+import { CalendarEvent } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ICAL File Parser',
+  path: '/ical-parser',
+  description: 'Parse ICAL/ICS file to event display',
+  keywords: ['ical', 'ics', 'calendar', 'parser'],
+  component: () => import('./ical-parser.vue'),
+  icon: CalendarEvent,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as icalMerger } from './ical-merger';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -12,6 +13,8 @@ import { tool as jsonToXml } from './json-to-xml';
 import { tool as regexTester } from './regex-tester';
 import { tool as regexMemo } from './regex-memo';
 import { tool as markdownToHtml } from './markdown-to-html';
+import { tool as icalParser } from './ical-parser';
+import { tool as icalGenerator } from './ical-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -184,6 +187,9 @@ export const toolsByCategory: ToolCategory[] = [
       textDiff,
       numeronymGenerator,
       asciiTextDrawer,
+      icalGenerator,
+      icalParser,
+      icalMerger,
     ],
   },
   {