Блог

Главная - Вопросы по программированию - как создать стиль fullcalendar headerToolBar

как создать стиль fullcalendar headerToolBar

#html #css #fullcalendar #fullcalendar-4

#HTML #css #fullcalendar #fullcalendar-4

Вопрос:

я пытаюсь добавить заголовок моего заголовка вместе с предыдущим, следующим, сегодняшним днем в левую часть страницы, однако это не позволяет им находиться на одной строке, это разрывы строк в заголовке

   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>

Комментарии:

1. Это FullCalendar 4 или 5?

2. @ADyson его версия 5.

3. Извините, но, присмотревшись повнимательнее, я не думаю, что это может быть потому, что а) такой опции, как header в версии 5, нет ( headerToolbar как показано в документации) и б) обычно вам plugins эта опция также не нужна в версии 5.

Ответ №1:

Это происходит потому <h2> , что элементы (как и все h... элементы) по умолчанию являются элементами уровня блока. Похоже, что разработчики FullCalendar не учли возможность того, что вы можете захотеть поместить заголовок и кнопки в один и тот же раздел заголовка, поэтому они этого не изменили.

Однако вы можете легко изменить это, установив отображение элемента на встроенное, например

 .fc-toolbar h2 {
  display: inline;
}

Демо-версия: https://codepen.io/ADyson82/pen/qBaWxVo

Метки: