Calendar not rendering in UI in angular 12

[garvraj]

Describe the bug

I am using Angular 12 and trying to add angular-calendar to render the recurrence calendar dates, it is rendering in browser as i can see in the inspect. data is also proper. I have tried to set height also, its just creating blank space.

I have added the imports in styles.css and angular.json also . I have tried all the suggestion and still not working. Though when I have tried with a separate standalone application , it works fine. Not sure what's conflicting with my application.

Minimal reproduction of the problem with instructions
With Angular 12 with given package.json
{
"name": "parent-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "echo Starting... && ng serve",
"build": "ng build",
"build:ssr": "ng run macsis.WebUI:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@agm/core": "^1.1.0",
"@angular-material-components/datetime-picker": "^6.0.3",
"@angular/animations": "~12.1.1",
"@angular/cdk": "^11.2.5",
"@angular/common": "~12.1.1",
"@angular/compiler": "~12.1.1",
"@angular/core": "~12.1.1",
"@angular/forms": "~12.1.1",
"@angular/localize": "^11.2.2",
"@angular/material": "^11.2.5",
"@angular/platform-browser": "~12.1.1",
"@angular/platform-browser-dynamic": "~12.1.1",
"@angular/platform-server": "^11.2.2",
"@angular/router": "~12.1.1",
"@azure/msal-angular": "^2.0.0",
"@azure/msal-browser": "^2.14.2",
"@fullcalendar/angular": "^5.8.0",
"@fullcalendar/core": "^5.8.0",
"@fullcalendar/daygrid": "^5.8.0",
"@fullcalendar/interaction": "^5.8.0",
"@fullcalendar/list": "^5.8.0",
"@fullcalendar/timegrid": "^5.8.0",
"@mdi/font": "^5.3.45",
"@ng-bootstrap/ng-bootstrap": "^9.0.0",
"@ng-select/ng-select": "^7.0.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
"@stripe/stripe-js": "^1.13.2",
"@swimlane/ngx-charts": "^17.0.0",
"@swimlane/ngx-datatable": "^19.0.0",
"@types/d3-shape": "^3.0.1",
"@types/googlemaps": "^3.43.3",
"@yaireo/tagify": "^3.21.5",
"alertifyjs": "^1.13.1",
"angular-auth-oidc-client": "^12.0.0",
"angular-calendar": "^0.29.0",
"angular-gauge": "^4.0.0",
"angular-resizable-element": "^5.0.0",
"angularx-flatpickr": "^6.5.2",
"apexcharts": "^3.19.3",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.6.0",
"bootstrap-select": "^1.13.18",
"bs-stepper": "^1.7.0",
"chart.js": "^3.4.1",
"core-js": "^3.15.2",
"date-fns": "^2.30.0",
"dragula": "^3.7.2",
"dropzone": "^5.7.1",
"echarts": "^5.1.2",
"file-upload-with-preview": "^4.0.8",
"font-awesome": "^4.7.0",
"google-maps-ng2": "^1.0.10",
"html-to-pdfmake": "^2.3.11",
"inputmask": "^5.0.3",
"jquery": "^3.6.0",
"jquery-slimscroll": "^1.3.8",
"jQuery.print": "^1.5.1",
"magnific-popup": "^1.1.0",
"mat-progress-buttons": "^9.2.1",
"moment": "^2.29.1",
"ng-apexcharts": "~1.5.6",
"ng-click-outside": "^8.0.0",
"ng-image-fullscreen-view": "^2.0.0",
"ng-pick-datetime": "^7.0.0",
"ng2-charts": "^2.4.3",
"ng2-dragula": "^2.1.1",
"ngx-autocom-place": "^1.0.6",
"ngx-bootstrap": "^6.2.0",
"ngx-clipboard": "^14.0.1",
"ngx-color-picker": "^11.0.0",
"ngx-custom-validators": "^11.0.1",
"ngx-dropzone-wrapper": "^10.0.1",
"ngx-echarts": "^5.2.2",
"ngx-gauge": "^1.1.0",
"ngx-google-places-autocomplete": "^2.0.5",
"ngx-image-cropper": "^3.3.5",
"ngx-mask": "^11.1.5",
"ngx-material-file-input": "^2.1.1",
"ngx-perfect-scrollbar": "^10.1.0",
"ngx-spinner": "^12.0.0",
"ngx-summernote": "^0.8.7",
"ngx-toggle-button": "^1.0.0-beta.1",
"ngx-type-ahead": "^2.0.1",
"odometer": "^0.4.8",
"pdfmake": "^0.2.5",
"popper.js": "^1.0.4",
"prismjs": "^1.20.0",
"quill": "^1.3.7",
"rrule": "^2.6.8",
"rxjs": "~6.6.0",
"stripe-angular": "^1.7.0",
"summernote": "^0.8.20",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.1.1",
"@angular/cli": "~12.1.1",
"@angular/compiler-cli": "~12.1.1",
"@types/html-to-pdfmake": "^2.1.0",
"@types/jasmine": "~3.6.0",
"@types/node": "^12.11.1",
"@types/stripe-v3": "^3.1.23",
"browser-sync": "^2.27.4",
"codelyzer": "^6.0.0",
"del": "^5.1.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-cached": "^1.1.1",
"gulp-cssnano": "^2.1.3",
"gulp-file-include": "^2.2.2",
"gulp-if": "^3.0.0",
"gulp-npm-dist": "^1.0.3",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.1.0",
"gulp-uglify": "^3.0.2",
"gulp-useref": "^4.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"schematics-scss-migrate": "^1.3.13",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5"
}
}

can't create a sample since it is working with sample application

Screenshots

Versions

• @angular/core:12.1.1
• angular-calendar:0.29.0
• Browser name and version: Chrome

[matts-bot]

Thanks so much for opening an issue! If you'd like to support this project, then please consider sponsoring me