Mostrar un calendario compartido

iCloud, Outlook y Google Calendar pueden compartir un calendario como enlace, que normalmente empieza por webcal:// o termina en .ics. El hook useCalendarFeed lee uno y te da sus eventos, listos para cualquiera de las vistas de calendario de la biblioteca, como 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%"
    />
  );
};

Igual que con useFetch, tu widget espera al calendario antes de dibujarse, así que data siempre está disponible. Un enlace que no lleva a un calendario muestra un error.

Pedir el enlace

Deja que la persona que instala tu widget pegue el enlace de su calendario en una entrada Sensible. El enlace de un calendario privado permite leerlo a cualquiera que lo tenga, así que mantenlo oculto como si fuera una contraseña.

Qué obtienes

Los eventos llegan en el orden en que empiezan, cada uno con su name, start y end, y con su description, location y allDay cuando los tiene. calendar contiene el nombre del calendario.

• Los eventos periódicos aparecen todos los días en que se repiten, incluida cualquier ocurrencia suelta que se haya movido o cancelado.
• Las horas se leen en la zona horaria que usa el calendario y se muestran en la del marco.
• Los eventos de todo el día, como los cumpleaños, conservan sus fechas esté donde esté el marco.

Opciones

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

Opción	Tipo	Valor predeterminado	Descripción
days	number	7	Cuántos días de eventos leer, desde el comienzo de hoy.
timeZone	string	La zona del marco	La zona horaria en la que leer los días.

Varios calendarios

Lee cada enlace y junta los eventos. El calendar de cada evento indica de cuál procede:

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

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