Adding a Simple Calendar to Our Vue App with vue-simple-calendar

Adding a calendar widget by hand is very painful.

Therefore, many calendar component libraries are created.

vue-simple-calendar is one library.

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

Getting Started

We add our library by installing it with NPM.

To do that, we run:

npm i vue-simple-calendar

Add a Simple Calendar

We can add a simple calendar with the calendar-view component.

To add it, we write:

<template>
  <div id="app">
    <calendar-view
      :show-date="showDate"
      class="theme-default holiday-us-traditional holiday-us-official"
    >
      <calendar-view-header
        slot="header"
        slot-scope="t"
        :header-props="t.headerProps"
        @input="setShowDate"
      />
    </calendar-view>
  </div>
</template>
<script>
import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
import "vue-simple-calendar/static/css/default.css";
import "vue-simple-calendar/static/css/holidays-us.css";

export default {
  name: "app",
  data() {
    return { showDate: new Date() };
  },
  components: {
    CalendarView,
    CalendarViewHeader
  },
  methods: {
    setShowDate(d) {
      this.showDate = d;
    }
  }
};
</script>

We import the CSS and register the components within our component.

The showDate prop has the date object which controls the month to be shown.

The calendar-view-header component has the header that lets us navigate through the months.

When we choose a month on the header, the input event is emitted.

Adding Calendar Events

We can set the events prop to populate the calendar with events.

For example, we can write:

<template>
  <div id="app">
    <calendar-view
      :show-date="showDate"
      :events="events"
      class="theme-default holiday-us-traditional holiday-us-official"
      @click-date="onClickDate"
    >
      <calendar-view-header
        slot="header"
        slot-scope="t"
        :header-props="t.headerProps"
        @input="setShowDate"
      />
    </calendar-view>
  </div>
</template>
<script>
import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
import "vue-simple-calendar/static/css/default.css";
import "vue-simple-calendar/static/css/holidays-us.css";

export default {
  name: "app",
  data() {
    return {
      showDate: new Date(),
      events: [
        {
          id: 1,
          startDate: "2020-10-19",
          endDate: "2020-10-19",
          title: "Sample event 1"
        },
        {
          id: 2,
          startDate: "2020-10-06",
          endDate: "2020-10-13",
          title: "Sample event 2"
        }
      ]
    };
  },
  components: {
    CalendarView,
    CalendarViewHeader
  },
  methods: {
    setShowDate(d) {
      this.showDate = d;
    },
    onClickDate(...params) {
      console.log(params);
    }
  }
};
</script>

We have the events array which we set as the value of the events prop.

Each entry has the id with the unique ID.

startDate has the start date of the event.

endDate has the end date of the event.

title has the title of the event.

id and startDate are required.

title defaults to 'untitled' .

It also emits events that we can listen to.

For example, we can listen to the click-date event which has the date that we clicked on and the mouse events as parameters.

The events will be shown on the calendar.

Slots

vue-simple-calendar can be customized by populating various slots.

periodStart lets us customize the first date of the display period.

periodEnd lets us customize the last date of the display period.

displayLocale lets us show the locale setting for the calendar.

monthNames sets the month names.

There’re many more slots listed at https://github.com/richardtallent/vue-simple-calendar#slots.

Conclusion

vue-simple-calendar is a simple library for adding a calendar to our Vue app.