Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at how the best packages for adding calendars, overlays, and handle local storage.
vue-fullcalendar
vue-fullcalendar provides us with a simple calendar component to display events.
To use it, first we install it by running:
npm i vue-fullcalendar
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import fullCalendar from "vue-fullcalendar";
Vue.component("full-calendar", fullCalendar);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<full-calendar :events="fcEvents" lang="en"></full-calendar>
</div>
</template>
<script>
const fcEvents = [
{
title: "eat",
start: "2020-05-25",
end: "2020-05-27"
}
];
export default {
data() {
return {
fcEvents
};
}
};
</script>
We register the component. Then we used it in our App component.
full-calendar takes an events prop that takes an array of objects.
The objects have the title , start , and end properties.
title is the event title.
start is the start date string. end is the end date string.
It emits events when the month is changed and an event is clicked.
v-calendar
v-calendar is another calendar component.
To install it, we run:
npm i v-calendar
Now we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import Calendar from "v-calendar/lib/components/calendar.umd";
import DatePicker from "v-calendar/lib/components/date-picker.umd";
Vue.component("calendar", Calendar);
Vue.component("date-picker", DatePicker);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
<date-picker :mode="mode" v-model="selectedDate"/>
</div>
</template>
<script>
export default {
data() {
return {
mode: "single",
selectedDate: null
};
}
};
</script>
to add a date picker.
Also, we can write:
<template>
<div id="app">
<calendar></calendar>
</div>
</template>
<script>
export default {};
</script>
to add a calendar.
VueLocalStorage
VueLocalStorage is a Vue plugin that lets us handle local storage in Vue apps.
To install it, we run:
npm i vue-localstorage
Then we can use it by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueLocalStorage from "vue-localstorage";
Vue.use(VueLocalStorage);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">
</div>
</template>
<script>
export default {
mounted() {
this.$localStorage.set('foo', 'bar')
}
};
</script>
We register the plugin.
Then we can manipulate the local storage with the this.$localStorage property.
We can call get to get a value:
this.$localStorage.get('foo')
To remove an entry, we call remove :
this.$localStorage.remove('foo')
vue-loading-overlay
vue-loading-overlay provides us with an overlay that displays when something loads.
To install it, we run:
npm i vue-loading-overlay
Then we can use it by writing:
<template>
<div>
<loading active can-cancel :on-cancel="onCancel" is-full-page></loading>
</div>
</template>
<script>
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";
export default {
components: {
Loading
},
methods: {
onCancel() {}
}
};
</script>
We use the loading component to add an overlay to show when data is loading.
active is a prop that’s set to true if we want to show the overlay.
can-cancel makes the overlay cancelable.
Then when we cancel the onCancel method is called because we set that as the value of the on-cancel prop.
We can also use it as a plugin.
For instance, we can write:
main.js
import Vue from "vue";
import App from "./App.vue";
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";
Vue.use(Loading);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");
App.vue
<template>
<div ref="container"></div>
</template>
<script>
export default {
mounted() {
this.$loading.show({
container: this.$refs.container,
canCancel: true,
onCancel: this.onCancel
});
},
methods: {
onCancel() {}
}
};
</script>
We access the this.$loading.show method to show the overlay.
The container property has is set to the ref of the container we want the overlay to be in so that it’ll be rendered.
onCancel has the method to call when it’s canceled.
Conclusion
vue-fullcalendar is a calendar and date picker component.
vue-loading-overlay is an overlay component that’s used when we load data.
VueLocalStorage is a plugin for handling local storage in Vue apps.
