FullCalendar doesn't show on Angular 16

Question

I installed FullCalendar in my Ionic 6 Angular 16 app, based on https://fullcalendar.io/docs/angular, step by step, and doesn't show anything on browser (chrome).

In Inspector tool shows the FullCalendar tag, but is empty.

¿I'm missing something? I used it in another app before and works perfectly.

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 {}

calendar.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() {
   
  }

}

calendar.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>

And you've used this _exact_ code in another application successfully, you say? Or was there any difference? — ADyson, Aug 25 '23 at 09:21
Yes, with more parameters and functions in fact, but the base is the same. Maybe the only difference was the Angular version (15 in the other app). But I don't see anything in the API for this issue... — Violeta Quintanilla, Aug 29 '23 at 08:27
The only thing I can suggest then is to start with the _exact_ code and environment you had in the other application, and alter one thing at a time until you start to have an issue. Then you'll know more accurately where the problem comes from. — ADyson, Aug 29 '23 at 08:32
Ok, I think the issue is in the FullCalendar css styles, they are not working. ¿Is there a way to force it? — Violeta Quintanilla, Aug 30 '23 at 11:13
What makes you say that? It depends what you mean by "not working"? If only the CSS was failing to load, I'd expect you'd see at least the bare calendar (resulting from the rendered HTML) but with the layout incorrect. But from your screenshot, it looks like there is no calendar-related HTML within the full-calendar tag at all, which suggests the calendar is not being bound to that element properly. — ADyson, Aug 30 '23 at 11:18
Also I'm not familiar with Angular really, but should the element inspector really show those tags directly? I always thought angular took those items of markup and transformed them into more standard HTML? Are you sure _any_ of the angular code is running properly in this environment? e.g. have you tried getting anything else related to Angular to run on the same page? — ADyson, Aug 30 '23 at 11:18
Yes, I did a query using the Angular HTTP and works perfectly. The app has more than 15 pages and components and all is working in web and Android environement, except the FullCalendar. — Violeta Quintanilla, Aug 31 '23 at 07:26
Hm. As I say I'm not familiar with Angular specifically, I only know vanilla fullCalendar. But in case Angular 16 is an issue, here's fullCalendar's Angular 16 example code: https://github.com/fullcalendar/fullcalendar-examples/tree/main/angular16 . Maybe you can spot some important difference there from your code, or something like that. Sorry I can't help much more. — ADyson, Aug 31 '23 at 07:34
¡¡SOLVED!! apparently, in 16v of Angular, the FullCalendarModule goes in the component.module.ts, contrary to what says in API (app.module.ts). — Violeta Quintanilla, Aug 31 '23 at 07:54
Glad you solved it! Please add an Answer below so that others who are enountering a similar issue can search and find it (see also [answer]). If you only post the solution in a comment, it cannot be searched (and you cannot get votes for it!). Thanks :-) — ADyson, Aug 31 '23 at 08:06

score 1 · Answer 1 · edited Aug 31 '23 at 11:22

1

Apparently, in v16 of Angular, the FullCalendarModule goes in the component.module.ts, contrary to what says in API (app.module.ts).

edited Aug 31 '23 at 11:22

JSON Derulo

9,780
7
39
56

answered Aug 31 '23 at 11:17

Violeta Quintanilla

41
6

FullCalendar doesn't show on Angular 16

1 Answers1