dhtmlxScheduler 在 Windows Store 应用中的使用

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 个文件：

//核心文件
<script src="/lib/dhtmlxscheduler.js"></script>
<link href="/lib/dhtmlxscheduler.css" rel="stylesheet" />

请注意，这只是运行 dhtmlxScheduler 应用所需的最小文件集。如果您的应用使用了 scheduler 扩展的功能，请确保同时添加相应的扩展文件。

初始化

scheduler 的初始化方式与常规方法一致：

首先，在应用的主页面（通常为 default.html）中，定义 scheduler 元素的标准 div 容器：

<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（可在 app.onactivated 事件处理器的 ready 函数中完成）：

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 - 任务描述

可用的数据格式

管理创建/更新/删除操作

通常情况下，DataProcessor 负责在 scheduler 中处理 CRUD 操作，但其与 Windows 8 应用不兼容。因此，在这些应用中，需要通过事件手动处理 CRUD 操作。

onConfirmedBeforeEventDelete - 用户确认删除事件后触发
onEventChanged - 事件被编辑并保存后触发
onEventAdded - 新事件添加时触发
注意：新事件创建后会自动生成 id。保存到数据源后，可以将其替换为数据源中的 id。如果事件 id 发生变化，请使用 changeEventId 以同步更新 scheduler。

scheduler.attachEvent("onConfirmedBeforeEventDelete", function(id, event){
       // 你的自定义代码
});
 
scheduler.attachEvent("onEventChanged", function (id, event) {
       // 你的自定义代码
});
 
scheduler.attachEvent("onEventAdded", function (id, event) {
       // 你的自定义代码
});

IndexedDB 数据库的 CRUD 逻辑示例

以下是实现“插入”操作的通用示例。“删除”、“更新”和“读取”操作的实现方式类似。

//连接到 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){
            //连接新数据库或更改版本时触发
            //这是定义数据库结构（对象存储）的唯一地方
            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 中添加事件时，将其保存到数据库
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;
});

不支持的功能

部分标准 scheduler 中的功能在 Windows Store 应用中不支持：

DataProcessor
Map 视图
导出为 PDF

返回顶部