dhtmlxScheduler в приложениях Windows Store

dhtmlxScheduler отлично работает в приложениях Windows Store, созданных с использованием JavaScript и HTML.

Специальная версия dhtmlxScheduler доступна для скачивания здесь: https://dhtmlx.com/x/download/regular/dhtmlxScheduler_windows.zip.

Для простого знакомства доступен пошаговый учебник — Basic Windows 8 app with dhtmlxScheduler.

Файлы для подключения

Чтобы начать работу с dhtmlxScheduler, подключите следующие 4 файла:

//основные файлы
<script src="/lib/dhtmlxscheduler.js"></script>
<link href="/lib/dhtmlxscheduler.css" rel="stylesheet" />

Инициализация

Настройка scheduler осуществляется стандартным способом:

• Сначала на главной странице приложения (обычно default.html) определите стандартные div-контейнеры для элементов 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">&nbsp;</div>
            <div class="dhx_cal_next_button">&nbsp;</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>

• Затем инициализируйте scheduler (это можно сделать внутри функции ready в обработчике события app.onactivated):

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());
    }
};

Конфигурация scheduler

Конфигурирование scheduler также выполняется стандартно:

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);

Загрузка данных

Для загрузки данных в scheduler используйте метод 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);

Обязательные свойства данных

Каждый элемент данных должен содержать следующие обязательные свойства:

• start_date — время начала задачи, форматируется согласно date_format
• end_date — время окончания задачи, форматируется согласно date_format
• text — описание задачи

Доступные форматы

• JSON
• XML
• iCal

Управление операциями Create/Update/Delete

Обычно за обработку операций CRUD в scheduler отвечает DataProcessor, но он несовместим с приложениями Windows 8. Поэтому в таких приложениях необходимо обрабатывать CRUD-операции вручную через события.

• onConfirmedBeforeEventDelete — срабатывает после подтверждения удаления события пользователем
• onEventChanged — срабатывает после редактирования и сохранения события
• onEventAdded — срабатывает при добавлении нового события
• Обратите внимание, что при создании нового события ему присваивается автоматически сгенерированный id. После сохранения в вашем источнике данных этот id можно заменить на id из вашего источника. Если id события изменился, используйте changeEventId для обновления scheduler соответствующим образом.

scheduler.attachEvent("onConfirmedBeforeEventDelete", function(id, event){
       // ваш код
});
 
scheduler.attachEvent("onEventChanged", function (id, event) {
       // ваш код
});
 
scheduler.attachEvent("onEventAdded", function (id, event) {
       // ваш код
});

Пример логики CRUD для базы данных IndexedDB

Ниже приведён общий пример реализации операции 'insert'. Операции 'delete', 'update' и 'read' реализуются аналогично.

//подключается к indexedDb и вызывает callback при успешном соединении
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 при подключении
                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-объект в базу данных и вызывает callback при успехе
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 — оно сохраняется в базе данных
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

Некоторые возможности стандартного scheduler недоступны в приложениях Windows Store:

• DataProcessor
• Map view
• Экспорт в PDF

Наверх