65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 dhtmlxScheduler 为 Windows 8 构建日历应用程序

Stas Wolski
starIconstarIconstarIconstarIconstarIcon

5.00/5 (2投票s)

2013年5月31日

GPL3

5分钟阅读

viewsIcon

37430

downloadIcon

966

本教程介绍如何为 Windows 8 创建一个基本的类似 Google 的事件日历应用程序。

引言

本教程将介绍如何创建一个简单的 Windows 应用商店应用，该应用提供类似于 Google 日历或 Outlook 日历的功能。我们将使用一个开源的 JavaScript 组件 dhtmlxScheduler (Windows 8 Edition)，它允许我们在七个简单的步骤中构建这样一个应用程序。本教程的最终代码可以用作构建用于事件管理或约会预订的 Windows 应用商店应用程序的起点。   

最终演示包含一个基本的日程管理器，可在日、周和月视图中显示事件。 您可以将此演示项目作为您未来应用程序的基础。  

如果您已经熟悉创建基于 JavaScript 的 Windows 8 应用程序，您可以下载演示应用程序及其源代码，以了解如何实现。否则，请继续阅读。 

第 1 步 - 创建项目

首先，我们需要在 Microsoft Visual Studio 2012 中创建一个新项目。因此，启动 Visual Studio。在左侧窗格中，转到开始 → 新建项目，然后选择模板 → JavaScript → Windows 应用商店 → 空白应用。为项目命名，例如，SchedulerApp。

第 2 步 - 添加 dhtmlxScheduler 的脚本

要在页面上显示日程管理器，您需要将 dhtmlxScheduler 的必要文件（.js、.css、图像）包含在您的项目中。  

下载 dhtmlxScheduler for Windows 8 的最新版本并解压。然后执行以下操作：

  • 在 Visual Studio 中，右键单击解决方案资源管理器，选择添加 → 新建文件夹，并将新文件夹命名为“dhtmlxScheduler”。 
  • 右键单击“dhtmlxScheduler”文件夹，选择添加 → 添加现有文件，然后将您下载的 dhtmlxScheduler 包的文件添加到项目中。 

最终，您的项目解决方案将如下所示：

第 3 步 - 将日程管理器包含到开始页面

Visual Studio 在创建项目时自动创建的文件之一是default.html。这是应用程序的开始页面。当应用程序运行时，它将显示此文件的内容。我们将不更改项目的开始页面，而是将我们的日历放在default.html上。 

让我们从将必需的日程管理器代码文件包含到开始页面开始修改。 

必需的代码文件是：

  • 核心文件：dhtmlxscheduler.js、dhtmlxscheduler.css 
  • 皮肤文件：dhtmlxscheduler_dhx_terrace.js、dhtmlxscheduler_dhx_terrace.css 

这是运行带有 dhtmlxScheduler 的应用程序所需的最少文件集。如果您想使用 dhtmlxScheduler 的高级功能（存储在日程管理器的扩展文件中），您需要另外包含相关的扩展文件（它们可以在“ext”文件夹中找到）。 

这是default.html文件的代码：  

//default.html
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SchedulerApp</title>
 
    <!-- WinJS references -->
    <link href="./Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="./Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="./Microsoft.WinJS.1.0/js/ui.js"></script>
 
    <!-- SchedulerApp references -->
    <link href="./css/default.css" rel="stylesheet" />
    <script src="./js/default.js"></script>
 
    <!-- core dhtmlxScheduler files -->
    <script src="./dhtmlxScheduler/dhtmlxscheduler.js"></script>
    <link href="./dhtmlxScheduler/dhtmlxscheduler.css" rel="stylesheet" />
 
    <!-- skin dhtmlxScheduler files -->
    <script src="./dhtmlxScheduler/ext/dhtmlxscheduler_dhx_terrace.js"></script>
    <link href="./dhtmlxScheduler/dhtmlxscheduler_dhx_terrace.css" rel="stylesheet" />
</head>
<body>
   <p>Content goes here</p>
</body>
</html>

第 4 步 - 开始页面上的日程管理器标记

接下来我们需要做的是为日程管理器准备一个位置，即在开始页面上定义相关的 DIV 容器以用于日程管理器元素。 

标准的“div”集（日程管理器所需）如下所示： 

//default.html   
<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>

第 5 步 - 初始化

完成这些准备后，我们就可以进行日程管理器初始化了。请注意，日程管理器是一个静态对象，可以在页面上实例化一次。要引用日程管理器，我们需要使用 dhtmlxScheduler 或简单地使用 scheduler。 日程管理器通过一个简单的命令初始化：   

scheduler.init('scheduler_here', new Date(), "week");

其中参数是： 

  1. 日程管理器将被创建的 HTML 容器的 ID 或对象 
  2. 日程管理器的初始日期（默认为当前日期）
  3. 初始视图的名称（默认为“week”）    

