이 기능은 더 이상 유지보수되지 않으며 사용이 중단되었습니다.
dhtmlxScheduler는 JavaScript와 HTML로 제작된 Windows Store 앱에서 원활하게 동작합니다.
Windows Store 앱을 위한 dhtmlxScheduler의 특별 버전은 다음 링크에서 다운로드할 수 있습니다: https://dhtmlx.com/x/download/regular/dhtmlxScheduler_windows.zip.
간단한 소개를 원한다면, 단계별 튜토리얼을 참고하세요 - Basic Windows 8 app with dhtmlxScheduler.
dhtmlxScheduler를 시작하려면 다음 4개의 파일을 포함해야 합니다:
//core files
<script src="/lib/dhtmlxscheduler.js"></script>
<link href="/lib/dhtmlxscheduler.css" rel="stylesheet" />
이것이 dhtmlxScheduler 앱을 실행하는 데 필요한 최소 파일 세트임을 참고하세요. 만약 앱에서 scheduler 확장 기능을 사용한다면, 해당 확장 파일도 반드시 추가해야 합니다.
스케줄러의 설정은 일반적인 방식과 동일합니다:
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
</div>
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
WinJS.Utilities.ready(function(){
scheduler.init('scheduler_here');
}, true);
} else { }
args.setPromise(WinJS.UI.processAll());
}
};
스케줄러의 설정도 마찬가지로 일반적인 방법으로 진행됩니다:
WinJS.Utilities.ready(function(){
scheduler.config.multi_day = true;
scheduler.config.details_on_create = true;
scheduler.config.details_on_dblclick = true;
scheduler.init('scheduler_here', new Date(2012, 10, 1), "month");
}, true);
스케줄러에 데이터를 불러오기 위해서는 parse 메서드를 사용하세요:
var storeItems = [
{ text:"Friday", start_date:"11.04.2012 00:00",end_date:"11.05.2012 17:00" },
{ text:"New Year",start_date:"11.05.2012 14:00",end_date:"10.05.2012 17:00" },
{ text:"Birthday",start_date:"11.06.2012 16:00",end_date:"11.06.2012 17:00" }
];
WinJS.Utilities.ready(function(){
scheduler.init('scheduler_here');
scheduler.parse(storeItems, "json");
}, true);
각 데이터 항목에는 다음과 같은 필수 속성이 있어야 합니다:
일반적으로 DataProcessor가 스케줄러의 CRUD 작업을 처리하지만, 이는 Windows 8 앱에서는 지원되지 않습니다. 따라서, 이러한 앱에서는 이벤트를 사용하여 직접 CRUD 작업을 처리해야 합니다.
scheduler.attachEvent("onConfirmedBeforeEventDelete", function(id, event){
// 사용자 정의 코드
});
scheduler.attachEvent("onEventChanged", function (id, event) {
// 사용자 정의 코드
});
scheduler.attachEvent("onEventAdded", function (id, event) {
// 사용자 정의 코드
});
아래는 'insert' 작업을 구현하는 일반적인 예시입니다. 'delete', 'update', 'read' 작업도 유사하게 구현할 수 있습니다.
// indexedDb에 연결하고 성공 시 콜백을 실행
function connect(callback){
try{
var db = null;
var req = window.indexedDB.open("SchedulerApp", 1);
req.onsuccess = function (ev) {
db = ev.target.result;
if(callback)// 연결 시 콜백 실행
callback(db);
}
req.onupgradeneeded = function(e){
// 새 데이터베이스 연결 또는 버전 변경 시 발생
// 이곳에서 데이터베이스 구조(object stores)를 정의
var db = ev.target.result;
if (!db.objectStoreNames.contains("events")) {
// 데이터 저장소 생성, 'id'를 자동 증가 키로 설정
var events = db.createObjectStore(
"events",
{ keyPath: "id", autoIncrement: true }
);
}
}
}catch(e){
}
}
// js 객체를 데이터베이스에 추가하고 성공 시 콜백 실행
function insertEvent(data, callback) {
connect(function (db) {
var store = db.transaction("events", "readwrite").objectStore("events");
var updated = store.add(data);
updated.onsuccess = function (res) {
callback(res.target.result);
}
});
}
// 위에서 정의한 것들을 dhtmlxScheduler와 함께 사용
// 사용자가 스케줄러에 이벤트를 추가하면 데이터베이스에 저장됨
scheduler.attachEvent("onEventAdded", function (id) {
var ev =copyEvent(scheduler.getEvent(id));//copyEvent - 깊은 복사 함수
delete ev.id;// 실제 id는 데이터베이스에서 할당
insertEvent(ev, function (newId) {
scheduler.changeEventId(id, newId);// 앱 내에서 이벤트 id 업데이트
});
return true;
});
표준 스케줄러에서 제공되는 일부 기능은 Windows Store 앱에서는 지원되지 않습니다: