How to add a JavaScript calendar to your Vue.js app
Tags: javascript, fullcalendar, vue
Published: 2022-06-28 12:51:45

In last week's post, we went over [how to add a JavaScript calendar to your app](https://dev.to/steinbring/how-to-add-a-javascript-calendar-to-your-app-59oo).  This week, we are going to go over how to add a calendar to your [Vue.js](https://blog.jws.app/tag/vue-js/) app, while using the [Vue CLI](https://blog.jws.app/tag/vue-cli/).

The first step is to [install Vue CLI](https://cli.vuejs.org/guide/installation.html) and [create the app](https://cli.vuejs.org/guide/creating-a-project.html).  (We have [done this once before](https://blog.jws.app/2021/playing-with-the-vue-cli-and-webpack/) 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/](http://localhost:8080/) in a web browser and see the Vue CLI "hello world" app.

Next, to install the [FullCalendar plugins](https://fullcalendar.io/docs/vue), 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:

```javascript
<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](https://codepen.io/steinbring/pen/qBxJrQj) that gets its data from a [mock JSON api](https://gist.githubusercontent.com/steinbring/80157cc5866de53c8cd975a1673f4425/raw/72d8dfb2880b76ffbd7bb8a48f3803aab3b804ba/events.json) 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](https://github.com/steinbring/vue-calendar-demo) as well as [a demo site, so that you can see the end-result](https://vue-calendar-demo.jws.app/).  The demo URL is hosted on [Render](https://render.com/), [like my previous examples](https://blog.jws.app/tag/render/).

{% github https://github.com/steinbring/vue-calendar-demo %}

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.