In last week's post, we went over how to add a JavaScript calendar to your app. This week, we are going to go over how to add a calendar to your Vue.js app, while using the Vue CLI.
The first step is to install Vue CLI and create the app. (We have done this once before if you wanted to see a deeper dive into the process.) If you navigate into the folder from your terminal and run npm run serve, you should then be able open http://localhost:8080/ in a web browser and see the Vue CLI "hello world" app.
Next, to install the FullCalendar plugins, you can run npm install --save @fullcalendar/vue3 @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid. After that, you should be able to build out your calendar component like so:
<script>
import '@fullcalendar/core/vdom' // solves problem with Vite
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
components: {
FullCalendar // make the <FullCalendar> tag available
},
data() {
return {
calendarOptions: {
plugins: [ dayGridPlugin, timeGridPlugin, interactionPlugin ],
initialView: 'dayGridMonth',
// Don't show the weekends
weekends: false,
// Define the header for the calendar
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
// Define Event Data
events: 'https://gist.githubusercontent.com/steinbring/80157cc5866de53c8cd975a1673f4425/raw/72d8dfb2880b76ffbd7bb8a48f3803aab3b804ba/events.json'
}
}
}
}
</script>
<template>
<FullCalendar :options="calendarOptions" />
</template>
You might remember last time, we built out a calendar that gets its data from a mock JSON api that we created. This demo should use the same header layout, use the same defaults, and (most importantly) use that same mock API. I created a github repo showing how to do this as well as a demo site, so that you can see the end-result. The demo URL is hosted on Render, like my previous examples.
steinbring
/
vue-calendar-demo
An example of how to use FullCalendar with a vue app
vue-calendar-demo
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Customize configuration
The next step in this journey is to show how to replace that mock api with a real one. Stay tuned for that. Until then, feel free to drop a comment if you have any question, comments, etc.
Top comments (0)