Skip to content

FullCalendar.js adjust header for mobile

I am using responsive styling in a project that uses the fullcalendar.js. Unfortunately, I can’t get the style of the header (fc-header-left, fc-header-center, fc-header-right) to stack on each other when in mobile view. For example… in desktop view it looks like… fc-header-left fc-header-center fc-header-right

When mobile I would like the 3 parts of the header to stack on top of each other. fc-header-left fc-header-center fc-header-right

I have tried to override these headers with negative margins, floats and all kinds of things but I can’t get these headers to stack.

Does anyone know how I can get the header parts to stack on each other in mobile view?

Thanks

Answer

Give each of them a width:100%; and display:block; that should do the trick. At least I was able to get the demo one on teh fullcalendar.js website to do that. You will then have to align them as you see fit.

.fc-header-left, fc-header-center, fc-header-right {
    width: 100%;
    display: block;
}