Migration From Older Versions
7.1 -> 7.2
v7.2로 업데이트되면서 일부 기본 설정이 변경되었습니다.
all_timed 플러그인이 기본적으로 활성화됨
all_timed 플러그인이 기본적으로 활성화되어 야간 이벤트가 표시됩니다. 이전 동작으로 되돌리려면 다음과 같이 설정을 조정할 수 있습니다:
scheduler.config.all_timed = false;
날짜 함수가 더 이상 인자를 수정하지 않음
이전 버전에서는 scheduler.date.day_start, scheduler.date.week_start, scheduler.date.date_part와 같은 날짜 함수가 전달된 원본 날짜 객체를 변경했습니다:
const date = new Date(2025, 1, 15, 13, 00);
const dayStart = scheduler.date.day_start(date);
console.log(dayStart);
// 2025-02-15 00:00:00
console.log(date);
// 2025-02-15 00:00:00
v7.2부터는 원본 날짜가 변경되지 않습니다:
const date = new Date(2025, 1, 15, 13, 00);
const dayStart = scheduler.date.day_start(date);
console.log(dayStart);
// 2025-02-15 00:00:00
console.log(date);
// 2025-02-15 13:00:00
7.0 -> 7.1
v7.1 업데이트에는 여러 주요 변경 사항이 포함되어 있습니다.
반복 이벤트를 위한 새로운 엔진
recurring 플러그인이 활성화되면 Recurring events를 위한 새로운 엔진이 사용됩니다:
scheduler.plugin({
recurring:true
});
이 새로운 플러그인은 반복 이벤트를 정의하는 데 다른 속성 집합을 사용하므로, 현재로서는 간단한 마이그레이션 경로가 없습니다. 마이그레이션 준비가 될 때까지 이전 반복 이벤트 엔진을 legacy 플러그인으로 계속 사용할 수 있습니다:
scheduler.plugin({
recurring_legacy:true
});
Undo 팝업
undo_deleted로 제어되는 undo 기능이 이제 기본적으로 활성화되어 있습니다. 이 동작이 필요 없다면 설정을 통해 비활성화 할 수 있습니다:
scheduler.config.undo_deleted = false;
Map View의 변경 사항
일부 속성이 더 이상 개별적으로 사용되지 않고 map_settings 설정 객체의 일부가 되었습니다:
- scheduler.config.map_error_position
- scheduler.config.map_initial_position
- scheduler.config.map_type
이 속성들을 설정하는 새로운 방법은 다음과 같습니다:
scheduler.config.map_settings = {
initial_position: {
lat: 48.724,
lng: 8.215
},
error_position: {
lat: 15,
lng: 15
},
type: google.maps.MapTypeId.HYBRID
}
...
scheduler.init('scheduler_here',new Date(2024,05,11),"map");
또한, 아래 Map view 템플릿이 더 이상 사용되지 않으며 map_info_content로 대체되었습니다:
- scheduler.templates.marker_date
- scheduler.templates.marker_text
새로운 템플릿 사용 예시는 다음과 같습니다:
scheduler.templates.map_info_content = function(event){
const formatDate = scheduler.templates.tooltip_date_format;
return `<div><b>Text:</b> ${event.text}
<div><b>Location:</b> ${event.event_location}</div>
<div><b>Starts:</b> ${formatDate(event.start_date)}</div>
<div><b>Ends:</b> ${formatDate(event.end_date)}</div>
</div>`;
};
속성을 개별적으로 또는 공통 객체 내에서 사용 가능
map_view_provider 속성은 개별적으로 또는 map_settings 설정 객체 내에서 지정할 수 있습니다:
scheduler.config.map_settings = {
view_provider: "googleMap"
}
...
scheduler.init('scheduler_here',new Date(2024,05,11),"map");
개별적으로 사용되는 속성
다음 map 속성들은 map_settings 객체 외부에 남아 있습니다:
6.0 -> 7.0
v7.0 업데이트에는 여러 주요 변경 사항이 포함되어 있습니다.
스킨이 이제 CSS 변수 사용
CSS 스킨(테마)이 완전히 개편되어 CSS 변수를 사용합니다. HTML 구조와 CSS 클래스 이름은 대부분 동일하지만, 이전 버전용으로 작성된 커스텀 CSS는 v7.0에서 예상대로 동작하지 않을 수 있습니다.
예를 들어, 이전에는 이벤트 배경색을 변경하려면 다음과 같이 스타일을 사용했습니다:
<style>
/*일/주간 뷰의 이벤트*/
.dhx_cal_event.manager_event div{
background-color: #009966 !important;
color: black !important;
}
/*월간 뷰의 다중일 이벤트*/
.dhx_cal_event_line.manager_event{
background-color: #009966 !important;
color: black !important;
}
/*고정 시간 이벤트, 월간 뷰*/
.dhx_cal_event_clear.manager_event{
color: black !important;
}
</style>
v7.0부터는 다음과 같이 동일한 효과를 얻을 수 있습니다:
<style>
.manager_event {
--dhx-scheduler-event-background: #009966;
--dhx-scheduler-event-color: black;
}
</style>
사용 가능한 변수 목록은 "스킨 커스터마이제이션" 페이지에서 확인할 수 있습니다.
마이그레이션 후 원하는 스타일을 유지하려면 스타일을 업데이트해야 합니다.
모든 테마가 하나의 CSS 파일로 통합
모든 테마가 이제 단일 dhtmlxscheduler.css 파일로 통합되었습니다.
특정 스킨을 선택하려면 scheduler.skin 속성을 사용하세요:
scheduler.skin = "material";
또는 setSkin 메서드를 사용하세요:
scheduler.setSkin("material");
scheduler.setSkin()을 사용하면 Scheduler가 다시 그려집니다.
terrace 이외의 스킨에서 전환할 경우 다음 단계를 따르세요:
- 기존 스킨 CSS 파일을 새 통합 CSS 파일로 교체:
<!-- 기존 -->
<link rel="stylesheet" href="./codebase/dhtmlxscheduler_material.css" type="text/css">
<!-- 변경 -->
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css">
- JavaScript로 스킨 활성화:
scheduler.setSkin("material");
scheduler.init("scheduler_here");
더 이상 사용되지 않는 scheduler.xy 설정
다음 scheduler.xy 속성은 더 이상 사용되지 않습니다:
- scheduler.xy.nav_height
- scheduler.xy.event_header_height
이제 해당 높이는 다음과 같은 CSS 스타일로 제어됩니다:
.dhx_cal_navline {
height: 40px;
}
.dhx_cal_event dhx_title {
height: 30px;
}
기본값 변경
details_on_create 및 details_on_dblclick 속성의 기본값이 false에서 true로 변경되었습니다.
Material 스킨 폰트
Material 스킨에는 더 이상 Roboto 폰트가 기본 포함되지 않습니다.
Material 스킨을 사용할 경우, 폰트를 수동으로 임포트해야 합니다:
@import url(
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap'
);
툴팁을 위한 새로운 API
툴팁은 이제 커스텀 요소에 쉽게 연결할 수 있도록 API가 재설계되었습니다. 자세한 내용은 "툴팁 (Tooltips)" 문서를 참조하세요.
일/주간 뷰 컬럼에 패딩 추가
일, 주, 유닛 뷰에는 컬럼 양쪽에 작은 패딩이 추가되었습니다. 이 공간에서 사용자가 더블 클릭으로 새 이벤트를 생성할 수 있습니다.
이 패딩을 제거하려면 day_column_padding를 0으로 설정하세요:
scheduler.config.day_column_padding = 0;
Export 서비스 통합
v7.0부터 가져오기/내보내기 기능이 Scheduler 라이브러리에 통합되었습니다.
이전에 온라인 내보내기를 위해 https://export.dhtmlx.com/scheduler/api.js 파일을 포함했다면, 예를 들어:
<script src="codebase/dhtmlxscheduler.js"></script>
<script src="https://export.dhtmlx.com/scheduler/api.js"></script>
해당 파일을 제거하고 scheduler.plugins로 export_api 확장 기능을 활성화하세요:
scheduler.plugins({
export_api: true
});
Promise 구현 변경
Bluebird 라이브러리가 Scheduler 번들에서 제거되었습니다. Promise는 이제 네이티브 Promise 구현을 사용합니다.
5.3 -> 6.0
v6.0 업데이트에서는 Scheduler 패키지에 두 가지 주요 구조적 변경이 있습니다:
- 모든 확장 파일이 이제 dhtmlxscheduler.js에 번들로 포함됩니다. 추가 확장을 사용하려면 API를 사용해야 합니다.
- 이전에 별도의 확장 파일을 포함했다면, 예를 들어:
<script src="../codebase/dhtmlxscheduler.js"></script>
<script src="../codebase/ext/dhtmlxscheduler_active_links.js"></script>
또는
import "dhtmlx-scheduler";
import "dhtmlx-scheduler/ext/dhtmlxscheduler_active_links";
별도의 확장 파일을 제거하고 scheduler.plugins로 확장을 활성화하세요:
scheduler.plugins({
active_links: true
});
전체 확장 목록은 여기에서 확인할 수 있습니다.
-
수정된 확장 파일이나 커스텀 확장 파일을 사용하는 경우, 이전과 같이 수동으로 포함하면 됩니다.
-
참고: dhtmlxscheduler_csp.js 확장은 완전히 제거되었으며 더 이상 수동 활성화가 필요하지 않습니다.
- 모든 로케일이 이제 dhtmlxscheduler.js에 포함되어 있습니다. 로케일을 활성화하려면 API를 사용하세요.
- 별도의 로케일 파일을 페이지에서 제거하고, 원하는 로케일을 scheduler.i18n.setLocale로 활성화하세요:
scheduler.i18n.setLocale("de");
- 커스텀 로케일 파일은 이전과 같이 로드할 수 있습니다.
DataProcessor 초기화
DataProcessor 생성자가 전역 dataProcessor 함수에서 scheduler.DataProcessor 함수로 이동했습니다.
앱에서 DataProcessor를 사용하는 경우, 초기화 코드를 다음과 같이 변경하세요:
// 이전 방식
var dp = new dataProcessor("/scheduler/backend/events");
dp.init(scheduler);
dp.setTransactionMode("REST", false);
다음과 같이 변경:
// 변경된 방식
var dp = new scheduler.DataProcessor("/scheduler/backend/events");
dp.init(scheduler);
dp.setTransactionMode("REST", false);
권장 방식은 scheduler.createDataProcessor를 사용하는 것입니다:
// 권장 방식
var dp = scheduler.createDataProcessor({
url: "/scheduler/backend/events",
mode: "REST"
});
이 경우 DataProcessor.init(scheduler) 호출이 필요하지 않으며, 필요하다면 DataProcessor.setTransactionMode는 기존대로 사용할 수 있습니다.
더 이상 사용되지 않는 API
dhtmlx 객체는 dhtmlxscheduler.js에서 더 이상 정의되지 않으므로, 여러 메서드와 전역 객체가 6.0 버전부터 더 이상 지원되지 않습니다.
- 다음 메서드가 더 이상 사용되지 않으며, 아래로 대체되었습니다:
| 더 이상 사용되지 않는 메서드 | 대체 메서드 |
| dhtmlx.alert | scheduler.alert |
| dhtmlx.confirm | scheduler.confirm |
| dhtmlx.modalbox | scheduler.modalbox |
| dhtmlx.uid | scheduler.uid |
| dhtmlx.copy | scheduler.copy |
| dhtmlx.mixin | scheduler.mixin |
| dhtmlx.defined | scheduler.defined |
| dhtmlx.bind | scheduler.bind |
| dhtmlx.assert | scheduler.assert |
| window.dataProcessor | scheduler.DataProcessor |
메서드의 인자와 동작은 변경되지 않았습니다.
- 다음 전역 객체가 더 이상 사용되지 않습니다:
- dhtmlxAjax
- dtmlXMLLoaderObject
- dhtmlDragAndDropObject
- dhtmlxEventable
- dhtmlxError
앱에서 여전히 필요하다면 legacy 플러그인으로 활성화할 수 있습니다:
scheduler.plugins({
legacy: true
});
5.2 -> 5.3
터치 제스처
스와이프 제스처의 기본 핸들러는 이제 기본적으로 비활성화되어 있습니다.
다시 활성화하려면 scheduler.config.touch_swipe_dates 설정을 다음과 같이 사용하세요:
scheduler.config.touch_swipe_dates = true;
마크업 및 스타일
box-sizing 모드가 "Month View"의 이벤트 요소에 대해 모든 스킨에서 content-box에서 border-box로 변경되었습니다.
이 변경은 .dhx_cal_event_clear 및 .dhx_cal_event_line 요소에 영향을 줍니다.
이 변경으로 눈에 띄는 차이는 없겠지만, Month 뷰의 이벤트 렌더링을 커스터마이즈했거나 사용자 지정 스킨을 사용하는 경우 스타일을 조정해야 할 수 있습니다.
5.1 -> 5.2
드래그 앤 드롭 동작
버전 5.2부터 이벤트를 이전처럼 헤더뿐만 아니라 본문 어느 부분을 클릭해서도 드래그할 수 있습니다. 이전 동작으로 되돌리려면 drag_event_body 속성을 false로 설정하세요(기본값은 활성화):
scheduler.config.drag_event_body = false;
onXLE/onXLS 이벤트는 더 이상 권장되지 않음
이 이벤트들은 아직 동작하지만, 앞으로 제거될 예정입니다. 다음과 같이 대체하세요:
scheduler.attachEvent("onXLS",function(){}); →
scheduler.attachEvent("onLoadStart",function(){});
scheduler.attachEvent("onXLE",function(){}); →
scheduler.attachEvent("onLoadEnd",function(){});
"xml_date" 설정 및 템플릿, "xml_format" 템플릿 이름 변경
아래와 같이 새로운 API 이름으로 코드를 업데이트하세요:
- scheduler.config.xml_date → scheduler.config.date_format
- scheduler.templates.xml_date → scheduler.templates.parse_date
- scheduler.templates.xml_format → scheduler.templates.format_date
v5.2부터 xml_date 설정과 xml_date, xml_format 템플릿의 기본값이 undefined입니다. 명시적으로 할당하지 않으면 동작하지 않습니다.
단, Scheduler는 기존 이름도 계속 지원하므로, 커스터마이즈한 경우에도 계속 사용할 수 있습니다. 예시:
// 이 코드는 여전히 동작합니다
scheduler.templates.xml_date = function(datestring){
return new Date(datestring);
};
기본 날짜 형식 변경
- v5.2 이전에는 scheduler.config.xml_date가 "%m/%d/%Y %H:%i"로 기본값을 지정했습니다.
- v5.2부터는 scheduler.config.date_format에서 "%Y-%m-%d %H:%i"로 제어합니다.
이전 기본 형식으로 되돌리려면 다음을 사용하세요:
scheduler.config.date_format = "%m/%d/%Y %H:%i";
향상된 날짜 파싱
v5.2부터 Scheduler는 파싱 시 날짜 형식을 자동 감지하려고 시도합니다. 이로 인해 scheduler.date.str_to_date, scheduler.templates.format_date, scheduler.templates.parse_date의 동작이 달라질 수 있습니다.
정확히 지정한 형식으로만 파싱하려면 다음을 활성화하세요:
scheduler.config.parse_exact_format = true;