How to display data obtained from API with Vuetify's v-calendar
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
⇨ Click here for the table of contents for Vue articles
I wrote about how to display data obtained from an API with Vuetify's v-calendar.
Since Vuetify's official documentation does not specifically mention cases where data is obtained from an API, and it seemed a bit complicated, I have written it in a way that would be commonly encountered.
Environment
Vuetify:"^2.6.2"Conclusion
If you add the properties start, and end (which is not included in this case) to the events array, they will be displayed on the respective dates.
It may seem a bit complicated, but I hope you pay attention to the function part.
<template>
<v-calendar
ref="calendar"
v-model="value"
:weekdays="weekday"
:type="type"
:events="events"
:event-overlap-mode="mode"
:event-overlap-threshold="30"
@change="getEvents"
>
<template v-slot:event="{ event }">
<div>
You can freely put what you want to display on the calendar here
</div>
</template>
</v-calendar>
</template>
<script>
export default {
data() {
return {
value: "",
type: "month",
mode: "stack",
weekday: [0, 1, 2, 3, 4, 5, 6],
events: [],
users: [],
}
},
created() {
this.init()
},
methods: {
init() {
axios.get("api/users").then(({ data }) => {
this.users = data.users
this.getEvents()
})
},
getEvents() {
const events = []
for (var i = 0; i < this.users.length; i++) {
const first = new Date(this.users[i].created_at)
events.push({
name: this.users[i].name,
image_url: this.users[i].image_url,
start: first,
})
}
this.events = events
},
},
}
</script>Explanation
How to create data to display on the calendar
Loop through as many times as the number of users, and add data to the events array.
getEvents() {
const events = [];
for (var i = 0; i < this.users.length; i++) {
const first = new Date(this.users[i].created_at);
events.push({
name: this.users[i].name,
image_url: this.users[i].image_url,
start: first,
});
}
this.events = events;
},const first = new Date(this.users[i].created_at)You can specify the start and end for displaying the calendar in this time format.
Displaying on the calendar
The data to be displayed on the calendar will be shown in the "name" property, and other information to be displayed can be specified using props.
Please refer to the official documentation for what can be displayed with props.
If you only want to display the "name" property,
<v-calendar
ref="calendar"
v-model="value"
:weekdays="weekday"
:type="type"
:events="events"
:event-overlap-mode="mode"
:event-overlap-threshold="30"
@change="getEvents"
>
</v-calendar>is enough.
If you want to write freely inside the calendar,
<v-calendar
ref="calendar"
v-model="value"
:weekdays="weekday"
:type="type"
:events="events"
:event-overlap-mode="mode"
:event-overlap-threshold="30"
@change="getEvents"
>
<template v-slot:event="{ event }">
<div>{{event.name}}</div>
<img :src="event.image_url" />
</template>
</v-calendar>By slotting it this way, it's okay.
Reference
Summary
That's it for the Vuetify v-calendar article.
I hope it can be helpful for someone.
If you have any questions or find any mistakes, please contact me via Twitter DM.
