Overview

  • How to add Previous/Next  buttons that change the month displayed by the Vue.js Scheduler component.
  • There are two ways to change the Scheduler properties: config object and direct access
  • This Vue.js project was generated using the online UI Builder application
  • Includes 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.

Changing the Scheduler Properties in Vue

When using the Vue.js Scheduler from daypilot-pro-vue package (see npm.daypilot.org), there are two ways to change the properties:

  1. Change the :config object.
  2. Modify the properties directly and call update().

"Next" Button: Use the :config Object to Change the Date

vue-js-scheduler-changing-visible-date-next.png

All changes to the :config property are detected and applied automatically:

<template>
  <div>
    <!-- ... -->

    <button id="next" v-on:click="next">Next</button>

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

  </div>
</template>


<script>

import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'
import Vue from 'vue'

export default {
  // ...

  methods: {
    next() {
      Vue.set(this.config, "startDate", this.config.startDate.addMonths(1));
      Vue.set(this.config, "days", this.config.startDate.daysInMonth());
    },
  // ...
  }

  // ...
}
</script>

"Previous" Button: Direct Properties Update

vue-js-scheduler-changing-visible-date-previous.png

You can change the scheduler properties directly using the DayPilot.Scheduler object. It's necessary to call update() after making the changes to reload the Scheduler:

<template>
  <div>
    <!-- ... -->

    <button id="next" v-on:click="previous">Previous</button>

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

  </div>
</template>


<script>

import {DayPilot, DayPilotScheduler} from 'daypilot-pro-vue'
import Vue from 'vue'

export default {
  // ...
  computed: {
    // DayPilot.Scheduler object - https://api.daypilot.org/daypilot-scheduler-class/
    scheduler: function () {
      return this.$refs.scheduler.control;
    }
  },
  methods: {
    previous() {
      this.scheduler.startDate = this.scheduler.startDate.addMonths(-1);
      this.scheduler.days = this.scheduler.startDate.daysInMonth();
      this.scheduler.update();
    },
    // ...
  }

  // ...
}
</script>

You can also set the properties using a single call - specify them using the options parameter of the update() method:

methods: {
  previous() {
    let start = this.scheduler.startDate.addMonths(-1);
    this.scheduler.update({
      startDate: start,
      days: start.daysInMonth()
    });
  },
  // ...
}

Full Source Code

<template>
  <div>
  <div class="space">
    <button id="previous" v-on:click="previous">Previous</button>
    <button id="next" v-on:click="next">Next</button>
  </div>
  <DayPilotScheduler id="dp" :config="config" ref="scheduler" />
  </div>
</template>

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

export default {
  name: 'Scheduler',
  data: function() {
    return {
      config: {
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
        scale: "Day",
        days: DayPilot.Date.today().daysInMonth(),
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        timeRangeSelectedHandling: "Enabled",
        onTimeRangeSelected: function (args) {
          var dp = this;
          DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
            dp.clearSelection();
            if (!modal.result) { return; }
            dp.events.add(new DayPilot.Event({
              start: args.start,
              end: args.end,
              id: DayPilot.guid(),
              resource: args.resource,
              text: modal.result
            }));
          });
        },
        treeEnabled: true,
      },
    }
  },
  props: {
  },
  components: {
    DayPilotScheduler
  },
  computed: {
    // DayPilot.Scheduler object - https://api.daypilot.org/daypilot-scheduler-class/
    scheduler: function () {
      return this.$refs.scheduler.control;
    }
  },
  methods: {
    previous() {
      this.scheduler.startDate = this.scheduler.startDate.addMonths(-1);
      this.scheduler.days = this.scheduler.startDate.daysInMonth();
      this.scheduler.update();
    },
    next() {
      Vue.set(this.config, "startDate", this.config.startDate.addMonths(1));
      Vue.set(this.config, "days", this.config.startDate.daysInMonth());
    },
    loadEvents() {
      const events = [
        // { id: 1, start: "2018-10-01T00:00:00", end: "2018-10-05T00:00:00", text: "Event 1", resource: "R1" },
        { id: 2, start: DayPilot.Date.today().addDays(2), end: DayPilot.Date.today().addDays(5), text: "Event 1", resource: "R2"}
      ];
      Vue.set(this.config, "events", events);
    },
    loadResources() {
      const resources = [
        {name: "Resource 1", id: "R1"},
        {name: "Resource 2", id: "R2"},
        {name: "Resource 3", id: "R3"},
        {name: "Resource 4", id: "R4"},
        {name: "Resource 5", id: "R5"},
        {name: "Resource 6", id: "R6"},
        {name: "Resource 7", id: "R7"},
        {name: "Resource 8", id: "R8"},
      ];
      Vue.set(this.config, "resources", resources);
    }
  },
  mounted: function() {
    this.loadResources();
    this.loadEvents();

    this.scheduler.message("Welcome!");
  }
}
</script>

<style scoped>
  button {
    display: inline-block;
    text-align: center;
    background-color: #3c78d8;
    border: 1px solid #1155cc;
    color: #fff;
    padding: 6px 20px;
    border-radius: 2px;
    cursor: pointer;
    margin-right: 5px;
    text-decoration: none;
  }
</style>