Vue.js Scheduler: Changing Visible Date

How to switch the date range displayed by the Vue.js Scheduler using next/previous buttons.

Downloads	Download Source Vue 3 application with JavaScript source code for download. 29 kB
Languages	JavaScript
Technologies	Vue

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.

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:

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

Change Vue Scheduler Date Range using "Next" Button

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

<template>
  <div class="buttons">
    <button id="next" v-on:click="next">Next</button>
  </div>
  <DayPilotScheduler :config="config" ref="schedulerRef" />
</template>

<script setup>
import { DayPilot, DayPilotScheduler } from 'daypilot-pro-vue';
import { ref, reactive, onMounted } from 'vue';

const config = reactive({
  timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
  scale: "Day",
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  // ...
});

const schedulerRef = ref(null);

const next = () => {
  config.startDate = config.startDate.addMonths(1);
  config.days = config.startDate.daysInMonth();
};

</script>

You can also use the update() method of the DayPilot.Scheduler object to change the date range:

const next = () => {
  const scheduler = schedulerRef.value?.control;
  const startDate = scheduler.startDate.addMonths(1);
  const days = startDate.daysInMonth();
  scheduler.update({startDate, days});
};

Just note that in this case, the startDate and days properties of the config will not be changed. This may reset the date if you change any other config property.

To avoid this problem, remove the startDate and days properties from the config object.

Change Vue Scheduler Date Range using "Previous" Button

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 class="buttons">
    <button id="previous" v-on:click="previous">Previous</button>
  </div>
  <DayPilotScheduler :config="config" ref="schedulerRef" />
</template>

<script setup>
import { DayPilot, DayPilotScheduler } from 'daypilot-pro-vue';
import { ref, reactive, onMounted } from 'vue';

const config = reactive({
  timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
  scale: "Day",
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  // ...
});

const schedulerRef = ref(null);

const previous = () => {
  config.startDate = config.startDate.addMonths(-1);
  config.days = config.startDate.daysInMonth();
};

</script>

You can also set the properties using the update() method:

const previous = () => {
  const scheduler = schedulerRef.value?.control;
  const startDate = scheduler.startDate.addMonths(-1);
  const days = startDate.daysInMonth();
  scheduler.update({startDate, days});
};

Full Source Code

Here is the source code of our Vue Scheduler example that shows how to change the visible date range using Previous and Next buttons.

It also includes some other basic config options (like event styling using onBeforeEventRender and drag-and-drop event creation using onTimeRangeSelected).

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

<script setup>
import { DayPilot, DayPilotScheduler } from 'daypilot-pro-vue';
import { ref, reactive, onMounted } from 'vue';

const config = reactive({
  timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
  scale: "Day",
  days: DayPilot.Date.today().daysInMonth(),
  startDate: DayPilot.Date.today().firstDayOfMonth(),
  timeRangeSelectedHandling: "Enabled",
  durationBarVisible: false,
  onTimeRangeSelected: async (args) => {
    const scheduler = args.control;
    const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
    scheduler.clearSelection();
    if (modal.canceled) { return; }
    scheduler.events.add({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      resource: args.resource,
      text: modal.result
    });
  },
  onBeforeEventRender: args => {
    args.data.areas = [
      {
        top: 8,
        right: 5,
        width: 20,
        height: 20,
        padding: 2,
        symbol: "icons/daypilot.svg#x-2",
        style: "cursor: pointer",
        fontColor: "#666",
        toolTip: "Delete",
        onClick: async args => {
          const e = args.source;
          schedulerRef.value?.control.events.remove(e);
        }
      }
    ];
  },
  treeEnabled: true,
});
const schedulerRef = ref(null);

const previous = () => {
  config.startDate = config.startDate.addMonths(-1);
  config.days = config.startDate.daysInMonth();
};

const next = () => {
  config.startDate = config.startDate.addMonths(1);
  config.days = config.startDate.daysInMonth();
};

const loadEvents = () => {
  const events = [
    {
      id: 1,
      start: DayPilot.Date.today().firstDayOfMonth().addDays(5),
      end: DayPilot.Date.today().firstDayOfMonth().addDays(10),
      text: "Event 1",
      resource: "R3",
      backColor: "#b2e0c9",
      borderColor: "#8cc9a6",
      fontColor: "#333"
    }
  ];
  config.events = events;
};

const 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" },
    { name: "Resource 9", id: "R9" },
  ];
  config.resources = resources;
};

onMounted(() => {
  loadResources();
  loadEvents();
  schedulerRef.value?.control.message("Welcome!");
});
</script>

<style>
.scheduler_default_event,
.scheduler_default_event_inner {
  border-radius: 20px;
}

body .scheduler_default_event_inner {
  padding-left: 10px;
}
</style>

<style scoped>
.buttons {
  margin-bottom: 10px;
  display: inline-flex;
}

.buttons button {
  background-color: #3c78d8;
  color: white;
  border: 0;
  padding: .5rem 1rem;
  width: 80px;
  cursor: pointer;
  margin-right: 1px;
  transition: all 0.2s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  box-sizing: border-box;
}

.buttons button:last-child {
  margin-right: 0;
}

.buttons button.selected {
  background-color: #1c4587;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
}

.buttons button:first-child {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.buttons button:last-child {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.buttons button:hover {
  background-color: #2f66c4;
  box-shadow: 0 5px 7px rgba(0,0,0,0.1);
}

.buttons button:active {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

Ask a Question