Wie stapelt man Fullcalendar-Header auf Mobilgeräten?

Question

Ich verwende fullcalendar.io und mein Layout sieht wie folgt auf Desktop-PCs:

June 2016       [<][Today][>] 
      My calendar is here 

jedoch auf mobilen, sieht es wie folgt aus:

  June 2016       
         [<][Today][>] 
      My calendar is here 

oder dass:

  June 20[<][Today][>] 
      My calendar is here 

Grundsätzlich, was ich will, ist, dass alle Elemente aus dem Header-Stack auf mobile zentriert. Ist das möglich?

Answer 1

Kein Problem, fügen Sie das einfach zu Ihrem CSS hinzu. Möglicherweise müssen Sie Ihren Haltepunkt anpassen oder ihn zu Ihrem vorhandenen Haltepunkt hinzufügen.

@media (max-width: 768px) { 
    .fc-toolbar > div { 
     float: left !important; 
     width: 100%; 
    } 
} 

Mobile wird wie folgt aussehen:

[Normally Left] 
[Normally Center] 
[Normally Right] 
--------- Your Calendar ------------ 

Optional:

können Sie verlieren die wichtig ist, wenn Sie präziser in Ihrer Wähler sind!. Beispiel:

.calendar .fc-toolbar > div.fc-left, 
.calendar .fc-toolbar > div.fc-center, 
.calendar .fc-toolbar > div.fc-right { 
    float: left !important; 
    width: 100%; 
}