Overview

"use client"import * as React from "react"import type {  CalendarCreateOperation,  CalendarEvent,  CalendarEventUpdateOperation,  CalendarMoveOperation,  CalendarResizeOperation,  CalendarView,} from "@/components/calendar"import { CalendarRoot } from "@/components/calendar"import {  applyEventUpdateOperation,  applyMoveOperation,  applyResizeOperation,  createEventFromOperation,  shiftDate,} from "@/components/calendar/utils"export function TeamSchedule() {  const [date, setDate] = React.useState(new Date())  const [events, setEvents] = React.useState<CalendarEvent[]>([])  const [resourceFilter, setResourceFilter] = React.useState(["product"])  const [view, setView] = React.useState<CalendarView>("week")  function handleNavigate(direction: -1 | 1) {    setDate((currentDate) => shiftDate(currentDate, view, direction))  }  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))  }  function handleUpdate(operation: CalendarEventUpdateOperation) {    setEvents((currentEvents) =>      applyEventUpdateOperation(currentEvents, operation)    )  }  return (    <CalendarRoot      date={date}      eventDetails      events={events}      keyboardShortcuts      onDateChange={setDate}      onEventCreate={handleCreate}      onEventMove={handleMove}      onEventResize={handleResize}      onEventUpdate={handleUpdate}      onNavigate={handleNavigate}      onResourceFilterChange={setResourceFilter}      onToday={() => setDate(new Date())}      onViewChange={setView}      resourceFilter={resourceFilter}      secondaryTimeZone="America/New_York"      showSecondaryTimeZone      view={view}    />  )}