Display data from an Api in the V-CALENDAR Vuetify Vuejs
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?
Solution
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 })
}
})
- Vue direct URL is not working, only router-link click
- vue-router, nginx and direct link
- How to mock composable with vitest?
- POST http://127.0.0.1:8000/admin/sparepart 404 (Not Found) when i try to Inertia.post('/admin/sparepart', formData)
- Nuxt 3 Supabase - 500 auth Session missing
- Vue.js: Run a method after a delay, but reset the delay if user input happens
- Get element height with Vuejs
- How to add a script block to head in Nuxt 3?
- How do I use /deep/ or >>> or ::v-deep in Vue.js?
- Vue 3: Error on creation "Expected identifier but found 'import'"
- vite failed to load config from vite.config.js,
- How to use components in v-html
- How to get the vue-progressbar to display?
- Vue JS: How to prevent Input updating itself on livedata?
- How to set and change ( title of page ) in inertiajs and vue3
- How to import jQuery into $ in a Vue.js 3 / Vite application
- Redirecting of HTTP request on Vite-Vue app - DEV mode
- Vue | Module has no default export
- Vue.js iterate complex object by data key
- QR Code Generator Not Working as Expected
- Generate PDF with puppeteer without save it
- PrimeVue InputNumber's width exceeds the width of its parent
- CORS - Response to preflight request doesn't pass access control check: It does not have HTTP ok status
- Vue 3 - "Failed to resolve component" with global components
- Emit model updating from keydown event in vue
- How check if Vue is in development mode?
- Black flash issue when toggle the visibility of symbol pin on azure map
- ENOLOCK npm ERR! Error while running npm audit fix
- Detect Back Button in Navigation Guards of Vue-Router
- vue.js when sorting grid only values is updated, not HTML