Add a Calendar into a Vue App with Vue2-Simple-Calendar

Spread the love

A calendar is something that is hard to create from scratch.

Therefore, there’re many calendar components created for Vue apps.

In this article, we’ll look at how to add a calendar with Vue2-Simple-Calendar.


We can install Vue2-Simple-Calendar by running:

npm install vue2-simple-calendar

with NPM or:

yarn add vue2-simple-calendar

Then we can use it by writing:


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

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

new Vue({
  render: (h) => h(App)


  <div id="app">

export default {
  name: "App",
  data() {
    return {
      events: [
          title: "event",
          start: new Date(),
          end: new Date(),
      disabledDays: {
        to: new Date(2020, 9, 5),
        from: new Date(2020, 11, 26),
      highlightDays: {
        days: [6, 0],
  methods: {
    showAll(events) {
      // Do something...
    dayClicked(day) {
      // Do something...
    eventClicked(event) {
      // Do something...
    monthChanged(start, end) {
      // Do something...
  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) => console.log(event));
    this.$calendar.eventBus.$on("month-changed", (start, end) =>
      console.log(start, end)


.vue-calendar {
  display: grid;
  grid-template-rows: 10% 90%;
  background: #fff;
  margin: 0 auto;
.calendar-header {
  align-items: center;
.header-right {
  flex: 1;
.header-center {
  flex: 3;
  text-align: center;
.title {
  margin: 0 5px;
.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;
} > .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);

We add the grid layout with the days-header and the week-row classes.

In main.js , we add the VueCalendar plugin so we can use it our components.

We need to import the calendar.css to apply the styles from the CSS styles.

In App.vue , we add the vue-calendar component to add the calendar.

show-limit has the max number of events shown in a day.

events has an array of events.

disable has days that we want to disable.

show-all event is emitted when the show more link is clicked.

day-clicked is emitted when a day is clicked.

event-clicked is emitted when an event is clicked.

month-changed is emitted when the month changed.


The Vue2-Simple-Calendar lets us add an event calendar easily into our Vue app.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *