FullCalendar

import { FullCalendar, type CalendarEvent, type CalendarCategory } from "@vortex/ui-foundation"
 
const calendars: CalendarCategory[] = [
  { id: "work", name: "업무", backgroundColor: "#3B82F6" },
]
 
const events: CalendarEvent[] = [
  { id: "1", calendarId: "work", title: "프로젝트 기획", start: new Date(), end: addDays(new Date(), 2), isAllDay: true },
]
 
<FullCalendar
  events={events}
  calendars={calendars}
  viewMode="month"
  height={700}
  highlightToday
/>

const [viewMode, setViewMode] = useState<CalendarViewMode>("month")
 
<FullCalendar
  viewMode={viewMode}
  onViewModeChange={setViewMode}
  availableViewModes={["day", "week", "month"]}
  showViewModeToggle
/>

<FullCalendar
  events={events}
  calendars={calendars}
  viewMode="month"
  height={700}
/>

<FullCalendar
  events={events}
  viewMode="week"
  height={600}
  showCurrentTimeLine
  weekStartTime="08:00"
  weekEndTime="20:00"
/>

<FullCalendar
  events={events}
  viewMode="day"
  height={500}
  showCurrentTimeLine
/>

{/* 월 뷰: 오늘 날짜 강조 */}
<FullCalendar
  events={events}
  viewMode="month"
  highlightToday
/>
 
{/* 주/일 뷰: 현재 시간 라인 표시 */}
<FullCalendar
  events={events}
  viewMode="week"
  showCurrentTimeLine
/>

const calendars: CalendarCategory[] = [
  { id: "work", name: "업무", backgroundColor: "#3B82F6", borderColor: "#2563EB" },
  { id: "personal", name: "개인", backgroundColor: "#10B981", borderColor: "#059669" },
  { id: "meeting", name: "회의", backgroundColor: "#F59E0B", borderColor: "#D97706" },
]
 
<FullCalendar
  events={events}
  calendars={calendars}
  viewMode="month"
/>

<FullCalendar
  events={events}
  calendars={calendars}
  viewMode="month"
  monthVisibleEventCount={3}
  onMoreClick={(date, events) => console.log(date, events)}
/>

<FullCalendar
  events={events}
  showNavigation
  showTodayButton
  onDateChange={(date) => console.log("날짜 변경:", date)}
/>

<FullCalendar
  events={events}
  onEventClick={(event) => {
    console.log("선택된 일정:", event)
    // 프로젝트팀: 여기서 상세 Popup 또는 Detail View를 호출합니다
  }}
/>

<FullCalendar
  events={events}
  editable
  onDateSelect={(data) => {
    console.log("선택된 기간:", data.start, data.end)
    // 프로젝트팀: 여기서 일정 입력 Popup을 호출합니다
  }}
/>

<FullCalendar events={events} locale="en-US" monthVisibleEventCount={2} />