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.