FullCalendar can't display on a hiden TabView-> TabPanel

[voquanghoa]

Hello,

It took me a while to discover why the calendar display error on my application.

Then I found that the error happens if I put a full-calendar component inside a TabPanel of TabView (except the first one)

Here is the link https://codesandbox.io/s/serene-cherry-mjorg?file=/src/FullCalendarDemo.vue

This sandbox I cloned from your one ( https://codesandbox.io/s/z7ltg ) and only change the template

<template>
    <div>
        <FullCalendar :events="events" :options="options" />
    </div>
</template>

to

<template>
  <TabView>
      <TabPanel header="Calendar OK">
        <FullCalendar :events="events" :options="options" />
      </TabPanel>
      <TabPanel header="Calendar Error">
        <FullCalendar :events="events" :options="options" />
      </TabPanel>
    </TabView>
</template>

And the error happens

Could you take a look at this?

Thank you

[cagataycivici]

What is your PrimeVue version?

[voquanghoa]

Hello.

I used PrimeVue version 3.1.1 at the beginning and got the error. Then I upgraded it to the latest one 3.3.5, the issue still occurs.

The issue can be reproduced at the link https://codesandbox.io/s/serene-cherry-mjorg?file=/src/FullCalendarDemo.vue

The first calendar displays properly but the second one.

Thanks.

[cagataycivici]

With 3.5.0, enable lazy rendering to resolve this;

#1268