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 install yarn serve
對於使用npm調用：
npm install npm run dev
開始吧–您的應用程序現在在以下位置運行：http：// localhost：8080
2.移至計划程序部分
此時，我們需要獲取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，如下所示：
3.聆聽變更並處理事件
假設我們需要跟蹤和處理用戶在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進行一些更改-消息應顯示在右側：
這是使用DHTMLX創建簡單的Vue事件/預訂日歷的三個步驟。該演示應用程序可以在我們的GitHub存儲庫中找到。
如果您按照上述說明進行操作並遇到任何困難，請與我們分享！
本文章轉載自【慧都科技】evget歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，尊重他人勞動成果