html - fullcalendar 仅在窗口调整大小后出现 | Angular

Question

我在我的元素中安装了 fullCalendar，但日历仅在调整屏幕大小时出现。

我在 home.module.ts 中添加了这段代码

import { FullCalendarModule } from '@fullcalendar/angular'; // the main connector. must go first
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
import interactionPlugin from '@fullcalendar/interaction'; // a plugin


FullCalendarModule.registerPlugins([ // register FullCalendar plugins
  dayGridPlugin,
  interactionPlugin
]);

@NgModule({
  imports: [
    ....
    FullCalendarModule, // for FullCalendar!
   ....


  ],

在 home.page.ts 我添加了以下代码

import { Calendar } from '@fullcalendar/core'; // include this line
import { CalendarOptions  } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
export class HomePage {

  calendar = Calendar;
  calendarVisible = false;

  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    // initialView: 'dayGridWeek'
  };

  constructor() {
    // const name = Calendar; // add this line in your constructor

  }

  ngOnInit() {
    this.calendarVisible = true;
  }

在此之后，我从那里添加了简单的 html 指南到 Angular 组件页面。

<ion-content class="ion-padding">
  <full-calendar *ngIf="calendarVisible" [options]="calendarOptions"></full-calendar>


</ion-content>

没有 css 的最低限度设置。

Answer 1

将它添加到 ionViewWillEnter 生命周期中对我有用。

calendarOptions: CalendarOptions;

ionViewWillEnter() {
    this.calendarOptions = {
      height: 'auto',
      headerToolbar: {
          left: 'prev,next',
          center: 'title',
          right: 'dayGridMonth,listWeek'
      },
      
      initialView: 'dayGridMonth',
      initialDate: new Date(),
      
    };
  }