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)" 문서를 참조하세요.