dhtmlxScheduler是一個(gè)類似于Google日歷的JavaScript日程安排控件，日歷事件通過Ajax動(dòng)態(tài)加載，支持通過拖放功能調(diào)整事件日期和時(shí)間。事件可以按天，周，月三個(gè)種視圖顯示。

本文介紹了dhtmlxScheduler v5.3各小版本更新內(nèi)容集合，請(qǐng)查看文章內(nèi)容了解詳細(xì)信息。

點(diǎn)擊下載dhtmlxScheduler最新版

對(duì)Vue.js愛好者來說是個(gè)好消息！我們的開發(fā)團(tuán)隊(duì)為如何將我們的高性能JS事件日歷組件（DHTMLX Scheduler）與漸進(jìn)式JavaScript框架Vue.js集成提供了詳盡的指南。

因此，下面是有關(guān)使用代碼段和插圖創(chuàng)建Vue Scheduler組件的分步教程。您還可以通過GitHub上的完整演示來啟動(dòng)開發(fā)過程。

1.如何開始

首先，我們需要?jiǎng)?chuàng)建一個(gè)應(yīng)用程序框架。為此，我們將使用vue-cli。如果您沒有，則可以使用命令（npm install -g @ vue / cli）使用節(jié)點(diǎn)軟件包管理器輕松安裝它。查看本文>
為了在項(xiàng)目中使用yarn，必須將其全局安裝在系統(tǒng)中（npm install -g yarn）。
因此，讓我們運(yùn)行下一個(gè)命令來創(chuàng)建一個(gè)應(yīng)用程序：

vue create scheduler-vue

下一步是轉(zhuǎn)到應(yīng)用程序目錄，安裝依賴項(xiàng)并運(yùn)行您的Vue.js應(yīng)用程序：

CD Scheduler - Vue

yarn install
yarn serve

npm install
npm run dev

此時(shí)，我們需要獲取DHTMLX Scheduler的代碼-讓我們運(yùn)行以下命令：

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

{{ 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>

現(xiàn)在，我們最終需要將該組件添加到我們的Vue.js應(yīng)用程序中。打開App.vue并用下一行替換我們已經(jīng)在其中存在的代碼：

{{ 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>

假設(shè)我們需要跟蹤和處理用戶在Scheduler中所做的更改，例如，以單獨(dú)的形式顯示所選事件的詳細(xì)信息，更新父組件的數(shù)據(jù)模型或?qū)⑦@些更改發(fā)送到后端。簡而言之，我們需要我們的應(yīng)用程序了解Scheduler內(nèi)部的情況。

為此，我們可以捕獲DHTMLX Scheduler的API事件并將它們$ emit給父組件。

為了更加清楚，讓我們看一下如何創(chuàng)建一個(gè)簡單的變更日志，在頁面右側(cè)的整潔列表中記錄下來在Scheduler中所做的所有更改。

首先，應(yīng)該在調(diào)用scheduler.init之前進(jìn)入Scheduler組件并放置將跟蹤和發(fā)出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");
        });

其次，您需要將事件偵聽器附加到應(yīng)用程序組件，并在另一個(gè)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>

• 用于存儲(chǔ)日志條目的數(shù)組屬性；
• 在數(shù)組頂部添加新消息的方法，以便可以在日志中首先顯示新條目；
• 還有兩種方法可以為使用任務(wù)和鏈接執(zhí)行的操作創(chuàng)建日志消息，并將它們添加到消息堆棧中。

{{ 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>

只是為了檢查一切是否正常，請(qǐng)嘗試對(duì)DHTMLX Scheduler進(jìn)行一些更改-消息應(yīng)顯示在右側(cè)：

如果您按照上述說明進(jìn)行操作并遇到任何困難，請(qǐng)與我們分享！