Angular 12 FullCalendar.io not showing on html

i follow this guide: https://fullcalendar.io/docs/angular

my code into component "calendar.component.ts" where i want show the fullcalendar:

  calendarOptions: CalendarOptions = {
    initialView: 'dayGridMonth'
  };

my code into html

<full-calendar  [options]="calendarOptions"></full-calendar>

my app.module.ts

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  timeGridPlugin,
  listPlugin,
  interactionPlugin
])

this is my imports app.module.ts, i've added this:

FullCalendarModule

so easy easy, but, when the fullcalendar.io doesn't showing.

enter image description here

as you can see the element is rendered, but not showing into the page...widht and height are 0x0 px. Zero console errors...nothing

My package json:

{
  "name": "calendario",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve ",
    "build": "ng build",
    "build-for-production": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-material-components/datetime-picker": "^6.0.3",
    "@angular/animations": "~10.2.0",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "~10.2.0",
    "@angular/compiler": "~10.2.0",
    "@angular/core": "~10.2.0",
    "@angular/forms": "~10.2.0",
    "@angular/material": "^10.2.7",
    "@angular/material-moment-adapter": "^12.1.3",
    "@angular/platform-browser": "~10.2.0",
    "@angular/platform-browser-dynamic": "~10.2.0",
    "@angular/router": "~10.2.0",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-common-types": "^0.2.35",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-free-brands": "^5.0.13",
    "@fortawesome/fontawesome-free-regular": "^5.0.13",
    "@fortawesome/fontawesome-free-solid": "^5.0.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fullcalendar/angular": "^5.11.0",
    "@fullcalendar/core": "^5.11.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/list": "^5.11.0",
    "@fullcalendar/moment": "^5.8.0",
    "@fullcalendar/resource-daygrid": "^5.8.0",
    "@fullcalendar/resource-timegrid": "^5.8.0",
    "@fullcalendar/resource-timeline": "^5.11.0",
    "@fullcalendar/rrule": "^5.8.0",
    "@fullcalendar/timegrid": "^5.11.0",
    "@fullcalendar/timeline": "^5.8.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "angular-calendar": "^0.28.28",
    "aws-sdk": "^2.993.0",
    "bootstrap": "^5.0.2",
    "date-fns": "^2.23.0",
    "font-awesome": "^4.7.0",
    "html2canvas": "^1.4.1",
    "jquery": "^3.6.0",
    "jspdf": "^2.3.1",
    "mat-select-search": "^1.2.3",
    "moment": "^2.29.3",
    "ngx-contextmenu": "^6.0.0",
    "ngx-mat-datetime-picker": "^3.0.0",
    "ngx-mat-moment-adapter": "^1.0.0-beta.1",
    "ngx-mat-select-search": "^3.3.3",
    "ngx-moment": "^5.0.0",
    "rxjs": "^6.6.7",
    "tippy.js": "^6.3.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.3",
    "@angular/cli": "~10.2.0",
    "@angular/compiler-cli": "~10.2.0",
    "@angular/localize": "^10.2.5",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/jquery": "^3.5.6",
    "@types/node": "^12.20.26",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

So i've wrong something? Any ideas?

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum