Einen geteilten Kalender anzeigen

iCloud, Outlook und Google Kalender können einen Kalender als Link teilen, der meist mit webcal:// beginnt oder auf .ics endet. Der Hook useCalendarFeed liest einen solchen Link und gibt Ihnen seine Termine, bereit für jede Kalenderansicht der Bibliothek, etwa AgendaCalendar.

import { useCalendarFeed } from "~lib/calendar";
import { AgendaCalendar } from "~lib/calendar/agenda-calendar";
import { useInputs } from "~lib/use-inputs";
import { useScheduledDate } from "~lib/use-scheduled-date";

export const Widget = () => {
  const { CALENDAR_LINK } = useInputs();
  const { data: events } = useCalendarFeed(CALENDAR_LINK, { days: 3 });
  const today = useScheduledDate();

  return (
    <AgendaCalendar
      events={events}
      startDate={today}
      days={3}
      width="100%"
      height="100%"
    />
  );
};

Wie bei useFetch wartet Ihr Widget auf den Kalender, bevor es gezeichnet wird. data ist also immer vorhanden. Ein Link, der zu keinem Kalender führt, zeigt einen Fehler an.

Nach dem Link fragen

Lassen Sie die Person, die Ihr Widget installiert, den Link ihres Kalenders in eine Eingabe vom Typ Vertraulich einfügen. Wer den Link eines privaten Kalenders hat, kann diesen Kalender lesen. Halten Sie den Link deshalb verborgen wie ein Passwort.

Was Sie bekommen

Die Termine kommen in der Reihenfolge ihres Beginns, jeder mit name, start und end und, sofern vorhanden, mit description, location und allDay. calendar enthält den Namen des Kalenders.

• Wiederkehrende Termine erscheinen an jedem Tag, an dem sie sich wiederholen. Einzelne Termine der Serie, die verschoben oder abgesagt wurden, werden dabei berücksichtigt.
• Uhrzeiten werden in der Zeitzone des Kalenders gelesen und in der des Rahmens angezeigt.
• Ganztägige Termine wie Geburtstage behalten ihr Datum, wo auch immer der Rahmen steht.

Optionen

const { data } = useCalendarFeed(url, { days: 7, timeZone: "Europe/London" });

Option	Typ	Standard	Beschreibung
days	number	7	Für wie viele Tage Termine gelesen werden, ab Beginn des heutigen Tages.
timeZone	string	Die Zeitzone des Rahmens	Die Zeitzone, in der die Tage gelesen werden.

Mehrere Kalender

Lesen Sie jeden Link und führen Sie die Termine zusammen. Am Feld calendar jedes Termins sehen Sie, aus welchem Kalender er stammt:

const { data: work } = useCalendarFeed(WORK_LINK);
const { data: family } = useCalendarFeed(FAMILY_LINK);

return <ScheduleCalendar events={[...work, ...family]} />;