Calendar Feeds

iCloud, Outlook and Google Calendar can all share a calendar as a link, usually starting webcal:// or ending .ics. The useCalendarFeed hook from the Blotch Library reads one and gives you its events, ready for any of the library's calendar views.

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";

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%"
    />
  );
};

Like useFetch, your Widget waits for the calendar before it is drawn, so data is always there. A link that does not lead to a calendar shows an error.

Asking for the link

Let the person installing your Widget paste their calendar's link into a Sensitive Input. A private calendar's link lets anyone who has it read the calendar, so keep it hidden like a password.

What you get

Events come in the order they start, each with its name, start and end, and its description, location and allDay when it has them. calendar is set to the calendar's name.

• Repeating events show on every day they repeat on, including any single occurrence that was moved or cancelled.
• Times are read in the time zone the calendar uses, and shown in the frame's.
• All-day events, such as birthdays, keep their dates wherever the frame is.

Options

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

Option	Type	Default	Description
days	number	7	How many days of events to read, from the start of today.
timeZone	string	The frame's zone	The time zone to read the days in.

Several calendars

Read each link and put the events together. Each event's calendar says which one it came from:

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

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