Reactで、予定を.icsファイルにしてダウンロードする方法

"BEGIN:VCALENDAR" (15)
"VERSION:2.0" (11)
"PRODID:-//example.com//Event Download//JA" (41)
"CALSCALE:GREGORIAN" (18)
"BEGIN:VEVENT" (12)
"UID:<ランダムなUUID>@example.com" (37)
"DTSTAMP:<保存した時刻>" (28)
"DTSTART:20261120T010000Z" (24)
"DTEND:20261120T023000Z" (22)
"SUMMARY:React 勉強会" (23)
"LOCATION:会議室A\\, 3階" (26)
"DESCRIPTION:持ち物：ノートPC\\n資料は当日配ります" (64)
"END:VEVENT" (10)
"END:VCALENDAR" (13)
最後が \r\n で終わる: true / \r\n 以外の改行: false

export type CalendarEvent = {
  uid: string;
  title: string;
  start: Date;
  end: Date;
  allDay: boolean;
  location: string;
  description: string;
};

const pad = (n: number) => String(n).padStart(2, '0');

// UTC の日時：20261120T010000Z
function utcDateTime(d: Date): string {
  return `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}` +
    `T${pad(d.getUTCHours())}${pad(d.getUTCMinutes())}${pad(d.getUTCSeconds())}Z`;
}

// 終日の予定の日付：20261120（ブラウザのタイムゾーンの日付）
function localDate(d: Date): string {
  return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}`;
}

// 文字列の値の \ ; , と改行を、\ を付けた形にする
function escapeText(s: string): string {
  return s
    .replace(/\\/g, '\\\\')
    .replace(/;/g, '\\;')
    .replace(/,/g, '\\,')
    .replace(/\r\n|\r|\n/g, '\\n');
}

// 1行を75バイト以内に折り返す。続きの行は空白1つで始める。
// 文字の途中（UTF-8 のバイトの途中）では切らない
const encoder = new TextEncoder();
function foldLine(line: string): string {
  const parts: string[] = [];
  let current = '';
  let bytes = 0;
  for (const ch of line) {
    const size = encoder.encode(ch).length;
    const limit = parts.length === 0 ? 75 : 74; // 続きの行は先頭の空白で1バイト使う
    if (bytes + size > limit) {
      parts.push(current);
      current = '';
      bytes = 0;
    }
    current += ch;
    bytes += size;
  }
  parts.push(current);
  return parts.join('\r\n ');
}

export function toIcs(event: CalendarEvent, now = new Date()): string {
  const lines = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//example.com//Event Download//JA',
    'CALSCALE:GREGORIAN',
    'BEGIN:VEVENT',
    `UID:${event.uid}`,
    `DTSTAMP:${utcDateTime(now)}`,
    ...(event.allDay
      ? [`DTSTART;VALUE=DATE:${localDate(event.start)}`, `DTEND;VALUE=DATE:${localDate(event.end)}`]
      : [`DTSTART:${utcDateTime(event.start)}`, `DTEND:${utcDateTime(event.end)}`]),
    `SUMMARY:${escapeText(event.title)}`,
    ...(event.location ? [`LOCATION:${escapeText(event.location)}`] : []),
    ...(event.description ? [`DESCRIPTION:${escapeText(event.description)}`] : []),
    'END:VEVENT',
    'END:VCALENDAR',
  ];
  return lines.map(foldLine).join('\r\n') + '\r\n';
}

export function downloadIcs(ics: string, filename: string) {
  const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

DTSTART:20261120T150000Z
DTEND:20261120T163000Z

DTSTART;VALUE=DATE:20261120
DTEND;VALUE=DATE:20261121

ical.js のエラー: ParserError invalid line (no token ";" or ":") "資料は当日配ります"

"SUMMARY:第12回 React 勉強会（フォームとサーバーアクショ" (74)
" ンを中心に、実際にコードを書きながら学ぶ回）" (67)
"LOCATION:会議室A\\, 3階" (26)
"DESCRIPTION:持ち物：ノートPC\\; 充電器\\nパス C:\\\\work\\\\react を" (75)
" 使います\\n\\n終わったら懇親会\\, 参加は任意" (59)

ical.js で読んだ summary: "第12回 React 勉強会（フォームとサーバーアクショ���を中心に、実際にコードを書きながら学ぶ回）"
入力と一致: false / U+FFFD の数: 3

import { useState } from 'react';
import { toIcs, downloadIcs } from './ics';

// 終日の予定の終わりは「最後の日の次の日」にする
function nextDay(date: string): Date {
  const d = new Date(`${date}T00:00`);
  d.setDate(d.getDate() + 1);
  return d;
}

export function App() {
  const [title, setTitle] = useState('React 勉強会');
  const [date, setDate] = useState('2026-11-20');
  const [startTime, setStartTime] = useState('10:00');
  const [endTime, setEndTime] = useState('11:30');
  const [allDay, setAllDay] = useState(false);
  const [location, setLocation] = useState('会議室A, 3階');
  const [description, setDescription] = useState('持ち物：ノートPC\n資料は当日配ります');

  // 日付と時刻をつないだ文字列は、ブラウザのタイムゾーンの日時として読まれる
  const start = allDay ? new Date(`${date}T00:00`) : new Date(`${date}T${startTime}`);
  const end = allDay ? nextDay(date) : new Date(`${date}T${endTime}`);
  const valid = title.trim() !== '' && !Number.isNaN(start.getTime()) && end > start;

  const handleDownload = () => {
    const ics = toIcs({
      uid: `${crypto.randomUUID()}@example.com`,
      title, start, end, allDay, location, description,
    });
    downloadIcs(ics, 'event.ics');
  };

  // …（入力欄の JSX は省略）
      <button type="button" disabled={!valid} onClick={handleDownload}>
        カレンダーに追加（.ics）
      </button>