Fullcalendar header buttons not responsive?

Question

I configured Fullcalendar on my project, but I notice that on mobile, there is a problem with the layout of the buttons of the header, which is not at all aesthetic

FullCalendar on PC :

FullCalendar on mobile :

Is there anything to do to make it more aesthetic?

Answer 1

This Fullcalender is not responsive so we have to make header forcefully responsive. Add below code in your ngOnInit() function.

document.querySelector('style').textContent += "@media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {flex-direction:column;} .fc-toolbar-chunk { display: table-row; text-align:center; padding:5px 0; } }";