我在我的 Ionic 6 Angular 16 应用程序中安装了 FullCalendar,基于 https://fullcalendar.io/docs/angular,一步一步,并且在浏览器(chrome)上没有显示任何内容。
在检查器工具中显示 FullCalendar 标签,但为空。
¿我错过了什么?我之前在另一个应用程序中使用过它并且运行良好。
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HttpHeaders } from '@angular/common/http';
import { ComponentsModule } from './components/components.module';
import { FullCalendarModule } from '@fullcalendar/angular';
@NgModule({
declarations: [AppComponent ],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule, ComponentsModule, FullCalendarModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
日历.page.ts:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CalendarOptions } from '@fullcalendar/core'; // useful for typechecking
import dayGridPlugin from '@fullcalendar/daygrid';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.page.html',
styleUrls: ['./calendar.page.scss'],
})
export class CalendarPage implements OnInit {
post:any;
i:number=0;
calendarOptions: CalendarOptions = {
initialView: 'dayGridMonth',
plugins: [dayGridPlugin]
};
constructor(private http: HttpClient) { }
ngOnInit() {
}
}
日历.page.html:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>calendar</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-breadcrumbs>
<ion-breadcrumb>Panel</ion-breadcrumb>
<ion-breadcrumb>Calendario</ion-breadcrumb>
</ion-breadcrumbs>
<full-calendar [options]="calendarOptions"></full-calendar>
</ion-content>
¡解决了!!显然,在 Angular 16v 中,FullCalendarModule 位于 component.module.ts 中,这与 API (app.module.ts) 中的内容相反。