Afficher un calendrier partagé

iCloud, Outlook et Google Agenda permettent tous de partager un calendrier sous forme de lien, qui commence en général par webcal:// ou se termine par .ics. Le hook useCalendarFeed lit un tel lien et vous donne ses événements, prêts pour n’importe quelle vue de calendrier de la bibliothèque, comme 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%"
    />
  );
};

Comme avec useFetch, votre widget attend le calendrier avant d’être dessiné : data est donc toujours là. Un lien qui ne mène pas à un calendrier affiche une erreur.

Demander le lien

Laissez la personne qui installe votre widget coller le lien de son calendrier dans une entrée Sensible. Le lien d’un calendrier privé permet à quiconque le possède de lire ce calendrier : gardez-le donc caché, comme un mot de passe.

Ce que vous obtenez

Les événements arrivent dans l’ordre de leur début, chacun avec son name, son start et son end, ainsi que sa description, son location et son allDay lorsqu’il en a. calendar contient le nom du calendrier.

• Les événements récurrents apparaissent chaque jour où ils se répètent, y compris une occurrence isolée qui a été déplacée ou annulée.
• Les heures sont lues dans le fuseau horaire du calendrier et affichées dans celui du cadre.
• Les événements sur toute la journée, comme les anniversaires, gardent leurs dates où que se trouve le cadre.

Options

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

Option	Type	Par défaut	Description
days	number	7	Le nombre de jours d’événements à lire, à partir du début de la journée.
timeZone	string	Le fuseau du cadre	Le fuseau horaire dans lequel lire les jours.

Plusieurs calendriers

Lisez chaque lien et réunissez les événements. Le calendar de chaque événement indique de quel calendrier il vient :

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

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