Team calendar

"use client";

import { useEffect, useState } from "react";
import { CalendarList, Kloq, isVisible, useCalendarSources } from "kloq";
import { Bar } from "../parts";
import { ME, registerTeam, teamEvents } from "./data";

export default function TeamScheduleExample() {
  useEffect(() => registerTeam(), []);
  const [events] = useState(() => teamEvents());
  const { sources } = useCalendarSources();
  const shown = sources.filter(isVisible).length;

  return (
    <div className="@container flex flex-col">
      <Bar>
        <span>
          <span className="text-foreground tabular-nums">
            {shown}/{sources.length}
          </span>{" "}
          calendars shown
        </span>
        <span className="ms-auto truncate">you · {ME}</span>
      </Bar>
      <div className="border-b px-4 py-3">
        <CalendarList heading={null} allowSetDefault={false} className="@2xl:flex-row @2xl:gap-10 @2xl:*:flex-1" />
      </div>

      <div className="h-136">
        <Kloq
          defaultEvents={events}
          currentUserEmail={ME}
          persistence={false}
          designMode={false}
          storage={false}
        >
          <Kloq.Toolbar />
        </Kloq>
      </div>
    </div>
  );
}

import {
  dateOnlyAt,
  instantAt,
  registerCalendarAccount,
  resolveView,
  type Attendee,
  type CalEvent,
  type CalendarAccount,
  type CalendarSource,
} from "kloq";

export const ME = "sam@lumen.dev";

export const ACCOUNTS: CalendarAccount[] = [
  { id: "personal", label: ME, provider: "google", providerLabel: "Google Calendar", isDefault: true },
  { id: "work", label: "Lumen Labs", provider: "outlook", providerLabel: "Microsoft 365" },
];

/** `visible` is absent where a calendar starts on; "Who is out" starts hidden so the toggle has somewhere to go. */
export const CALENDARS: CalendarSource[] = [
  { id: "personal", name: "Personal", color: "blue", accountId: "personal", isDefault: true },
  { id: "family", name: "Family", color: "emerald", accountId: "personal" },
  { id: "work", name: "Work", color: "violet", accountId: "work" },
  { id: "platform", name: "Platform team", color: "amber", accountId: "work" },
  { id: "ooo", name: "Who is out", color: "rose", accountId: "work", readOnly: true, visible: false },
];

export function registerTeam(): () => void {
  const off = ACCOUNTS.map((account) =>
    registerCalendarAccount(account, ...CALENDARS.filter((c) => c.accountId === account.id)),
  );
  return () => off.forEach((unregister) => unregister());
}

const sam: Attendee = { email: ME, name: "Sam Rivera" };
const jules: Attendee = { email: "jules@lumen.dev", name: "Jules Okafor" };
const dana: Attendee = { email: "dana@lumen.dev", name: "Dana Ito" };
const mo: Attendee = { email: "mo@lumen.dev", name: "Mo Haddad" };

