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[bot]]

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