如何设置全日历标题工具栏的样式

Question

我正在尝试将我的 header 标题连同上一个、下一个、今天添加到页面的左侧，但是它不允许它们在一行上，它在以下位置换行标题

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

我如何让它像

一样向上移动

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>

Answer 1

发生这种情况是因为 <h2> 元素（与所有 h... 元素一样）在默认情况下是 block-level 元素。似乎 fullCalendar 开发人员没有考虑到您可能希望将标题和按钮放在 header 的同一部分的可能性，因此他们没有改变这一点。

不过，您可以通过将元素的显示设置为内联来轻松更改此设置，例如

.fc-toolbar h2 {
  display: inline;
}

演示：https://codepen.io/ADyson82/pen/qBaWxVo

如何设置全日历标题工具栏的样式

how to style fullcalendar headerToolBar

html

css

fullcalendar

fullcalendar-4