Use computed array for events-array property?

[topvis]

<calendar-month :event-array="eventsForCalendar"/>

Is it possible to use a computed array for the "event-array" property of calendar-month component?

[sirbeagle]

I haven't tried but I would think it would work. The one thing you'd have to be careful of is that if the computed array changes then the calendar component will have to do it's own recalculation.

If you look at one of the main components (Calendar.vue let's say) you'll see that we have watches for the variables eventArray and parsedEvents. The parsedEvents is created from the eventArray and is used to do all the rendering calculations. If you're calculated array can successfully be parsed by the calendar into parsedEvents then I think you're in good shape.

[topvis]

@sirbeagle Thanks for the response. I did a test with computed array but it didn't work. What I did is as follows: I copied the eventArrayfrom the quasar-calendar example link and put it in my Vue component data. Then I created a computed value eventsForCalendarand pass it to the <calendar-month> component:

<calendar-month :event-array="eventsForCalendar"/>

computed: {
    eventsForCalendar: function () {
      return this.eventArray
                 .filter(e=>e.start.date!=null)
                 .map( e => ({
                    id: e.id,
                    summary: e.summary,
                    description: e.description,
                    start: {
                      date: e.start.date
                    },
                    end: {
                      date: e.end.date
                    },
                  }))
      },
}

Note I filed the eventArray to keep only the multi-day events because I think that's where I have the issue. The calendar component can show the events. But when I click on any of the event in the calendar, Chrome console gave this error message:

vue.runtime.esm.js?2b0e:587 [Vue warn]: You may have an infinite update loop in a component render function.

found in
---> <CalendarMonth> at node_modules\quasar-calendar\src\components\calendar\CalendarMonth.vue
       <QTabPane>
         <QTabs>
           <QPage>
             <QPageContainer>
               <QLayout>
                 <CalendarMain> at src\pages\calendar\calendar.vue
                   <LayoutDefault> at src\layouts\default.vue
                     <Root>

I guess the issue is probably that quasar-calendar tries to mutate the event-array passed to it. If event-array is a computed array it causes some conflict.