日程安排控件dhtmlxScheduler教程：如何将DHTMLX Scheduler与Vue.js框架一起使用

对Vue.js爱好者来说是个好消息！我们的开发团队为如何将我们的高性能JS事件日历组件（DHTMLX Scheduler）与渐进式JavaScript框架Vue.js集成提供了详尽的指南。

dhtmlxScheduler是一个类似于Google日历的JavaScript日程安排控件，日历事件通过Ajax动态加载，支持通过拖放功能调整事件日期和时间。事件可以按天，周，月三个种视图显示。

本文介绍了dhtmlxScheduler v5.3各小版本更新内容集合，请查看文章内容了解详细信息。

dhtmlxScheduler最新版

对Vue.js爱好者来说是个好消息！我们的开发团队为如何将我们的高性能JS事件日历组件（DHTMLX Scheduler）与渐进式JavaScript框架Vue.js集成提供了详尽的指南。

因此，下面是有关使用代码段和插图创建Vue Scheduler组件的分步教程。您还可以通过GitHub上的完整演示来启动开发过程。

1.如何开始

首先，我们需要创建一个应用程序框架。为此，我们将使用vue-cli。如果您没有，则可以使用命令（npm install -g @ vue / cli）使用节点软件包管理器轻松安装它。查看本文>
为了在项目中使用yarn，必须将其全局安装在系统中（npm install -g yarn）。
因此，让我们运行下一个命令来创建一个应用程序：

vue create scheduler-vue

它将要求您提供项目信息。您可以选择保留默认答案，然后为每个问题按Enter键或手动选择功能。

下一步是转到应用程序目录，安装依赖项并运行您的Vue.js应用程序：

CD Scheduler - Vue

对于使用yarn调用：

yarn installyarn serve

对于使用npm调用：

npm installnpm run dev

开始吧–您的应用程序现在在以下位置运行：http：// localhost：8080

此时，我们需要获取DHTMLX Scheduler的代码-让我们运行以下命令：

yarn add dhtmlx-scheduler --save (for yarn)npm install dhtmlx-scheduler --save (for npm)

当我们想将DHTMLX Scheduler添加到我们的应用程序时，我们必须创建一个组件。首先，我们将为应用程序组件创建一个文件夹–打开src文件夹并在其中创建components文件夹。之后，在components文件夹中创建Scheduler.vue文件，并将以下代码行添加到其中：

{{ src/components/Scheduler.vue }}<template>  <div ref="scheduler"></div></template><script>import 'dhtmlx-scheduler'export default {  name: 'scheduler',  props: {    events: {      type: Array,      default () {        return {events: []}      }    }  },  mounted: function () {    scheduler.skin = "material";    scheduler.config.header = [        "day",        "week",        "month",        "date",        "prev",        "today",        "next"    ];    scheduler.init(this.$refs.scheduler, new Date(2020, 0, 20), "week");    scheduler.parse(this.$props.events);  }}</script><style>    @import "~dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";</style>

计划程序组件已完成。将元素添加到页面后，它将在“ scheduler”参考下初始化Scheduler 。之后，调度程序将从事件属性中加载数据。

现在，我们最终需要将该组件添加到我们的Vue.js应用程序中。打开App.vue并用下一行替换我们已经在其中存在的代码：

{{ src/App.vue }}<template>  <div class="container">    <scheduler class="left-container" :events="events"></scheduler>  </div></template><script>import Scheduler from './components/Scheduler.vue';export default {  name: 'app',  components: {Scheduler},  data () {    return {      events: [        { id:1, start_date:"2020-01-20 6:00", end_date:"2020-01-20 15:00", text:"Event 1"},        { id:2, start_date:"2020-01-23 6:00", end_date:"2020-01-23 20:00", text:"Event 2"}      ]    }  }}</script><style>  html, body {    height: 100%;    margin: 0;    padding: 0;  }  .container {    height: 100%;    width: 100%;  }  .left-container {    overflow: hidden;    position: relative;    height: 100vh;  }</style>

完成后，您将在页面上看到带有预定义事件的DHTMLX Scheduler，如下所示：

