Schedule

Foundation FullCalendar를 래핑한 일정 관리 컴포넌트입니다.

개요

Schedule 컴포넌트는 Foundation의 FullCalendar(Toast UI Calendar 기반)를 CALS 환경에 맞게 래핑하며, 추가로 WorkWeek/Agenda 뷰, Collapse 래핑, 카테고리 색상, 우클릭 삭제 등을 지원합니다.

주요 특징

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

기본 사용

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

Code


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로 현재 뷰를 제어합니다.


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

뷰	설명
`day`	하루 일정
`week`	주간 일정
`workWeek`	업무주 (월~금)
`month`	월간 일정
`agenda`	목록 형태 (7일)

드래그 & 리사이즈


<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}
  collapseDisabled={false}
/>

카테고리 색상

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" },
  ]}
/>

Props

Prop	Type	Default	설명
`events`	`ScheduleEvent[]`	`[]`	일정 이벤트 데이터
`currentView`	`ScheduleViewMode`	`"week"`	현재 보기 모드
`onViewChange`	`(mode) => void`	-	보기 모드 변경 핸들러
`views`	`ScheduleViewMode[]`	`["day","week","month"]`	사용 가능한 뷰 목록
`currentDate`	`Date`	-	현재 표시 날짜
`onDateChange`	`(date) => void`	-	날짜 변경 핸들러
`onNavigate`	`(date, action) => void`	-	네비게이션 콜백
`onEventClick`	`(event) => void`	-	이벤트 클릭 핸들러
`onCellDoubleClick`	`(data) => void`	-	셀 더블클릭 핸들러
`onContextDelete`	`(event) => void`	-	이벤트 우클릭 삭제 핸들러
`onEventChange`	`(data) => void`	-	드래그/리사이즈 완료 핸들러
`allowDragAndDrop`	`boolean`	`false`	드래그 허용
`allowResizing`	`boolean`	`false`	리사이즈 허용
`readOnly`	`boolean`	`false`	읽기 전용
`dateFormat`	`string`	`"yyyy-MM-dd"`	날짜 형식
`timezone`	`string`	브라우저 기본	IANA 타임존
`locale`	`string`	`"ko"`	로케일
`categoryColors`	`ScheduleCategoryColor[]`	`[]`	카테고리 색상
`title`	`string`	-	Collapse 제목
`collapsed`	`boolean`	`false`	접힘 상태
`onCollapseChange`	`(collapsed) => void`	-	접힘 변경 핸들러
`collapseDisabled`	`boolean`	`false`	접기 잠금
`visible`	`boolean`	`true`	표시 여부
`height`	`string \| number`	`"650px"`	높이
`fullSize`	`boolean`	`false`	전체 화면
`loading`	`boolean`	`false`	로딩 상태
`className`	`string`	-	className
`style`	`CSSProperties`	-	인라인 스타일

타입


type ScheduleViewMode = "day" | "week" | "workWeek" | "month" | "agenda"
 
interface ScheduleEvent {
  id: string | number
  title: string
  start: Date | string
  end?: Date | string
  isAllDay?: boolean
  categoryField?: string
  backgroundColor?: string
  // ...
}
 
interface ScheduleCategoryColor {
  value: string
  color: string
}
 
interface ScheduleEventChangeData {
  event: ScheduleEvent
  changes: { start?: Date; end?: Date }
}