Fullcalendar header buttons not responsive?

user_11333575 0
Viewed 1623

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 :

enter image description here

FullCalendar on mobile :

enter image description here

Is there anything to do to make it more aesthetic?

fullcalendar responsive mobile header button
2 Answers

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; } }";
user_92413770

I found a super simple solution that seems to work well and is just simple CSS:

@media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {font-size: 60%}}
user_148855300
Related