Display data from an Api in the V-CALENDAR Vuetify Vuejs - vue.js

Question

I have the following data coming from my api:
[
{
"id": 1,
"start": "2020-12-24 01:00",
"end": "2020-12-24 01:30",
"comments": null,
"createdAt": "2020-12-24T19:37:52.699Z",
"updatedAt": "2020-12-24T19:37:52.699Z",
"clientId": 1,
"employeeId": null,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": null,
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 3,
"start": "2020-12-24 21:15",
"end": "2020-12-24 22:00",
"comments": null,
"createdAt": "2020-12-24T19:45:03.854Z",
"updatedAt": "2020-12-24T19:45:03.854Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 2,
"start": "2020-12-24 01:00",
"end": "2020-12-24 02:00",
"comments": null,
"createdAt": "2020-12-24T19:39:19.184Z",
"updatedAt": "2020-12-24T19:39:19.184Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 13,
"start": "2020-12-25 06:00",
"end": "2020-12-25 07:00",
"comments": "Fuck you",
"createdAt": "2020-12-25T16:24:10.893Z",
"updatedAt": "2020-12-25T16:24:10.893Z",
"clientId": 1,
"employeeId": 2,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Margareth",
"lastName": "Martins"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 14,
"start": "2020-12-25 01:00",
"end": "2020-12-25 06:00",
"comments": null,
"createdAt": "2020-12-25T22:08:40.878Z",
"updatedAt": "2020-12-25T22:08:40.878Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 15,
"start": "2020-12-26 08:30",
"end": "2020-12-26 09:00",
"comments": null,
"createdAt": "2020-12-25T22:52:31.439Z",
"updatedAt": "2020-12-25T22:52:31.439Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 10,
"start": "2020-12-23 09:00",
"end": "2020-12-23 09:30",
"comments": "é fodauuuuuuu",
"createdAt": "2020-12-25T15:12:20.790Z",
"updatedAt": "2020-12-25T15:12:20.790Z",
"clientId": 1,
"employeeId": null,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": null,
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 11,
"start": "2020-12-23 09:00",
"end": "2020-12-23 12:00",
"comments": "é fodauuuuuuu",
"createdAt": "2020-12-25T15:12:44.161Z",
"updatedAt": "2020-12-25T15:12:44.161Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 4,
"start": "2020-12-25 01:00",
"end": "2020-12-25 05:00",
"comments": null,
"createdAt": "2020-12-25T02:32:32.574Z",
"updatedAt": "2020-12-25T02:32:32.574Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 5,
"start": "2020-12-24 01:00",
"end": "2020-12-24 03:00",
"comments": "ghhhhhh",
"createdAt": "2020-12-25T02:36:52.243Z",
"updatedAt": "2020-12-25T02:36:52.243Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 6,
"start": "2020-12-25 01:15",
"end": "2020-12-25 02:00",
"comments": null,
"createdAt": "2020-12-25T02:38:22.711Z",
"updatedAt": "2020-12-25T02:38:22.711Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 7,
"start": "2020-12-25 00:15",
"end": "2020-12-25 03:00",
"comments": "treeeeee",
"createdAt": "2020-12-25T14:54:51.766Z",
"updatedAt": "2020-12-25T14:54:51.766Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 8,
"start": "2020-12-25 04:00",
"end": "2020-12-25 06:00",
"comments": null,
"createdAt": "2020-12-25T15:02:54.737Z",
"updatedAt": "2020-12-25T15:02:54.737Z",
"clientId": 1,
"employeeId": 1,
"serviceId": null,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
},
{
"id": 12,
"start": "2020-12-31 19:30",
"end": "2020-12-31 21:00",
"comments": "Agora foi",
"createdAt": "2020-12-25T15:25:40.233Z",
"updatedAt": "2020-12-25T15:25:40.233Z",
"clientId": 1,
"employeeId": 1,
"serviceId": 1,
"appointmentStatusId": null,
"tenantId": 1,
"employee": {
"firstName": "Aline",
"lastName": "Magalhães"
},
"client": {
"firstName": "Tamires",
"lastName": "Almeida"
}
}
]
I need to present only some of this data in the V-Calendar vuetify and according to its documentation it would be for example:
{
name: 'name'
start: '0000-00-00 00:00'
end: '0000-00-00 00:00'
}
To reach this structure I have the following code snippet in my .Vue:
created () {
this.initialize()
},
methods: {
initialize () {
// request Events
axios.get('http://192.168.15.11:3000/events')
.then((response) => {
this.events = response.data
for (const item of this.events) {
const name = item.client.firstName + ' ' + item.client.lastName
const start = item.start
const end = item.end
const items = { name, start, end }
this.events = this.items
console.log(items);
}
})
.catch((error) => {
console.log(error.response);
})
},
My console gives this feedback with the right format I need but in the calendar there is no event:
The V-Calendar excerpt:
<v-calendar
ref="calendar"
v-model="focus"
color="primary"
locale="pt-br"
:events="events"
:event-color="getEventColor"
:type="type"
#click:event="showEvent"
#click:more="viewDay"
#click:date="viewDay"
>
</v-calendar>
data: () => ({
events []
}),
Where can I be wrong, could someone help me?

Answer 1

Great work on providing a good context for your problem. V-calendar wants events to be an array, not a single object.
Maybe try something like this:
this.events = [];
axios.get('http://192.168.15.11:3000/events')
.then((response) => {
const events = response.data
for (const item of events) {
const name = item.client.firstName + ' ' + item.client.lastName
const start = item.start
const end = item.end
this.events.push({ name, start, end })
}
})