Fullcalendar in angular problem with print of multiple events - html

Question

I have an angular 14 application with fullcalendar. If I have a lot of events in my calendar and I try to print it, the print looks like this :
First page:
Second page:
Here are the events on my calendar:
Does anyone know what might be the problem ?
Here is my package.json
{
"name": "pilotage",
"version": "1.10.0",
"scripts": {
"start": "npm run init-version && ng serve",
"start-local": "npm run init-version && ng serve",
"init-version": "node -e \"console.log('export const APP_VERSION = \\'' + process.env.npm_package_version +'\\';')\" > ./src/app/version.ts",
"build": "node --max_old_space_size=4092 \"node_modules/#angular/cli/bin/ng\" build --configuration production --configuration=production",
"bundle-all": "node bundle-all.js",
"lint": "ng lint",
"e2e": "ng e2e",
"test": "ng test --browsers Chrome",
"coverage": "ng test --code-coverage=true --browsers Chrome",
"set-node": "nvm use 12.4.0",
"msvs": "npm config set msvs_version 2017",
"memory": "node --max_old_space_size=8192",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"#angular/animations": "14.2.12",
"#angular/cdk": "14.2.1",
"#angular/common": "14.2.12",
"#angular/compiler": "14.2.12",
"#angular/core": "14.2.12",
"#angular/elements": "14.2.12",
"#angular/flex-layout": "^14.0.0-beta.41",
"#angular/forms": "14.2.12",
"#angular/localize": "14.2.12",
"#angular/platform-browser": "14.2.12",
"#angular/platform-browser-dynamic": "14.2.12",
"#angular/router": "14.2.12",
"#angular/service-worker": "14.2.12",
"#auth0/angular-jwt": "5.0.2",
"#formio/angular": "^5.3.0",
"#fullcalendar/adaptive": "6.0.1",
"#fullcalendar/angular": "6.0.1",
"#fullcalendar/core": "6.0.1",
"#fullcalendar/daygrid": "6.0.1",
"#fullcalendar/interaction": "6.0.0",
"#fullcalendar/moment": "6.0.0",
"#fullcalendar/moment-timezone": "6.0.0",
"#fullcalendar/resource": "^6.0.0",
"#fullcalendar/resource-timeline": "6.0.0",
"#fullcalendar/rrule": "6.0.0",
"#fullcalendar/timegrid": "6.0.0",
"#ng-bootstrap/ng-bootstrap": "^14.0.0",
"#popperjs/core": "^2.11.2",
"#ng-select/ng-select": "^9.0.0",
"#ngx-translate/core": "12.1.1",
"#ngx-translate/http-loader": "4.0.0",
"#swimlane/ngx-datatable": "^20.1.0",
"#types/quill": "^1.3.10",
"admin-lte": "2.3.8",
"angular-pipes": "^10.0.0",
"angular2-logger": "^0.7.0",
"bootstrap": "3.4.1",
"bootstrap-datepicker": "1.9.0",
"bootstrap3-wysihtml5-bower": "0.3.3",
"chart.js": "4.0.1",
"class-validator": "0.11.0",
"daterangepicker": "3.0.5",
"exceljs": "4.1.1",
"fastclick": "1.0.6",
"file-saver": "2.0.2",
"formio-export-mc": "0.3.32",
"formiojs": "4.12.7",
"html2canvas": "1.0.0-rc.5",
"html2pdf.js": "^0.9.2",
"i": "0.3.7",
"jQuery.print": "1.5.1",
"jquery": "3.6.2",
"jquery-knob": "1.2.11",
"jquery-slimscroll": "1.3.8",
"jquery-sparkline": "2.4.0",
"lodash": "4.17.21",
"lodash-es": "^4.17.21",
"moment": "2.29.4",
"moment-timezone": "0.5.27",
"ng-drag-drop": "^5.0.0",
"ng2-date-picker": "^15.0.1",
"ng2-file-upload": "1.4.0",
"ng2-pdf-viewer": "^6.4.0",
"ng2-timezone-selector": "0.2.4",
"ngx-accordion": "^0.0.17",
"ngx-bootstrap": "10.0.0",
"ngx-datatable": "^1.0.3",
"ngx-filesize": "2.0.2",
"ngx-image-cropper": "3.0.3",
"ngx-infinite-scroll": "8.0.1",
"ngx-pagination": "5.0.0",
"ngx-print": "^1.2.1",
"ngx-quill": "17.0.0",
"ngx-select-dropdown": "3.2.0",
"ngx-time-duration-picker": "^2.0.3",
"ngx-toastr": "13.2.1",
"ngx-tooltip": "^0.0.9",
"ngx-ui-switch": "^14.0.3",
"ngx-webstorage-service": "4.1.0",
"quill": "1.3.7",
"quill-image-resize-module": "3.0.0",
"rrule": "2.6.4",
"rxjs": "6.5.4",
"select2": "4.0.13",
"timepicker": "1.13.0",
"xlsx": "^0.16.0",
"yiq": "3.0.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~14.2.10",
"#angular-devkit/core": "^14.2.10",
"#angular-devkit/schematics": "^14.2.10",
"#angular/cli": "^14.2.10",
"#angular/compiler-cli": "14.2.12",
"#angular/language-service": "14.2.12",
"#types/core-js": "2.5.2",
"#types/events": "^3.0.0",
"#types/file-saver": "2.0.1",
"#types/jasmine": "~3.6.0",
"#types/jasminewd2": "2.0.6",
"#types/jquery": "3.3.32",
"#types/moment": "2.13.0",
"#types/node": "^12.11.1",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.1",
"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",
"prettier": "^2.4.1",
"protractor": "~7.0.0",
"sass-material-colors": "0.0.5",
"ts-node": "8.6.2",
"tslib": "^2.4.1",
"tslint": "~6.1.0",
"typescript": "4.6.4"
}
}
Also this is the configuration for my full calendar that I use :
this.options = {
editable: !this.isBusy,
events: this.eventsModel,
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridThreeDays,timeGridDay',
},
height: this.maxHeight,
droppable: true,
dayMaxEventRows: 3,
dayMaxEvents: 4,
firstDay: this.firstDay,
snapDuration: {
minutes: 15,
},
selectable: true,
timeZone: this.timeZone,
dateClick: this._dateClick,
datesSet: this._datesRender,
drop: this._drop,
eventClick: this._eventClick,
eventDidMount: this._eventDidMount,
eventDragStart: this._eventDragStart,
eventDragStop: this._eventDragStop,
eventDrop: this._eventDrop,
eventResize: this._eventResize,
eventResizeStart: this._eventResizeStart,
select: this._select,
schedulerLicenseKey: this.schedulerLicenseKey,
initialView: 'timeGridWeek',
nowIndicator: true,
locales: [frLocale],
locale: utils.getCurrentLang(),
views: {
timeGridThreeDays: {
type: 'timeGrid',
duration: { days: 3 },
buttonText: this.translateService.instant(constants.AGENDA_CUSTOMVIEWS_TIMEGRIDTHREEDAYS),
},
},
eventTimeFormat: {
hour: 'numeric',
minute: '2-digit',
},
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin,
momentPlugin,
momentTimezonePlugin,
rrulePlugin,
adaptivePlugin,
],
};