Features

  • Introduction to using the Vue.js Scheduler component from DayPilot Pro for JavaScript
  • Includes a downloadable project with a simple Scheduler configuration that you can use as a start for your own implementation
  • The project includes all required dependencies
  • It uses a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

New Vue Project

We will generate a new Vue project using Vue CLI:

vue create vuejs-scheduler-quick-start

This will create an empty project with a sample HelloWorld component. In this tutorial, we will create a new component (Scheduler.vue) that will display a configured instance of DayPilot Pro Scheduler.

DayPilot Installation

Since version 2018.3.3434, DayPilot Pro for JavaScript includes a special Vue.js package (daypilot-pro-vue) that lets you use the scheduling components in Vue.js.

The installation links for NPM and Yarn are available at npm.daypilot.org:

yarn add https://npm.daypilot.org/daypilot-pro-vue/trial/2018.3.3435.tar.gz

Vue.js Scheduler Component

Now we can create our scheduler component.

The first version is very simple:

  • We import DayPilotScheduler component from daypilot-pro-vue package (in the "components" section)
  • We add <DayPilotScheduler> tag to the component template

This is the minimum setup that displays the Scheduler with the default configuration and without any data.

src/components/Scheduler.vue

<template>
  <DayPilotScheduler id="dp" />
</template>

<script>
  import {DayPilotScheduler} from 'daypilot-pro-vue'

  export default {
    name: 'Scheduler',
    components: {
      DayPilotScheduler
    }
  }
</script>

Displaying the Scheduler

vue-js-scheduler-quick-start-initialization.png

Now we can modify the main application component to display our new Scheduler:

<template>
  <div id="app">
    <Scheduler />
  </div>
</template>

<script>
import Scheduler from './components/Scheduler.vue'

export default {
  name: 'app',
  components: {
    Scheduler
  }
}
</script>

Scheduler Configuration

vue-js-scheduler-configuration.png

The Scheduler properties can be set using a config object that is specified using "config" attribute:

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

You can use this object to specify Scheduler properties and event handlers. We will add a couple of properties to adjust the visible time range, time header and rows (resources):

data: function() {
  return {
    config: {
      timeHeaders: [
        {groupBy: "Month"},
        {groupBy: "Day", format: "d"}
      ],
      scale: "Day",
      startDate: DayPilot.Date.today().firstDayOfYear(),
      days: DayPilot.Date.today().daysInYear(),
      resources: [
        {name: "Resource 1", id: "R1"},
        {name: "Resource 2", id: "R2"},
        {name: "Resource 3", id: "R3"}
      ]
    },
  }
}

The config object is automatically watched for changes. If you modify any property the Scheduler will be updated automatically.

Full source code:

<template>
  <DayPilotScheduler id="dp" :config="config" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        timeHeaders: [
          {groupBy: "Month"},
          {groupBy: "Day", format: "d"}
        ],
        scale: "Day",
        startDate: DayPilot.Date.today().firstDayOfYear(),
        days: DayPilot.Date.today().daysInYear(),
        resources: [
          {name: "Resource 1", id: "R1"},
          {name: "Resource 2", id: "R2"},
          {name: "Resource 3", id: "R3"}
        ]
      },
    }
  },
  components: {
    DayPilotScheduler
  }
}
</script>

Accessing the Direct Scheduler API

vue-js-scheduler-direct-api-access.png

The Scheduler includes a rich API that will let you interact with the component directly. In order to use the API, we need a reference to the underlying DayPilot.Scheduler instance.

The DayPilot.Scheduler reference is available as "control" property of the DayPilotScheduler Vue.js component. If we add a "ref" attribute (ref="scheduler") to the <DayPilotScheduler> tag we can reach the component class as this.$refs.scheduler.control. We will add a shortcut using a scheduler computed property:

<template>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        // ...
      }
    }
  },
  components: {
    DayPilotScheduler
  },
  computed: {
    scheduler: function () {
      return this.$refs.scheduler.control;
    }
  },
}
</script>

Now we can call the Scheduler methods directly:

mounted: function() {
  this.scheduler.message("Welcome!");
}

Full Source Code

Scheduler.vue

<template>
  <div>
      <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
  </div>
</template>

<script>
import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        timeHeaders: [
          {groupBy: "Month"},
          {groupBy: "Day", format: "d"}
        ],
        scale: "Day",
        startDate: DayPilot.Date.today().firstDayOfYear(),
        days: DayPilot.Date.today().daysInYear(),
        resources: [
          {name: "Resource 1", id: "R1"},
          {name: "Resource 2", id: "R2"},
          {name: "Resource 3", id: "R3"}
        ],
        events: [
          {id: 1, text: "Event 1", start: DayPilot.Date.today().addDays(2), end: DayPilot.Date.today().addDays(5), resource: "R2"}
        ],
        scrollTo: DayPilot.Date.today()
      },
    }
  },
  components: {
    DayPilotScheduler
  },
  computed: {
    // DayPilot.Scheduler object - https://api.daypilot.org/daypilot-scheduler-class/
    scheduler: function () {
      return this.$refs.scheduler.control;
    }
  },
  mounted: function() {
    this.scheduler.message("Welcome!");
  }
}
</script>

<style scoped>
</style>