假设我们需要跟踪和处理用户在Scheduler中所做的更改，例如，以单独的形式显示所选事件的详细信息，更新父组件的数据模型或将这些更改发送到后端。简而言之，我们需要我们的应用程序了解Scheduler内部的情况。

为此，我们可以捕获DHTMLX Scheduler的API事件并将它们$ emit给父组件。

为了更加清楚，让我们看一下如何创建一个简单的变更日志，在页面右侧的整洁列表中记录下来在Scheduler中所做的所有更改。

首先，应该在调用scheduler.init之前进入Scheduler组件并放置将跟踪和发出Scheduler更改的代码：

  {{ src/components/Scheduler.vue }}         scheduler.attachEvent("onEventAdded", (id, ev) => {            this.$emit("event-updated", id, "inserted", ev);        });        scheduler.attachEvent("onEventChanged", (id, ev) => {            this.$emit("event-updated", id, "updated", ev);        });        scheduler.attachEvent("onEventDeleted", (id, ev) => {            this.$emit("event-updated", id, "deleted");        });

该代码的作用是将处理程序添加到DHTMLX Scheduler的create / update / delete事件中。如果调用了某个特定的处理程序，它将使用参数触发组件上的Vue事件。

其次，您需要将事件侦听器附加到应用程序组件，并在另一个div中写入操作日志。让我们这样做：

{{ src/App.vue }}<script>import Scheduler from './components/Scheduler.vue';export default {  name: 'app',  components: {Scheduler},  data () {    return {      events: [        { id:1, start_date:"2020-01-20 6:00", end_date:"2020-01-20 15:00", text:"Event 1"},        { id:2, start_date:"2020-01-23 6:00", end_date:"2020-01-23 20:00", text:"Event 2"}      ],      messages: []    }  },  methods: {    addMessage (message) {      this.messages.unshift(message)      if (this.messages.length > 40) {        this.messages.pop()      }    },    logEventUpdate (id, mode, ev) {      let text = (ev && ev.text ` (${ev.text})`: '')      let message = `Event ${mode}: ${id} ${text}`      this.addMessage(message)    },  }}</script><style>  html, body {    height: 100%;    margin: 0;    padding: 0;  }  .container {    height: 100%;    width: 100%;  }  .left-container {    overflow: hidden;    position: relative;    height: 100vh;    display: inline-block;    width: 82vw;  }  .right-container {    border-right: 1px solid #cecece;    float: right;    height: 100%;    width: 340px;    box-shadow: 0 0 5px 2px #aaa;    position: relative;    z-index:2;  }.scheduler-messages {    list-style-type: none;    height: 50%;    margin: 0;    overflow-x: hidden;    overflow-y: auto;    padding-left: 5px;  }  .scheduler-messages > .scheduler-message {    background-color: #f4f4f4;    box-shadow:inset 5px 0 #d69000;    font-family: Geneva, Arial, Helvetica, sans-serif;    font-size: 14px;    margin: 5px 0;    padding: 8px 0 8px 10px;  }</style>

通过此代码，我们为我们的应用程序组件配备了：

• 用于存储日志条目的数组属性；
• 在数组顶部添加新消息的方法，以便可以在日志中首先显示新条目；
• 还有两种方法可以为使用任务和链接执行的操作创建日志消息，并将它们添加到消息堆栈中。

现在剩下要做的就是更新应用程序组件的模板以应用以下功能：

{{ src/App.vue }}<template>  <div class="container">    <scheduler class="left-container" :events="events" @event-updated="logEventUpdate"></scheduler>    <div class="right-container">      <ul class="scheduler-messages">        <li class="scheduler-message" v-for="message in messages">{{message}}</li>      </ul>    </div>  </div></template>

总结分步指南，这里我们创建了一个简单的两列DHTMLX Scheduler布局，将日志处理程序附加到我们从Scheduler模块发出的Scheduler事件中，添加了一个用于存储日志消息并绑定它们的容器到我们的日志消息堆栈。

只是为了检查一切是否正常，请尝试对DHTMLX Scheduler进行一些更改-消息应显示在右侧：

如果您按照上述说明进行操作并遇到任何困难，请与我们分享！

想要购买dhtmlxScheduler正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：

来源：慧都