Using template to render week events trigger twice or multiple times

[twistmala]

Bug related to https://github.com/quasarframework/quasar-ui-qcalendar/issues/18.

I think this is still a big problem. Maybe it's just not explained properly.

Describe the bug I use basic code to display the month calendar and I noticed that the template for slot #week is rendered several times. I have tried several codes to display the basic calendar and all of them have the same issue.

I also set console.log() in other functions to look for a point that might be querying the render calendar template. No other function is executed multiple times!

At the beginning when the component is displayed on the screen, console.log(...) is printed 2x. If the calendar is moved forward or backward (goToNext/PreviousMonth), console.log(...) is printed 3x. If we perform window resize, console.log(...) is printed 50x, 100x, ...

If we have a lot of data that we want to put on the calendar, this will put a lot of load on the application!

I have not tested other views yet (day, week, agenda...).

Codes:

<q-calendar
        ref="calendar"
        :locale="locale"
        v-model="date"
        now="date"
        mode="month"
>
       <template #week="{ scope: { week, weekdays } }">
              {{console.log('This is rendered twice!')}}
        </template>
</q-calendar>

<q-calendar-month
        ref="calendar"
        :locale="locale"
        v-model="date"
        now="date"
>
       <template #week="{ scope: { week, weekdays } }">
              {{console.log('This is rendered twice!')}}
        </template>
</q-calendar-month>

<QCalendarMonth
        ref="calendar"
        :locale="locale"
        v-model="date"
        now="date"
>
       <template #week="{ scope: { week, weekdays } }">
              {{console.log('This is rendered twice!')}}
        </template>
</QCalendarMonth>

The same issue is with Scheduler. Code:

<q-calendar-scheduler
      ref="scheduler"
      v-model="date"
      v-model:model-resources="resources"
      view="week"
>
      <template #resource-days="{ scope }">
              {{console.log('This is rendered twice!')}}
       </template>
</q-calendar-scheduler>

Expected behavior I would expect the template to be executed only once. With window resize I expect that there is no rendering of the template.

Desktop (please complete the following information):

• OS: Windows 10 64-bit
• Browser: Chrome
• Quasar: 2.14.2
• @quasar/app-vite: 1.7.3
• @quasar/quasar-ui-qcalendar: 4.0.0-beta.19
• vue: 3.4.15
• vue-router: 4.2.5
• node: 18.17.1

[twistmala]

Inside the code I noticed that QResizeObserver is set for each calendar type. This causes the components to be rerendered a lot of times. Is this component really necessary?

[julianpung]

This is really important. Rendering twice becomes a real problem when you have to calculate lots of content cards and calculate their positions and sizes.