然后打开/js/default.js文件（由 Visual Studio 自动创建），并在 app.onactivated 事件处理程序代码中初始化日程管理器，如下所示： 

//default.js
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', new Date(), "week"); 
          }, true);
 
      } else { }
      args.setPromise(WinJS.UI.processAll());
   }
};

WinJS.Utilities.ready() 函数确保在页面完全加载后才执行指定的函数。 

如果您想配置日程管理器，可以使用与 Web 版本相同的技术（相关文档）。例如，要使日程管理器中的周从星期一开始而不是星期天开始，我们需要添加以下代码： 

//default.js 
scheduler.config.start_on_monday = true;  
... 
scheduler.init('scheduler_here');

第 6 步 - 在日历中加载数据

如果您现在运行应用程序，您将在页面上看到一个空日历。它还没有包含任何数据。 有多种方法可以存储日程管理器的数据，但只有一种方法可以加载数据到其中——那就是 parse 方法  （相关文档）： 

//default.js 
scheduler.parse(data, datatype);

让我们用一些数据来填充我们的日历。例如，我们将显示 2013 年 7 月在全球范围内举行的一系列开发者会议。数据将以 JSON 格式提供。 

//default.js
var conferences = [
    { text: "EnyoJS workshop at dotJS",     
      start_date: "06.01.2013 14:00", end_date: "06.01.2013 18:00" },
    { text: "CSS Dev Conf",                 
      start_date: "06.05.2013 09:00", end_date: "06.05.2013 17:00" },
    { text: "RuPy 12 Conf : Brazil",        
      start_date: "06.07.2013 08:30", end_date: "06.09.2013 18:00" },
    { text: "Cardiffrb",                    
      start_date: "06.13.2013 19:30", end_date: "06.13.2013 22:30" },
    { text: "Django User Group Berlin #32", 
      start_date: "06.18.2013 19:00", end_date: "06.18.2013 21:00" }
];

然后，在最终的default.js文件中，它将如下所示（我们将日程管理器相关的代码移到了一个单独的函数中，以保持应用程序初始化代码的整洁，并设置日程管理器的初始日期，使其最初显示我们的会议） 

//default.js
(function () {
    "use strict";
 
    WinJS.Binding.optimizeBindingReferences = true;
 
    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
 
    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== 
                     activation.ApplicationExecutionState.terminated) {
 
                WinJS.Utilities.ready(initScheduler);
 
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll());
        }
    };
 
    app.start();
})();
 
function initScheduler(){
    scheduler.init('scheduler_here', new Date(2012, 11,1));
    var conferences = [
        { text: "EnyoJS workshop at dotJS", 
          start_date: "12.01.2012 14:00", 
          end_date: "12.01.2012 18:00" },
        { text: "CSS Dev Conf", 
          start_date: "12.05.2012 09:00", 
          end_date: "12.05.2012 17:00" },
        { text: "RuPy 12 Conf : Brazil", 
          start_date: "12.07.2012 08:30", 
          end_date: "12.09.2012 18:00" },
        { text: "Cardiffrb", 
          start_date: "12.13.2012 19:30", 
          end_date: "12.13.2012 22:30" },
        { text: "Django User Group Berlin #32", 
          start_date: "12.18.2012 19:00", 
          end_date: "12.18.2012 21:00" }
    ];
    scheduler.parse(conferences, 'json');
}

第 7 步 - 存储日历数据

对于 Windows 应用商店应用程序，有不同的数据存储方式，包括 Web 资源、Indexed Database、HTML5 localStorage 等。我不会详细介绍如何实现所有可能数据源的 CRUD，但我会为您提供一些关于此方面的建议。 

要跟踪应用程序中的用户操作，请使用 dhtmlxScheduler 的以下事件： 

  • onEventDeleted - 在用户从日程管理器中删除事件后触发 
  • onEventChanged - 在事件被修改后（移动、调整大小或通过详细信息表单编辑）触发   
  • onEventAdded - 在用户创建新事件时触发 
scheduler.attachEvent("onEventDeleted", 
              function(event_id,event_object){
    //add event to the data store
}); 
 
scheduler.attachEvent("onEventChanged", function(event_id, event_object){
    //update event in the data store 
}); 
 
scheduler.attachEvent("onEventAdded", function(event_id, event_object){
    //delete event from the data store 
});

结论   

如果您按照本教程的步骤进行操作，您现在已经构建了一个基本的 Windows 应用商店应用程序，具有漂亮的日程管理器界面，允许最终用户管理他们的事件和约会。您可以下载应用程序的源代码并根据需要进一步自定义。使用 dhtmlxScheduler 的功能，您可以为 Windows 应用商店构建更高级的事件日历应用程序。 

© . All rights reserved.