Schedule

일정 관리를 위한 캘린더 컴포넌트

개요

Schedule은 FullCalendar를 기반으로 Day/Week/WorkWeek/Month/Agenda 뷰, 드래그 & 리사이즈, Collapse 래핑, 카테고리 색상 등을 지원하는 일정 관리 컴포넌트입니다.

주요 특징

• ✅ 다양한 뷰: Day, Week, WorkWeek, Month, Agenda(목록) 뷰 지원
• ✅ 드래그 & 리사이즈: 이벤트 드래그 이동 및 시간 조절
• ✅ Collapse 래핑: title prop으로 접기/펼치기 UI 제공
• ✅ 카테고리 색상: categoryColors로 이벤트 배경색 일괄 설정
• ✅ 읽기 전용: readOnly prop으로 편집 차단
• ✅ 네비게이션: 이전/다음/오늘 버튼 및 날짜 제어
• ✅ 로케일: 한국어/영어 날짜 레이블 지원

기본 사용

events를 전달하면 주간 뷰로 일정이 표시됩니다.

import { Schedule } from "@vortex/ui-cals"
 
const events = [
  {
    id: "1",
    title: "팀 미팅",
    start: new Date(2025, 6, 17, 10, 0),
    end: new Date(2025, 6, 17, 11, 0),
  },
]
 
<Schedule events={events} currentView="week" height={500} />

뷰 모드

views prop으로 표시할 뷰를 지정하고, currentView로 현재 뷰를 제어합니다.

const [currentView, setCurrentView] = useState<ScheduleViewMode>("week")
 
<Schedule
  events={events}
  views={["day", "week", "workWeek", "month", "agenda"]}
  currentView={currentView}
  onViewChange={setCurrentView}
/>

드래그 & 리사이즈

allowDragAndDrop, allowResizing으로 이벤트 이동 및 시간 조절을 활성화합니다.

<Schedule
  events={events}
  allowDragAndDrop
  allowResizing
  onEventChange={(data) => {
    console.log(data.event.title, data.changes)
  }}
/>

Collapse 래핑

title prop을 지정하면 Collapsible로 래핑됩니다.

<Schedule
  title="일정 관리"
  events={events}
  collapsed={collapsed}
  onCollapseChange={setCollapsed}
/>

카테고리 색상

categoryColors로 이벤트의 categoryField 값에 따라 배경색을 일괄 지정합니다.

<Schedule
  events={[
    { id: "1", title: "미팅", start: new Date(), categoryField: "meeting" },
    { id: "2", title: "휴가", start: new Date(), categoryField: "holiday" },
  ]}
  categoryColors={[
    { value: "meeting", color: "#4f46e5" },
    { value: "holiday", color: "#dc2626" },
  ]}
/>

API Reference

Props

ScheduleViewMode

type ScheduleViewMode = "day" | "week" | "workWeek" | "month" | "agenda"

ScheduleEvent

ScheduleCategoryColor

ScheduleDateSelectData

ScheduleEventChangeData

접근성

권장 사항

• ✅ Foundation FullCalendar 내부에서 role="grid" 시맨틱 자동 적용
• ✅ 네비게이션 버튼에 aria-label 제공 (이전, 다음, 오늘)
• ✅ 이벤트 요소에 포커스 및 키보드 접근 가능
• ✅ 로딩 시 aria-busy="true" 자동 적용
• ❌ 색상만으로 카테고리를 구분하지 말고 title/body에 카테고리 정보를 포함할 것을 권장

관련 컴포넌트

• Foundation FullCalendar: 기반 캘린더 프리미티브
• DateTimePicker: 날짜/시간 입력 컴포넌트