0
Hello, 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 learn only some of this data in V-Calendar vuetify and according to your documentation would be for example:
{
name: 'name'
start: '0000-00-00 00:00'
end: '0000-00-00 00:00'
}
To get to this structure I have the following piece of code 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 return with the right format I need but in the calendar no event appears :
The excerpt from the V-Calendar:
<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 I could be making a mistake, someone could help me?