在 Vuetify Calendar 中使用嵌入的属性

Question

I'm trying to use the v-calendar component from Vuetify.

I saw in the documentation I can use the event-start prop if my events don't have the same attributes' names.

The problem is that my events have embedded attributes and I don't know if event-start handles this case.

My events :

events: [
      {
        id: 'b9d93291-6d95-47b9-994a-ee9f266fb6b8',
        type: 'reservation_item',
        attributes: {
          start_date: '2020-09-23T00:00:00.000Z',
          end_date: '2020-09-25T00:00:00.000Z',
        },
      },
    ]

The events example from vuetify :

events: [
      {
        name: 'Weekly Meeting',
        start: '2020-09-07 09:00',
        end: '2020-09-07 10:00',
      },
    ],

I tried to do something like that but it doesn't work.

<v-calendar
  ref="calendar"
  locale="fr-fr"
  :now="today"
  :value="today"
  :events="events"
  event-start="attributes.start"
  color="primary"
  type="month"
></v-calendar>

Answer 1

After spelunking the source code for the vuetify plugin , the latter expects that the value be present in the event object, as a direct property. So you cannot acces other nested "children", it has to be a direct property.

There are two alternatives to make this work:

1- map your events array by moving the properties inside attributes to the root of your object then pass this prop to v-calendar : event-start="startDate"

2- Create a javascript class (MyEvent) with a fromJson method that take the raw JSON from your API ( this way you encapsulate the JSON into domain objects) and return an array of MyEvent instances. this way you can do for example : events[0].start and you don't even have to pass it as a value to the event-start prop, since by default it expects a start attribute as a default value.

Another advantage of this alternative, is that since the event is now encapsulated into its own javascript class, you can add helper methods, or getters/setter or any logic that would otherwise be inside your "view" logic, and contribute to have a better separation of concerns.

Answer 2

To make this works, I had to change my events data

    <template>
      <v-calendar
        ref="calendar"
        locale="fr-fr"
        :events="myEvents"
        event-start="start"
        color="primary"
        type="month"
      ></v-calendar>
    </template>

  data: () => ({
    events: [
      {
        id: 'b9d93291-6d95-47b9-994a-ee9f266fb6b8',
        type: 'reservation_item',
        attributes: {
          start_date: '2020-09-23T00:00:00.000Z',
          end_date: '2020-09-25T00:00:00.000Z',
        },
      },
    ],
  }),
  computed: {
    myEvents() {
      const reservations = this.reservations
      reservations.forEach((element) => {
        element.start = element.attributes.start_date
        element.name = 'test'
        element.end = element.attributes.end_date
      })

      return reservations
    },
  }