Vue Packages – Calendars, Local Storage and Overlays

Vue.js can be easily used to develop interactive user interface applications. In this article, we’ll look at how best packages for adding calendars, overlays, and handling local storage.

1. vue-fullcalendar

vue-fullcalendar provides us with a simple calendar component to display the events.

To use it, we first install it by running:

Then we use it by writing the following:

main.js

App.vue

We subscribe to the component. Then use it in the App component.

full-calendar takes an events prop, which is an array of objects.

Objects have title , start and end properties.

title is the title of the event.

start is the start date string. end is the end date string.

It generates events when the month is changed and a clicked event.

2.v-calendar

v-calendar is another calendar component. To install, run the command:

Now using it, we write the following code:

main.js

App.vue

to add a date picker

to add a calendar:

3. VueLocalStorage

VueLocalStorage is a Vue plugin that handles local storage in the Vue app.

To install, run the command:

Then, to use it, we write code like this: main.js

App.vue

We sign up for the plugin.

Then we can manipulate the local storage with the this.$localStorage .

We can call get to get a value:

To delete an entry, we call remove :

4. vue-loading-overlay

vue-loading-overlay gives us an overlay to show when something is loaded.

To install, run the command:

Then, to use it, write the following code:

We use the loading component to add an overlay to display when the data is loaded.

active is a prop that is set to true if you want to display an overlay.

can-cancel causes the overlay to be canceled.

Then when we cancel the onCancel method is called, because we set it as the value of on-cancel prop.

We can use it as a plugin.

For example, we could write:

main.js

App.vue

We call this.$loading.show to render the overlay.

The container property is set to the ref (reference) of the container we want to overlay on.

onCancel has a method to call when it’s destroyed.

5. Conclusion

vue-fullcalendar is a calendar and date selector component.

vue-loading-overlay is an overlay component used when loading data.

VueLocalStorage is a plugin to handle local storage in the Vue app.