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

Adding a calendar widget by hand is very painful.

Therefore, many calendar component libraries are created.

vue2-simple-calendar is one library.

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

Getting Started

We add our library by installing it with NPM.

To do that, we run:

npm i vue2-simple-calendar

Using the Calendar Component

We can ad the calendar component by adding the CSS code.

Create a file called vue2-simple-calendar.css and add:

.vue-calendar {
  display: grid;
  grid-template-rows: 10% 90%;
  background: #fff;
  margin: 0 auto;
}
.calendar-header {
  align-items: center;
}
.header-left,
.header-right {
  flex: 1;
}
.header-center {
  flex: 3;
  text-align: center;
}
.title {
  margin: 0 5px;
}
.next-month,
.prev-month {
  cursor: pointer;
}
.calendar-body {
  display: grid;
  grid-template-rows: 5% 95%;
}
.days-header {
  display: grid;
  grid-auto-columns: 14.25%;
  grid-template-areas: "a a a a a a a";
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.days-body {
  display: grid;
  grid-template-rows: auto;
}
.day-number {
  text-align: right;
  margin-right: 10px;
}
.day-label {
  text-align: center;
  border-right: 1px solid #e0e0e0;
}
.week-row {
  display: grid;
  grid-template-areas: "a a a a a a a";
  grid-row-gap: 5px;
  grid-auto-columns: 14.25%;
  border-left: 1px solid #e0e0e0;
}
.week-day {
  padding: 4px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.week-day.disabled {
  background-color: #f5f5f5;
}
.week-day.not-current > .day-number {
  color: #c3c3c3;
}
.week-day.today > .day-number {
  font-weight: 700;
  color: red;
}
.events {
  font-size: 12px;
  cursor: pointer;
  padding: 0 0 0 4px;
}
.events .event {
  height: 18px;
  line-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 4px 2px 0;
  color: rgba(0, 0, 0, 0.87);
  background-color: #d4dcec;
}
.events .more-link {
  color: rgba(0, 0, 0, 0.38);
}

This is the same code like the example at https://codesandbox.io/s/93pjr734r4?file=/src/assets/vue2-simple-calendar.css:0-1549.

It doesn’t come with any styles, so we’ve to add them ourselves.

Then in main.js , we add:

import Vue from "vue";
import App from "./App.vue";
import vueCalendar from "vue2-simple-calendar";
import "./assets/vue2-simple-calendar.css";

Vue.use(vueCalendar, {});
Vue.config.productionTip = false;

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

to register the plugin.

Then in our component, we write:

<template>
  <vue-calendar
    :show-limit="3"
    :events="events"
    @show-all="showAll"
    @day-clicked="dayClicked"
    @event-clicked="eventClicked"
    @month-changed="monthChanged"
  ></vue-calendar>
</template>

<script>
export default {
  methods: {
    showAll(events) {
      console.log(events);
    },
    dayClicked(day) {
      console.log(day);
    },
    eventClicked(event) {
      console.log(event);
    },
    monthChanged(start, end) {
      console.log(start, end);
    },
    highlightDays(days) {
      console.log(days);
    }
  },
  created() {
    this.$calendar.eventBus.$on("show-all", events => this.showAll(events));
    this.$calendar.eventBus.$on("day-clicked", day => this.dayClicked(day));
    this.$calendar.eventBus.$on("event-clicked", event =>
      this.eventClicked(event)
    );
    this.$calendar.eventBus.$on("month-changed", (start, end) =>
      this.monthChanged(start, end)
    );
  }
};
</script>

The vue-calendar component renders the calendar.

It renders various events.

show-all is emitted when we show the days.

day-clicked is emitted when we click on a day.

event-clicked is emitted when we click on an event.

month-changed is emitted when we change the month on the calendar.

Conclusion

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