CODEWITHSUNDEEP
javascriptjquerycssfullcalendar
Sheri Trager
Sheri Trager

Reputation: 852

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

Upvotes: 4

Views: 6552

Answers (4)

Roubi
Roubi

Reputation: 2106

For Fullcalendar v5

@media (max-width: 767.98px) {
    .fc .fc-toolbar.fc-header-toolbar {
        display: block;
        text-align: center;
    }

    .fc-header-toolbar .fc-toolbar-chunk {
        display: block;
    }
}

Upvotes: 6

MrPaulDriver
MrPaulDriver

Reputation: 243

The version I am working with uses flexbox. This is what works for me,

.fc-toolbar {
    .fc-center h2 {
        font-size: 1.25em
    }
    display: block;
    text-align: center;
    @media (min-width: 600px) {
        display: flex;
    }
}

Upvotes: 0

Miikka Kostian
Miikka Kostian

Reputation: 41

This worked for me with the newest version. Check done using screen width.

@media (max-width: 768px){
    .fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
        display: inline-block;
        float: none !important;
    }
}

Upvotes: 4

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

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

Upvotes: 3

Related Questions