Vue js 2 Tutorial- How To Create Calendar Component In Vue Example

How To Create Calendar Component In Vue js 2 Example

In this Vue js 2 tutorial, we will get to know how to create a Calendar Component in the Vue js application. Even a novice can easily integrate this feature in his Vue js app by following these simple steps and we will be using the special vue-bootstrap-datetimepicker package.

The bootstrap date and time picker not only allows us to integrate the calendar component in our Vue js app but also allows us to pick or select a date and time together. Hence, it’s not a standard package.

 

So, we can easily manage to create an event, make bookings or do any planning in respect of a future event. In that, this calendar widget helps us a lot.

 

How To Implement The Calendar Widget In Vue Js App

Step 1- Install Vue CLI + Vue 2 App

Step 2- Install Vue Bootstrap Date Time Picker Package

Step 3- Create And Register Calendar Component

Step 4- Create Calendar Widget In Vue

Step 5- Start The Application

Step 1- Install Vue CLI+Vue 2 App

The very basic step for starting with the implementation is just to install Vue CLI. We will be creating a new Vue app using the below command:

npm install -g @vue/cli
vue create vue-calendar-app
cd vue-calendar-app

 

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 the above error for invoking the app, do remember to update the “scripts”: [] array in the 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"
},

 

Step 2- Install Vue Bootstrap Date And Time Picker Package

Further, we have to install the bootstrap library in Vue. We will invoke the installation of Vue bootstrap DateTime Picker plugin.

So, we open the terminal and install these packages with the help of the following commands:

npm install vue bootstrap
npm i vue-bootstrap-datetimepicker

 

Afterward, we need to register these packages by updating 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')

 

Step 3- Create + Register Calendar Component

Here, we will create a new component named components/CalendarWidget.vue to handle the vue calendar feature.

Then, we will update src/App.vue file:

<template>
  <div>
    <CalendarWidget />
  </div>
</template>
<script>
  import CalendarWidget from './components/CalendarWidget.vue'
  export default {
    name: 'App',
    components: {
      CalendarWidget
    }
  }
</script>
<style scoped>
 .container {
     max-width: 500px;
 }
</style>

 

Step 4- Create Calendar Widget In Vue

The b-calendar directive is required to be added to 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.

Further, we will update the 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>

 

Step 5- Start The App

We have to use this npm command in order to start the Vue app:

npm run serve

 

Conclusion

So, friends, we have how to add the simple calendar widget in our Vue app. We can also add the time picker feature in Vue in this manner.

 

Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *