개요

FlexScheduler는 달력 뷰에서 시간 기반 업무 레코드를 표시하고 편집합니다. 애플리케이션은 이벤트 데이터, 선택적 리소스 및 뷰 정의를 제공합니다. 스케줄러는 이를 바탕으로 시간 및 리소스 구조를 렌더링하고, 탐색 및 편집 기능을 제공합니다.

overview_scheduler

스케줄러 구조

스케줄러는 상단의 도구 모음 영역과 하단의 표시 영역으로 구성됩니다.

스케줄러_구조

영역	용도
도구 모음 영역(toolbar area)	날짜 탐색, 달력 선택기 및 뷰 버튼을 제공합니다.
표시 영역(suarface area)	활성 `definition`에서 생성된 축, 헤더, 셀, 섹션 및 이벤트 항목을 표시합니다.

도구 모음 영역

도구 모음 영역에서는 날짜 범위와 활성 뷰를 제어합니다.

도구모음영역

요소	설명
이전/다음 탐색기(previous/next navigator)	표시되는 날짜 범위를 이전 또는 다음으로 이동합니다.
달력 선택기(calendar selector)	현재 뷰의 기준 날짜로 사용할 날짜를 선택합니다.
뷰 버튼(view buttons)	사용 가능한 스케줄러 뷰 사이를 전환합니다.

도구 모음을 숨기려면 showToolbar: false를 사용합니다.

표시 영역

표시 영역은 활성 definition을 시각적으로 표현합니다.

표시영역

요소	설명
모서리(corner)	행 헤더와 열 헤더가 교차하는 왼쪽 상단 영역입니다.
행 헤더(row header)	활성 정의에서 생성된 행의 레이블을 표시합니다.
열 헤더(column header)	활성 정의에서 생성된 열의 레이블을 표시합니다.
셀(cell)	시간 범위와 선택적 리소스 컨텍스트를 나타냅니다.
활성 셀(active cell)	포커스가 있거나 작업을 시작하는 데 사용되는 셀입니다.
섹션	렌더링된 셀과 항목의 그룹입니다.
이벤트 항목(event item)	원본 항목을 시각적으로 표현한 것입니다.
조각(Fragment)	원본 항목이 렌더링된 개별 부분입니다. 하나의 이벤트가 여러 날짜 또는 리소스 레인에 걸쳐 있으면 여러 조각으로 표시될 수 있습니다.
레인(Lane)	이벤트가 시간에 따라 배치되는 연속된 영역입니다. 리소스가 있는 뷰에서는 각 리소스 값이 별도의 레인에 표시됩니다.

원본 항목(source item)은 이벤트 데이터를 제공하는 itemsSource의 객체입니다. 하나의 원본 항목은 여러 조각으로 렌더링될 수 있으며, 각 조각은 해당 원본 항목과 연결된 상태로 유지됩니다.

해당 헤더 영역을 숨기려면 showRowHeaders: false 또는 showColumnHeaders: false를 사용합니다.

빠른 시작

다음 예제는 구성 설정만 보여 줍니다. wjScheduler가 가져오기(import)되어 있고 페이지에 #scheduler 호스트 요소가 있다고 가정합니다. 실행 가능한 설정은 스케줄러 생성 및 데이터 바인딩을 참조하시기 바랍니다.

const scheduler = new wjScheduler.FlexScheduler('#scheduler', {
  itemsSource: [{
    subject: 'Planning',
    start: new Date(2026, 7, 24, 9),
    end: new Date(2026, 7, 24, 10),
  }],
  displayDate: new Date(2026, 7, 24),
});

스케줄러 구성 모델

입력 항목	역할	확인할 수 있는 내용
`itemsSource`	이벤트 데이터를 제공합니다.	어떤 이벤트를 표시할까요?
`eventFields`	애플리케이션 속성을 이벤트 필드에 매핑합니다.	제목, 시작 및 종료 시간은 어떤 속성에 들어 있나요?
`resources`	리소스 차원과 값을 정의합니다.	어떤 회의실, 팀 또는 담당자가 할당되어 있나요?
`definition`	행, 열, 축 및 셀의 의미를 정의합니다.	시간과 리소스는 어떤 형식으로 표시되나요?
`displayDate`	표시 범위의 기준 날짜를 지정합니다.	어떤 날짜가 표시되나요?
`timeZone`	날짜와 시간의 해석 방식을 제어합니다.	어떤 시간대를 기준으로 표시하나요?
`workDays`, `workHours`, `nonworkingTime`	근무 시간 및 예외를 설명합니다.	어떤 시간이 근무 시간에 해당하나요?

원본 컬렉션을 단일 정보 소스(source of truth)로 유지하세요. 이벤트가 여러 개의 시각적 요소로 나뉘어 표시되더라도, 데이터는 하나의 원본 항목으로 관리합니다.

권장 구현 순서

높이가 안정적으로 지정된 호스트 요소에 컨트롤을 생성합니다.
유효한 이벤트 데이터를 하나 바인딩하고, 시작 시간·종료 시간·제목 필드를 매핑합니다.
이벤트를 리소스별로 관리해야 하는 경우 리소스 설명자를 추가합니다.
기본 제공 뷰를 선택하거나 사용자 지정 행 및 열 레이아웃을 정의합니다.
필요한 경우 근무 시간과 표시 시간대를 설정합니다.
애플리케이션 요구사항에 따라 CRUD(생성·조회·수정·삭제), 충돌 검증 및 마우스 상호작용을 활성화합니다.
템플릿, 메뉴, 키보드 조작 방식 및 고급 레이아웃을 사용자 지정합니다.

작업별 주제 찾기

개발 작업	시작할 문서
종속성을 설치하고 컨트롤 생성	스케줄러 생성 및 데이터 바인딩
애플리케이션 필드 매핑	이벤트 데이터 구성
이벤트 조회, 필터링 또는 새로 고침	이벤트 조회, 필터링 및 새로고침
회의실, 팀, 담당자 또는 장비 추가	리소스 구성
리소스 그룹화, 할당 또는 필터링	리소스 구성
뷰 선택 또는 날짜 탐색	뷰 구성 및 일정 탐색
사용자 지정 축 레이아웃 생성	고급 레이아웃 만들기
여러 일정 간 스크롤 동기화	스크롤 동기화
업무 시간 또는 휴무 시간 정의	근무 시간 구성
여러 지역의 이벤트 표시	시간대 구성
이벤트 생성, 편집 또는 삭제	이벤트 생성, 편집 및 삭제
이벤트 이동 또는 크기 조정	이벤트 끌어서 이동 및 크기 조정
시간 중복 및 사용 불가 시간 감지	충돌 감지 및 처리
이벤트 콘텐츠 및 템플릿 사용자 지정	이벤트 표시 및 템플릿 사용자 지정
컨텍스트 메뉴 사용자 지정	컨텍스트 메뉴 사용자 지정
포인터가 가리키는 대상 식별	히트 테스트(Hit Testing)
키보드 포커스 및 선택 구성	키보드 탐색, 포커스 및 선택
문제 진단	문제 해결

개요