Solving problem of loading with fullcalendar

I'm using fullcalendar into tabs of ngzorro, but I have an problem where if calendar is charged before the tab, fullcalendar does not take the correct size until I resize the window, so for it I need to charge fullcalendar only when I make a click in the second tab that is where I'm using fullcalendar, this is my code:

My HTML:

<div class="card-container">
    <nz-tabset (nzSelectChange)="mFunction2($event)" nzType="card">
      <nz-tab [nzTitle]="titleTemplateTaskToday">
        <ng-template #titleTemplateTaskToday>
          <i nz-icon nzType="unordered-list"></i>
          Pendientes para hoy
        </ng-template>
        <app-task></app-task>
      </nz-tab>
        <nz-tab [nzTitle]="titleTemplateCalendar">
          <ng-template #titleTemplateCalendar>
            <i nz-icon nzType="calendar"></i>
          </ng-template>
<full-calendar *ngIf="calendarOptions"  [options]="calendarOptions" ></full-calendar>
        </nz-tab>
        <nz-tab [nzTitle]="titleTemplate">
          <ng-template #titleTemplate>
            <i nz-icon nzType="unordered-list"></i>
            Tareas
          </ng-template>
          <!-- start drag & drop -->
    
    
          <div class="row">
              <div class="col-4">
                <h2>To do</h2>
          
                <div
                  cdkDropList
                  #todoList="cdkDropList"
                  [cdkDropListData]="todo"
                  [cdkDropListConnectedTo]="[doneList,processList]"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                >
                <nz-card class="m-1" id="todo" *ngFor="let item of todo" cdkDrag>
                    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="item" nzDescription="This is the description"></nz-card-meta>
                </nz-card>
                <ng-template #avatarTemplate>
                    <nz-avatar nzText="CP" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
                </ng-template>
                  <!-- <div id="todo" class="example-box" *ngFor="let item of todo" cdkDrag>
                    
                  </div> -->
                </div>
              </div>

              <div class="col-4">
                <h2>Done</h2>
                <div
                  cdkDropList
                  #doneList="cdkDropList"
                  [cdkDropListData]="done"
                  [cdkDropListConnectedTo]="[todoList,processList]"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                >
                  <!-- <div id="done" class="example-box" *ngFor="let item of done" cdkDrag>
                    
                  </div> -->
                <nz-card class="m-1" id="done" *ngFor="let item of done" cdkDrag>
                    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="item" nzDescription="This is the description"></nz-card-meta>
                </nz-card>
                <!-- <ng-template #avatarTemplate>
                    <nz-avatar nzText="CP" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
                </ng-template> -->
                </div>
              </div>

              <div class="col-4">
                <h2>Process</h2>
                <div
                  id="containerProcess"
                  cdkDropList
                  #processList="cdkDropList"
                  [cdkDropListData]="process"
                  [cdkDropListConnectedTo]="[todoList,doneList]"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                >
                  <!-- <div id="process" class="example-box" *ngFor="let item of process" cdkDrag>
                    
                  </div> -->
                  <nz-card class="m-1" id="process" *ngFor="let item of process" cdkDrag>
                    <nz-card-meta [nzAvatar]="avatarTemplate" [nzTitle]="item" nzDescription="This is the description"></nz-card-meta>
                </nz-card>
                <!-- <ng-template #avatarTemplate>
                    <nz-avatar nzText="CP" style="color:#f56a00; background-color:#fde3cf;"></nz-avatar>
                </ng-template> -->
                </div>
              </div>
          </div>
          
          <!-- end drag & drop -->
        </nz-tab>
    </nz-tabset>
</div>

My TS:

 calendarOptions: CalendarOptions;


    mFunction2(e: {index: number, tab: NzTabComponent}){
      if ( e.index === 1 ){
        return this.calendar;
      }
    }

 async calendar() {
       this.calendarOptions = {
        initialView: 'dayGridMonth',
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, resourceTimelinePlugin],
        headerToolbar: {
          left: '',
          center: 'title',
          right: 'prev,next,today,dayGridMonth,resourceTimeline,listMonth'
        },
        titleFormat: { month: 'long' }    ,
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
        locale: esLocale,
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        dayHeaders: true,
        selectMirror: true,
        editable: true,
        // weekends: false,
        events: [{ title: 'event 1', date: '2021-02-19' },
        { title: 'event 2', date: '2019-04-02' }
        ]
      };
    }

So summarizing: I need: charge fullcalendar only when I make a click in the tab where is placed fullcalendar. My problem: The code I'd write does not work

from Recent Questions - Stack Overflow https://ift.tt/3kdUsk8
https://ift.tt/eA8V8J