How to Use DHTMLX Scheduler with Vue.js Framework [Demo]

| Leave a comment

Great news for Vue.js lovers! Our dev team prepared a thorough guide on how to integrate our high-performing JS event calendar component – DHTMLX Scheduler – with the progressive JavaScript framework Vue.js.

So, below is a step-by-step tutorial for creating a Vue Scheduler component with code snippets and illustrations. You can also kick-start the development process with a complete demo on GitHub.

New to DHTMLX Scheduler? Learn more about the library now >

1. How to Start

Firstly, we need to create an app skeleton. For this purpose, we’re going to use vue-cli. If you don’t have one, you can easily install it with the node package manager using command (npm install -g @vue/cli). Check this article >

In order to use yarn in a project, it must be installed globally in the system (npm install -g yarn).

So, let’s run the next command to create an app:

vue create scheduler-vue

It will request you to provide project information. You can choose to leave the default answers and press Enter for each question or select functions manually.

The next step is to go to the app directory, install dependencies and run your Vue.js app:

cd scheduler-vue

For using yarn call:

yarn install
yarn serve

For using npm call:

npm install
npm run dev

Here we go – your app now runs on: http://localhost:8080

vuejs-install

2. Moving to Scheduler Part

At this point, we need to get the code of DHTMLX Scheduler – let’s run the command:

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

As we want to add DHTMLX Scheduler to our app, we have to create a component. Firstly, we’ll create a folder for the app components – open the src folder and create the components folder in it. After that, create Scheduler.vue file in the components folder and add the next lines of code into it:

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

Congrats! We’re done with the Scheduler component. When the element will be added to the page, it will initialize Scheduler under “scheduler” ref. Afterward, Scheduler will load data from the events property.

Right now we need to finally add the component to our Vue.js application. Open App.vue and replace the code we’ve already had there with the next lines:

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

Once you are done, you will see DHTMLX Scheduler with predefined events on the page looking like that:

Basic Vue Scheduler component

3. Listening to changes and handling events

Suppose we need to track and process changes made by users in our Scheduler – for example, show details of selected events in a separate form, update the data model of the parent component or send these changes to the backend. Simply put, we need our app to be aware of what’s going on inside Scheduler.

For that purpose, we can capture API events of DHTMLX Scheduler and $emit them to the parent component.

To make it clearer, let’s see how to create a simple changelog noting down all the changes made in Scheduler in a neat list on the right side of the page.

At first, you should go into the Scheduler component and place the code that will trace and emit Scheduler changes just before calling scheduler.init:

  {{ 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");
        });

What this code does is add handlers to the create/update/delete events of DHTMLX Scheduler. If some particular handler is called, it will trigger the Vue event on our component with parameters.

Secondly, you need to attach event listeners to the app component and write a log of actions in another div. Let’s do it this way:

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

With this code we have equipped our app component with:

  • the array property for storing log entries;
  • method for adding a new message on top of our array so that new entries can be displayed first in our log;
  • two more methods for creating log messages for the actions performed with tasks and links and for adding them to the message stack.

All what’s left to do now is update the template of the app component to apply these functions:

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

There you are!

Summing up our step-by-step guide, here we’ve created a simple two-column layout of DHTMLX Scheduler, attached our log handlers to the Scheduler events that we emit from the Scheduler module, added a container for log messages and bound them to our log messages stack.

Just to check everything works fine, try to make some changes to DHTMLX Scheduler – messages should be displayed on the right side:
Event listeners in Vue Scheduler component

These were three steps for creating a simple Vue Event/Booking Calendar with DHTMLX. The demo application can be found in our GitHub repository.

If you follow the instructions above and face any difficulties, share them with us!

What Else You Can Do:

Leave a Reply