DHTMLX Scheduler 개요

DHTMLX Scheduler는 브라우저에서 일정을 표시하고 편집할 수 있는 JavaScript 이벤트 캘린더 컴포넌트입니다. 기본 캘린더 뷰(Day/Week/Month/Year), 풍부한 이벤트 편집(드래그 생성/리사이즈/이동 + Lightbox), 반복 일정, 고급 리소스 계획 뷰(Timeline/Units, PRO)를 지원합니다.

DHTMLX Scheduler는 Standard와 PRO 에디션으로 제공됩니다. Standard 에디션은 공개 패키지 저장소로 배포되며, PRO/Evaluation은 비공개 npm 레지스트리에서 설치하거나 수동으로 추가할 수 있습니다.

프레임워크별 빠른 시작

DHTMLX Scheduler는 바닐라 JavaScript 위젯으로 사용할 수도 있고, 최신 프레임워크에 통합할 수도 있습니다. 사용 중인 스택에 맞는 단계별 "How to start" 가이드를 선택하세요.

JavaScript

script 태그 또는 번들러로 최소 구성으로 시작합니다.

React

props와 이벤트를 지원하는 ReactScheduler 컴포넌트를 바로 사용할 수 있습니다.

Angular

경량 래퍼를 사용해 Angular 프로젝트에 Scheduler를 통합합니다.

Vue

작은 래퍼와 반응형 설정으로 Vue 앱에서 Scheduler를 사용합니다.

Svelte

설정과 이벤트를 바인딩하는 간단한 컴포넌트로 Svelte에 Scheduler를 임베드합니다.

React

자체 컴포넌트에 Scheduler 코어 위젯을 임베드해 생명주기와 데이터 흐름을 완전히 제어합니다.

Salesforce

Salesforce Lightning Web Components에서 Scheduler를 사용하고 org 데이터와 연결합니다.

라이브 데모

DHTMLX Scheduler 동작을 바로 확인하려면 온라인 데모를 살펴보세요.

• 기본 초기화(Week 뷰).
• 반복 일정.
• Timeline 뷰 성능(가로 스크롤).
• 템플릿 예제.
• 전체 샘플 보기.

핵심 기능

DHTMLX Scheduler는 인터랙티브한 캘린더 UX와 확장성에 초점을 둡니다. 아래 섹션에서는 주요 영역을 요약하고 더 자세한 문서로 연결합니다.

캘린더 뷰 및 내비게이션

Scheduler는 시간과 이벤트를 다양한 방식으로 시각화할 수 있습니다.

• 내장 캘린더 뷰(Day/Week/Month/Year/Agenda 변형). 전체 개요는 Views에서 확인할 수 있습니다.
• scheduler.config.header를 통한 내비게이션/헤더 설정과 반응형 초기화.

이벤트 생성 및 편집

Scheduler는 "캘린더 중심" 편집 흐름을 제공합니다.

• 드래그로 이벤트 생성, 리사이즈, 이동(설정 가능).
• 내장 편집기(Lightbox)와 확장으로 제공되는 Quick Info 팝업.
• 이벤트 텍스트, 툴팁, 헤더, UI 조각을 위한 템플릿(렌더링 완전 제어).

반복 시리즈 및 예외

반복 이벤트는 전용 확장과 최신 반복 포맷으로 지원됩니다. Recurring Events를 참고하세요.

리소스 계획 뷰(PRO)

PRO에서는 리소스 스케줄링에 자주 사용하는 고급 계획 모드를 제공합니다.

• Timeline 뷰, Units 뷰, Week Agenda, Grid 뷰 및 기타 PRO 전용 확장.
• Multisection 확장으로 하나의 이벤트를 여러 리소스/섹션에 배정.

데이터 로딩, 포맷, 동기화

Scheduler는 여러 방식으로 데이터 계층과 연결할 수 있습니다.

• 백엔드에서 데이터를 로드하고 동기화 유지(일반적으로 REST 스타일 API + DataProcessor 패턴 사용).
• 여러 스택(Node, ASP.NET Core, PHP/Laravel, Ruby 등)에 대한 서버 측 How to start 가이드 제공.

프레임워크 및 백엔드 통합

프런트엔드 통합

Scheduler는 다음과 같이 사용할 수 있습니다.

• 어떤 페이지에서든 독립 JS 위젯으로 사용 - 순수 HTML/JS 초기화.
• React/Angular/Vue/Svelte를 위한 How to start 가이드 기반 래퍼 컴포넌트 사용.

설치 참고

• Standard 에디션:
  • npm install dhtmlx-scheduler
  • 또는 CDN에서 포함.
• PRO/Evaluation:
  • 비공개 npm 레지스트리에서 설치하거나 로컬 폴더/수동으로 패키지 추가. 자세한 내용은 설치 가이드를 참고하세요.

다음 단계

처음 시작한다면:

1. 프레임워크별 빠른 시작 가이드 중 하나를 선택하거나 순수 HTML/JS 초기화부터 시작하세요.
2. UI를 구성하세요: header, views, templates, 편집 규칙.
3. 필요한 확장을 활성화하세요 - Recurring, PRO의 Timeline/Units, Quick Info, Tooltip 등.
4. Server-Side Integration 가이드를 따라 백엔드와 연결하세요.
5. 더 깊은 커스터마이징을 위해 Guides와 API reference를 확인하세요.

업그레이드 중이라면 문서의 What's new와 migration guides를 확인하세요.