メインコンテンツまでスキップ

共有カレンダーを表示する

iCloud、Outlook、Googleカレンダーは、どれもカレンダーをリンクで共有できます。リンクはたいていwebcal://で始まるか、.icsで終わります。useCalendarFeedフックはこのリンクを読み込み、カレンダーのイベントを返します。返されたイベントは、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%"
    />
  );
};

useFetchと同じく、ウィジェットはカレンダーを読み込んでから描画されるので、dataは常にそろっています。カレンダーにつながらないリンクの場合は、エラーが表示されます。

ウィジェットをインストールする人に、カレンダーのリンクを機密の入力項目に貼り付けてもらいましょう。非公開カレンダーのリンクは、知っている人なら誰でもそのカレンダーを読めてしまいます。パスワードと同じように、見えないようにしておいてください。

返される内容​

イベントは開始順に並び、それぞれにname、start、endがあります。description、location、allDayは、イベントに設定されている場合に含まれます。calendarにはカレンダーの名前が入ります。

  • 繰り返しのイベントは、繰り返すすべての日に表示されます。一部の回だけ日時が変更されたり、キャンセルされたりした場合も、そのとおりに反映されます。
  • 時刻はカレンダーのタイムゾーンで読み取られ、フレームのタイムゾーンで表示されます。
  • 誕生日などの終日イベントは、フレームがどこにあっても日付が変わりません。

オプション​

const { data } = useCalendarFeed(url, { days: 7, timeZone: "Europe/London" });
オプション型デフォルト説明
daysnumber7今日の始まりから何日分のイベントを読み込むか。
timeZonestringフレームのタイムゾーン日の区切りに使うタイムゾーン。

複数のカレンダー​

リンクをひとつずつ読み込み、イベントをまとめます。各イベントのcalendarを見れば、どのカレンダーのイベントかがわかります。

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

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