How to Create Calendar Component in Vue Js 2

Last Updated on March 4, 2024 by Digamber in Vue JS

This is a step-by-step vue calendar component example; in this tutorial, we will tell you how to create a calendar component in the vue js application from scratch using the special vue-bootstrap-datetimepicker package.

The vue bootstrap date and time picker is not a standard package, and it allows you to integrate the calendar component in the vue js app and simultaneously allows you to pick or select date and time together.

The calendar widget helps select the date and time, especially when you need to create an event, make bookings, or anything where you need to plan for the future.

Let us start implementing the calendar widget in vue.

Install Vue CLI + Vue 2 App

If you are new to vue, then this step is for you; you can install vue cli, create a new vue application with the help of the following commands.

npm install -g @vue/cli

vue create vue-calendar-app

cd vue-calendar-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

Error: digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

To remove above error for invoking the app, make sure to update the "scripts": [] array in package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

Install Vue Bootstrap Date Time Picker Package

Next, install the bootstrap library in vue, similarly invoke the installation of vue bootstrap DateTime picker plugin.

You may use the given commands, open your terminal and start installing these packages.

npm install vue bootstrap

npm i vue-bootstrap-datetimepicker

After which register all the packages globally, update the src/main.js file.

import Vue from 'vue';
import App from './App.vue';

import datePicker from 'vue-bootstrap-datetimepicker';
Vue.use(datePicker);

new Vue({
  render: h => h(App)
}).$mount('#app')

Create + Register Calendar Component

Organized code in terms of small chunks is valuable when it comes to handle large size application, components are the ultimate elixir to help us in managing code.

Likewise, create a new component (components/CalendarWidget.vue) to handle vue calendar feature.

Update src/App.vue file.

<template>
  <div class="calendar-rel-pos">
    <CalendarWidget />
  </div>
</template>
<script>
import CalendarWidget from './components/CalendarWidget.vue'
export default {
  name: 'App',
  components: {
    CalendarWidget
  }
}
</script>
<style scoped>
.calendar-rel-pos {
  position: relative;
}

.container {
  max-width: 500px;
}
</style>

Create Calendar Widget in Vue

The b-calendar directive is required to be added in the vue template, it shows the calendar widget in the Vue app.

It takes the v-model=”” property to add the two-way data binding mechanism, whereas the config property allows customization of the calendar component.

Update code in components/CalendarWidget.vue file.

<template>
  <div class="container mt-5">
    <div class="row">
      <div>
        <h2 class="mb-3 text-center">Vue Js Simple Calendar Example</h2>
        <date-picker v-model="date" :config="options"></date-picker>
      </div>
    </div>
  </div>
</template>
 
<script>
import datePicker from 'vue-bootstrap-datetimepicker';
import 'bootstrap/dist/css/bootstrap.css';
import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';

export default {
  data() {
    return {
      date: new Date(),
      options: {
        format: 'DD/MM/YYYY',
        useCurrent: false
      }
    }
  },
  components: {
    datePicker
  }
}
</script>

Start Application

To start the vue app, use the npm run serve command, similarly to view the app use the provided url only if you are adding a calendar to vue locally.

npm run serve

http://localhost:8080

Conclusion

That is how we can add the simple calendar widget in vue, and we showed you the basic and simple approach to integrate a calendar widget in vue; you can also add the time picker in vue using this documentation.

Reference: https://www.npmjs.com/package/vue-bootstrap-datetimepicker