Events appearing outside time grid in timeGridWeek and timeGridDay

[muriloruy]

Events are correctly displayed in the month view, but in timeGridWeek and timeGridDay they appear below the time grid:

You can replicate this by copying the component from the fullcalendar-example-projects/angular available at https://github.com/fullcalendar/fullcalendar-example-projects in an Angular 9 project.

Here are the dependencies from my project: "dependencies": { "@angular/animations": "^9.1.1", "@angular/cdk": "^9.2.0", "@angular/common": "~9.1.1", "@angular/compiler": "~9.1.1", "@angular/core": "~9.1.1", "@angular/flex-layout": "^9.0.0-beta.29", "@angular/forms": "~9.1.1", "@angular/material": "^9.2.0", "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", "@fullcalendar/angular": "^4.4.5-beta", "@fullcalendar/core": "^4.4.0", "@fullcalendar/daygrid": "^4.4.0", "@fullcalendar/interaction": "^4.4.0", "@fullcalendar/list": "^4.4.0", "@fullcalendar/timegrid": "^4.4.0", "@ngrx/effects": "^9.1.0", "@ngrx/store": "^9.1.0", "@ngx-gallery/core": "^5.0.0-beta.0", "@ngx-gallery/lightbox": "^5.0.0-beta.0", "angular-moment": "^1.3.0", "browser-image-compression": "^1.0.9", "image-compressor": "^2.0.3", "moment": "^2.24.0", "ngx-cookie-service": "^3.0.4", "ngx-gallery": "^5.10.0", "ngx-image-cropper": "^3.1.6", "ngx-loading": "^8.0.0", "ngx-mask": "^9.0.1", "ngx-permissions": "^7.0.3", "ngx-spinner": "^9.0.2", "node-sass": "^4.13.1", "rxjs": "~6.5.5", "tslib": "^1.11.1", "zone.js": "~0.10.3" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.1", "@angular/cli": "~9.1.1", "@angular/compiler-cli": "~9.1.1", "@angular/language-service": "~9.1.1", "@types/jasmine": "~3.5.10", "@types/jasminewd2": "~2.0.8", "@types/node": "^13.11.1", "codelyzer": "^5.2.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~5.0.1", "karma": "~5.0.1", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.1", "karma-jasmine": "~3.1.1", "karma-jasmine-html-reporter": "^1.5.3", "protractor": "~5.4.3", "ts-node": "~8.8.2", "tslint": "~6.1.1", "typescript": "~3.8.3" }

[aurelien-leloup]

I am encountering exactly the same issue. Has it been acknowledged as a bug ?

[f-depasquale]

You probably forgot to import the css for timegrid ! @import '~@fullcalendar/timegrid/main.css';

[aurelien-leloup]

Indeed. Thank you !

[muriloruy]

That's it, thank you!

[muriloruy]

You probably forgot to import the css for timegrid ! @import '~@fullcalendar/timegrid/main.css';

This is the solution