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 Vue-FullCalendar.
Installation
We can install the Vue-FullCalendar and its plugins with:
npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/interaction
@fullcalendar/vue has the Vue-FullCalendar plugin.
@fullcalendar/daygrid lets us show the day grid in the calendar.
And @fullcalendar/interaction lets us interact with the calendar.
Then we can add a calendar into our Vue component by writing:
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
},
};
},
};
</script>
The calendarOptions.plugins property lets us add plugins to add the addons we installed.
And the initialView is set to 'dayGridMonth' to let us show a monthly calendar with today’s date as the default date.
To add events to the calendar, we can add the calendarOptions.events property:
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
events: [
{ title: "event 1", date: "2020-12-01" },
{ title: "event 2", date: "2020-12-02" },
],
},
};
},
};
</script>
title has the event title and date has the event date.
And to listen to events like clicking on dates, we can add more properties.
To listen to date clicks, we add the dateClick property:
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
events: [
{ title: "event 1", date: "2020-12-01" },
{ title: "event 2", date: "2020-12-02" },
],
dateClick: this.onDateClick,
},
};
},
methods: {
onDateClick(arg) {
console.log(arg.dateStr);
},
},
};
</script>
We set it to the onDateClick event handler to run it when we click on a date.
And we can get the date string of the date that’s clicked with the dateStr property.
We can add other options like show or hide weekends.
To hide weekends, we can set the calendarOptions.weekends property to false :
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
events: [
{ title: "event 1", date: "2020-12-01" },
{ title: "event 2", date: "2020-12-02" },
],
weekends: false,
},
};
},
};
</script>
It also comes with some useful utilities like a formatDate function to format dates our way:
<template>
<FullCalendar :options="calendarOptions" />
</template>
<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { formatDate } from "@fullcalendar/vue";
const str = formatDate(new Date(), {
month: "long",
year: "numeric",
day: "numeric",
});
console.log(str);
export default {
components: {
FullCalendar,
},
data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: "dayGridMonth",
events: [
{ title: "event 1", date: "2020-12-01" },
{ title: "event 2", date: "2020-12-02" },
],
weekends: false,
},
};
},
};
</script>
Conclusion
We can add the Vue-FullCalendar library to add an event calendar easily into our Vue app.
