parseICal

Parses an iCalendar (.ics) text payload into an array of CalendarEvent objects. start, end, and allDay are populated from DTSTART and DTEND; SUMMARY becomes text and DESCRIPTION becomes description.

Signature

function parseICal(ics: string): CalendarEvent[];

Parameter	Type	Description
ics	string	Raw iCalendar text from a .ics file.

Returned events:

Field	Type	Description
id	string | number	Taken from UID; coerced to number when numeric. A random id is used when missing.
start	Date	Parsed from DTSTART. UTC Z values produce a UTC Date; floating values are local.
end	Date	Parsed from DTEND. Falls back to start when DTEND is absent.
allDay	boolean	Set to true when DTSTART is DATE-only (YYYYMMDD).
text	string	Unescaped SUMMARY value (when present).
description	string	Unescaped DESCRIPTION value (when present).

Importing on upload

import { useState } from "react";
import { Calendar, parseICal } from "@svar-ui/react-calendar";

function App() {
  const [data, setData] = useState([]);

  function importIcal(e) {
    const file = e.target.files?.[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      setData(parseICal(ev.target.result));
    };
    reader.readAsText(file);
  }

  return (
    <>
      <input type="file" accept=".ics" onChange={importIcal} />
      <Calendar events={data} date={new Date()} />
    </>
  );
}

Related articles

• serializeICal — counterpart that turns events back into .ics text.
• events — array consumed by the Calendar after parsing.
• Import and export — full round-trip patterns and limitations.