彩票走势图

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进行一些更改-消息应显示在右侧：

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