Search code examples
htmlcssfullcalendarfullcalendar-4

how to style fullcalendar headerToolBar

i am trying to add my header title along with the prev,next,today onto the left side of the page,how ever it doesnt allow for them to be on one line, it line breaks at the title

  var calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [ 'dayGrid', 'timeGrid' ],
    header: {
      left: 'title prev,next today',
      center: '',
      right: 'dayGridMonth'
    }}

how do i get it to move up like enter image description here

html

     <div class="fc-toolbar-chunk">
        <h2 class="fc-toolbar-title">November 2020</h2>
        <button class="fc-prev-button fc-button fc-button-primary" type="button" aria-label="prev">
<span class="fc-icon fc-icon-chevron-left"></span></button><button class="fc-next-button fc-button fc-button-primary" type="button" aria-label="next"><span class="fc-icon fc-icon-chevron-right"></span></button>
    <button disabled="" class="fc-today-button fc-button fc-button-primary" type="button">today</button></div>
Solution

  • This happens because <h2> elements (like all h... elements) are, by default, block-level elements. It appears that the fullCalendar developers didn't consider the possibility that you might want to put the title and buttons into the same section of the header, so they didn't change that.

    However you can alter this easily by setting the element's display to inline, e.g.

    .fc-toolbar h2 {
  display: inline;
}

    Demo: https://codepen.io/ADyson82/pen/qBaWxVo