Mostrare un calendario condiviso

iCloud, Outlook e Google Calendar possono condividere un calendario sotto forma di link, che di solito inizia con webcal:// o finisce con .ics. L’hook useCalendarFeed legge uno di questi link e ti restituisce i suoi eventi, pronti per qualsiasi vista calendario della libreria, come 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%"
    />
  );
};

Come con useFetch, il tuo widget attende il calendario prima di essere disegnato, quindi data c’è sempre. Un link che non porta a un calendario mostra un errore.

Chiedere il link

Fai incollare a chi installa il tuo widget il link del suo calendario in un input Sensibile. Il link di un calendario privato permette a chiunque lo abbia di leggere il calendario, quindi tienilo nascosto come una password.

Che cosa ottieni

Gli eventi arrivano nell’ordine in cui iniziano, ciascuno con name, start ed end, e con description, location e allDay quando li ha. calendar contiene il nome del calendario.

• Gli eventi ricorrenti compaiono in ogni giorno in cui si ripetono, comprese le singole occorrenze spostate o annullate.
• Gli orari vengono letti nel fuso orario del calendario e mostrati in quello della cornice.
• Gli eventi che durano tutto il giorno, come i compleanni, mantengono le loro date ovunque si trovi la cornice.

Opzioni

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

Opzione	Tipo	Predefinito	Descrizione
days	number	7	Quanti giorni di eventi leggere, a partire dall’inizio di oggi.
timeZone	string	Il fuso orario della cornice	Il fuso orario in cui leggere i giorni.

Più calendari

Leggi ogni link e unisci gli eventi. Il campo calendar di ogni evento indica da quale calendario proviene:

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

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