Calendar Overview

"use client"import * as React from "react"import type {  CalendarClassNames,  CalendarCreateOperation,  CalendarEvent,  CalendarMoveOperation,  CalendarResizeOperation,  CalendarView,} from "@/components/calendar/types"import { CalendarRoot } from "@/components/calendar/root"import { CalendarToolbar } from "@/components/calendar/toolbar"import {  getRangeLabel,  applyMoveOperation,  applyResizeOperation,  createEventFromOperation,  shiftDate,} from "@/components/calendar/utils"const primitiveEventClassNames: CalendarClassNames = {  agendaEvent:    "data-[selected=true]:border-ring data-[selected=true]:ring-2 data-[selected=true]:ring-ring/60",  monthEvent:    "data-[selected=true]:border-ring data-[selected=true]:ring-2 data-[selected=true]:ring-ring/60",  timeGridEvent:    "data-[selected=true]:border-ring data-[selected=true]:ring-2 data-[selected=true]:ring-ring/60",}export function TeamSchedule() {  const [date, setDate] = React.useState(new Date())  const [events, setEvents] = React.useState<CalendarEvent[]>([])  const [selectedEventId, setSelectedEventId] = React.useState<string>()  const [view, setView] = React.useState<CalendarView>("week")  const currentLabel = React.useMemo(() => getRangeLabel(date, view), [date, view])  function handleCreate(operation: CalendarCreateOperation) {    setEvents((currentEvents) => [      ...currentEvents,      createEventFromOperation(operation, {        title: "New event",      }),    ])  }  function handleMove(operation: CalendarMoveOperation) {    setEvents((currentEvents) => applyMoveOperation(currentEvents, operation))  }  function handleResize(operation: CalendarResizeOperation) {    setEvents((currentEvents) => applyResizeOperation(currentEvents, operation))  }  return (    <div className="overflow-hidden rounded-[calc(var(--radius)*1.6)] border border-border/70">      <CalendarToolbar        activeResourceIds={[]}        availableViews={["month", "week", "day", "agenda"]}        currentLabel={currentLabel}        onNavigate={(direction) =>          setDate((currentDate) => shiftDate(currentDate, view, direction))        }        onToday={() => setDate(new Date())}        onViewChange={setView}        view={view}      />      <CalendarRoot        classNames={primitiveEventClassNames}        date={date}        events={events}        onEventCreate={handleCreate}        onEventMove={handleMove}        onEventResize={handleResize}        onSelectedEventChange={setSelectedEventId}        secondaryTimeZone="America/New_York"        selectedEventId={selectedEventId}        showSecondaryTimeZone        view={view}      />    </div>  )}