将dhtmlxScheduler与MeteorJS一起使用

Stas Wolski

0/5 (0投票)

2016 年 7 月 18 日

GPL3

3分钟阅读

10809

了解如何将JavaScript事件日历与MeteorJS框架一起使用。

引言

在本文中，我们将学习使用 Meteor 框架创建 Web 应用程序的基础知识。 Meteor 是一个使用 Node.js 编写的开源全栈 JavaScript 框架。它旨在简化 Web 应用程序的开发过程。该框架的主要特点是能够实时传输数据更改。

为了使我们的示例更令人兴奋，我们不会使用典型的“Hello, World!” 方法来学习一切如何工作。相反，我们将使用 dhtmlxScheduler（功能丰富的 JavaScript 事件日历）创建一个在线日程安排程序。

创建我们的应用程序只需要几个简单的步骤。好吧，让我们开始吧。

步骤 1. 安装 Meteor 并创建一个新项目

安装 Meteor 的方式取决于您使用的操作系统。对于 Windows，您应该获取安装包。

如果是 OSX 或 LINUX，您可以使用以下命令

curl https://install.meteor.com/ | sh

查看安装页面了解更多详情。

过一会儿，所有必需的文件将被安装，您就可以创建一个新项目了。我们的项目将被命名为 meteor_scheduler。为此，请在您的终端中键入

meteor create meteor_scheduler

此命令将创建一个包含所需文件的新文件夹。现在，我们可以尝试一切是否正常。打开新创建的文件夹并运行 meteor 命令

cd meteor_scheduler
meteor

这是您应该得到的典型输出

=> Started proxy.                             
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: https://:3000/

您可以在浏览器中打开 https://:3000 来检查结果。您应该看到带有几个链接的点击计数器

看起来不是很令人兴奋，但请耐心等待。

步骤 2. 添加并初始化 dhtmlxScheduler 包

有一个特殊的包允许您将 dhtmlxScheduler 添加到您的 Meteor 项目。无需手动下载和解压缩任何文件。要添加所需的包，请使用命令

meteor add dhtmlx:scheduler

要了解有关此包的更多信息，您可以查看此页面。

由于我们正在处理应用程序的客户端，我们应该根据我们的需要编辑 *client/main.html* 文件。将现有代码替换为以下代码

<body>
  <div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:500px;'>
      <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:332px;"></div>
      <div class="dhx_cal_tab" name="week_tab" style="right:268px;"></div>
      <div class="dhx_cal_tab" name="month_tab" style="right:204px;"></div>
      <div class="dhx_cal_tab" name="year_tab" style="right:140px;"></div>
      </div>
      <div class="dhx_cal_header">
      </div>
      <div class="dhx_cal_data">
      </div>
  </div>
</body>

此代码将创建导航栏、按钮等。要初始化调度程序，请使用 init() 方法。将此代码放在 <body></body> 部分的底部

<script type="text/javascript">
    scheduler.init("scheduler_here", new Date());
</script>

就这样！我们已经可以尝试我们的应用程序了。如果您关闭了服务器，请运行 meteor 命令，然后在浏览器中打开 https://:3000。结果如下所示

您可以双击适当的日历区域，新任务将出现。调整其大小以更改其持续时间或将其拖动到您想要的任何日期

看起来不错，但如果您关闭服务器然后再次运行它，所有创建的任务都将消失。原因是我们没有提供保存数据的机会。让我们修复它。

步骤 3. 为 dhtmlxScheduler 添加 Meteor 数据适配器

首先，将 dhtmlxScheduler 数据适配器包添加到您的应用程序

meteor add dhtmlx:scheduler-data

现在，您应该定义数据集合。此任务有不同的可用方法，但我们将使用一种使集合对客户端和服务器都可用的方法。我们需要在项目的根文件夹中创建一个名为 *collections* 的新文件夹。之后，在此文件夹中创建一个名为 *tasks.js* 的文件，并将以下代码添加到其中

TasksCollection = new Mongo.Collection("tasks");

现在，我们应该更改调度程序的初始化方式。将 *client/main.html* 文件中的现有脚本替换为以下脚本

Meteor.startup(function() {
  //Init dhtmlxScheduler.
  scheduler.init("scheduler_here", new Date());

  //Init dhtmlxScheduler data adapter.
  scheduler.meteor(TasksCollection);
  //or
  scheduler.meteor(TasksCollection.find(/*[anything]*/), TasksCollection);
});

完成。现在您可以刷新页面，重新启动服务器，而不必担心数据安全。

结论

使用 Meteor 的最佳部分是开发速度。正如您所看到的，如果工具开发人员注意创建正确的 Meteor 包，则甚至不需要手动下载其他文件。 Meteor 会处理一切。使用 Meteor，您可以实时查看更改。在您更改一行代码后，您可以立即看到后果，而无需重新启动服务器。