/** Events carry a `calendarId` and no `color` — each is drawn in its calendar's colour. */
export function teamEvents(now = new Date()): CalEvent[] {
  const w = resolveView("week", 1, now);
  const at = (day: number, hour: number, minutes: number) => ({
    start: instantAt(w, day, hour * 60),
    end: instantAt(w, day, hour * 60 + minutes),
  });
  return [
    {
      id: "standup", title: "Platform standup", calendarId: "platform",
      rrule: "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR", ...at(0, 9.5, 15),
      organizer: jules.email,
      attendees: [{ ...sam, status: "accepted" }, { ...jules, status: "accepted" }, { ...mo, status: "accepted" }],
    },
    {
      id: "one-on-one", title: "1:1 with Dana", calendarId: "work", ...at(1, 10, 30),
      attendees: [{ ...sam, status: "accepted" }, { ...dana, status: "accepted" }],
    },
    {
      id: "roadmap", title: "Q4 roadmap review", calendarId: "work", ...at(1, 14, 60),
      location: "Room 2 — Kreuzberg", organizer: jules.email,
      description: "Cut list for the November release. Bring the latency numbers.",
      attendees: [{ ...sam, status: "pending" }, { ...jules, status: "accepted" }, { ...mo, status: "tentative" }],
    },
    { id: "focus", title: "Focus block", calendarId: "personal", ...at(2, 9, 120) },
    {
      id: "design-crit", title: "Design crit", calendarId: "platform", ...at(3, 11, 60),
      meetingUrl: "https://meet.google.com/kwe-crit-lab",
      attendees: [{ ...sam, status: "tentative" }, { ...jules, status: "accepted" }],
    },
    { id: "dentist", title: "Dentist", calendarId: "personal", ...at(3, 8, 45), location: "Bergmannstraße 12" },
    { id: "football", title: "Nina — football practice", calendarId: "family", ...at(3, 17, 90) },
    {
      id: "go-no-go", title: "Release 2.4 go/no-go", calendarId: "platform", ...at(4, 15, 45),
      organizer: mo.email,
      attendees: [{ ...sam, status: "pending" }, { ...mo, status: "accepted" }, { ...dana, status: "declined" }],
    },
    { id: "lunch-jules", title: "Lunch with Jules", calendarId: "personal", ...at(4, 12.5, 60), busy: false },
    {
      id: "nina-birthday", title: "Nina's birthday", calendarId: "family", allDay: true,
      start: dateOnlyAt(w, 5), end: dateOnlyAt(w, 6), busy: false,
    },
    {
      id: "dana-leave", title: "Dana — annual leave", calendarId: "ooo", allDay: true,
      start: dateOnlyAt(w, 2), end: dateOnlyAt(w, 5), busy: false, readOnly: true,
    },
    {
      id: "mo-conference", title: "Mo — at KinetiConf", calendarId: "ooo", allDay: true,
      start: dateOnlyAt(w, 0), end: dateOnlyAt(w, 2), busy: false, readOnly: true,
    },
  ];
}

"use client";

import type { ComponentProps } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { formatViewTitle, useIsClient, useKloq } from "kloq";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** The strip an example hangs its controls and readouts on; same box as `Kloq.Toolbar`. */
export function Bar({
  edge = "bottom",
  className,
  ...props
}: ComponentProps<"div"> & { edge?: "top" | "bottom" }) {
  return (
    <div
      {...props}
      className={cn(
        "flex min-h-11 shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5 font-mono text-xs text-muted-foreground",
        edge === "bottom" ? "border-b" : "border-t",
        className,
      )}
    />
  );
}

export function Dot({ live, className, ...props }: ComponentProps<"span"> & { live?: boolean }) {
  return (
    <span
      aria-hidden
      {...props}
      className={cn(
        "size-1.5 shrink-0 rounded-full",
        live ? "bg-brand motion-safe:animate-pulse" : "bg-border",
        className,
      )}
    />
  );
}

/** Previous / next / today for a calendar whose view is fixed. Must render inside `<Kloq>`. */
export function Nav({ locale }: { locale?: string }) {
  const k = useKloq();
  const isClient = useIsClient();
  return (
    <div className="flex min-w-0 items-center gap-1">
      <Button variant="ghost" size="icon-xs" aria-label="Previous" onClick={() => k.step(-1)}>
        <ChevronLeft />
      </Button>
      <Button variant="ghost" size="icon-xs" aria-label="Next" onClick={() => k.step(1)}>
        <ChevronRight />
      </Button>
      <Button variant="ghost" size="xs" className={cn(k.atToday && "text-muted-foreground")} onClick={k.goToday}>
        Today
      </Button>
      <span className="ms-1 truncate text-sm font-medium text-foreground tabular-nums sm:text-xs">
        {isClient ? formatViewTitle(k.view, locale, { short: k.narrow }) : null}
      </span>
    </div>
  );
}