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

下一步是轉到應用程序目錄，安裝依賴項并運行您的Vue.js應用程序：

CD Scheduler - Vue

yarn install
yarn serve

npm install
npm run dev

此時，我們需要獲取DHTMLX Scheduler的代碼-讓我們運行以下命令：

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>

現在，我們最終需要將該組件添加到我們的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>

假設我們需要跟蹤和處理用戶在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");
        });

其次，您需要將事件偵聽器附加到應用程序組件，并在另一個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進行一些更改-消息應顯示在右側：

如果您按照上述說明進行操作并遇到任何困難，請與我們分享！