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.
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:
main.js
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)
}).$mount("#app");
App.vue
<template>
<div id="app">
<vue-calendar
:show-limit="3"
:events="events"
:disable="disabledDays"
:highlight="highlightDays"
@show-all="showAll"
@day-clicked="dayClicked"
@event-clicked="eventClicked"
@month-changed="monthChanged"
></vue-calendar>
</div>
</template>
<script>
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)
);
},
};
</script>
/assets/calendar.css
.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);
}
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.
Conclusion
The Vue2-Simple-Calendar lets us add an event calendar easily into our Vue app.
