Adding a Simple Calendar to Our Vue App with vue2-event-calendar

Adding a calendar widget by hand is very painful.

Therefore, many calendar component libraries are created.

vue-event-calendar is one library.

In this article, we’ll look at how to add a calendar with the vue-event-calendar library.

Getting Started

We add our library by installing it with NPM.

To do that, we run:

npm i vue-event-calendar

Adding the Calendar

We can use the component by registering the plugin.

First, we register it by writing:

import Vue from "vue";
import App from "./App.vue";
import "vue-event-calendar/dist/style.css";
import vueEventCalendar from "vue-event-calendar";

Vue.use(vueEventCalendar, { locale: "en" });
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

We import the CSS and then register the plugin to make it available throughout our Vue app.

Also, we set the locale with the options.

Then in our component, we add:

<template>
  <vue-event-calendar :events="events"></vue-event-calendar>
</template>

<script>
export default {
  data() {
    return {
      events: [
        {
          date: "2020/09/12",
          title: "special event"
        },
        {
          date: "2020/09/15",
          title: "party",
          desc: "go to a party",
          customClass: "highlight"
        }
      ]
    };
  }
};
</script>

to show the calendar component with the events.

vue-event-calendar has the calendar.

events has the events that we want to display.

Once we click on the day, we see the events displayed.

The event template can be changed by populating the default slot.

For example, we can write:

<template>
  <vue-event-calendar :events="events">
    <template scope="props">
      <div :key="index" v-for="(event, index) in props.showEvents" class="event-item">{{event}}</div>
    </template>
  </vue-event-calendar>
</template>

<script>
export default {
  data() {
    return {
      events: [
        {
          date: "2020/09/12",
          title: "special event"
        },
        {
          date: "2020/09/15",
          title: "party",
          desc: "go to a party",
          customClass: "highlight"
        }
      ]
    };
  }
};
</script>

We loop through the prop.showEvents array to render the events.

It has the whole event object.

Component Events

The vue-event-calendar emits the day-changed and month-changed events when we navigate through the calendar.

For example, we can write:

<template>
  <vue-event-calendar
    :events="events"
    @day-changed="handleDayChanged"
    @month-changed="handleMonthChanged"
  ></vue-event-calendar>
</template>

<script>
export default {
  data() {
    return {
      events: [
        {
          date: "2020/09/12",
          title: "special event"
        },
        {
          date: "2020/09/15",
          title: "party",
          desc: "go to a party",
          customClass: "highlight"
        }
      ]
    };
  },
  methods: {
    handleDayChanged(ev) {
      console.log(ev);
    },
    handleMonthChanged(ev) {
      console.log(ev);
    }
  }
};
</script>

We listen to the events with our own methods.

The event object parameter for the handleDayChanged method has the date and the events array with the events for the day.

The event object parameter for the handleMonthChanged method has the month string in MM/YYYY format.

We can also navigate the months programmatically with a few methods.

this.$EventCalendar.nextMonth() goes to the next month.

this.$EventCalendar.preMonth() goes to the previous month.

this.$EventCalendar.toDate(‘2020/11/12’) goes to the given date.

Conclusion

vue-event-calendar is a very useful library for displaying a calendar with events in a Vue app.