fullCalendar не загружает заголовок в document.ready

Question

У меня на сайте есть fullCalendar, который должен загружать месяц при загрузке страницы, но по какой-то причине заголовок месяца не загружается до тех пор, пока не нажата кнопка выбора месяца.

Я, вероятно, пропускаючто-то простое, может кто-нибудь взглянуть, скажи мне, где я иду не так.

Вот мой код:

$(document).ready(function() {

  $(".calendar").fullCalendar({
    defaultDate: new Date(),
    editable: false,
    firstDay: 1,
    timezone: 'local',
    header: {
      left: "",
      center: "prev, title, next",
      right: ""
    },
    defaultView: 'month',
    viewDisplay: function(view) {

    },
    columnFormat: {
      month: 'dddd',
      week: 'dddd D/M',
      day: 'dddd D/M'
    },
    allDayDefault: false,
    eventSources: [

      // your event source
      {

        url: 'https://www.burtonstreetcrm.co.uk/scripts/booking_session_calendar.php', // use the `url` property
        textColor: 'white' // an option!
      }
      // any other sources...
    ],

    eventOrder: "lookup_building",
    // Convert the allDay from string to boolean
    eventRender: function(event, element, view) {

      // end hide dates //

      if (event.allDay === 'true') {
        event.allDay = true;
      } else {
        event.allDay = false;
      }



    },

    eventClick: function(event) {
      if (event.id) {}

    },
    selectable: true,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar" class="calendar"></div>

Answer 1

Проблема с columnFormat: { month: 'dddd', week: 'dddd D/M', day: 'dddd D/M' },

В соответствии с документом он принимает строковое значение, а не массив, поэтому columnFormat:'dddd' даст ожидаемый результат

$(document).ready(function() {

  $(".calendar").fullCalendar({
    defaultDate: new Date(),
    editable: false,
    firstDay: 1,
    timezone: 'local',
    header: {
       left: 'prev,next today',
       center: 'title',
       right: 'year,month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    viewDisplay: function(view) {

    },
    columnFormat:'dddd',
    allDayDefault: false,
    eventSources: [

      // your event source
      {

        url: 'https://www.burtonstreetcrm.co.uk/scripts/booking_session_calendar.php', // use the `url` property
        textColor: 'white' // an option!
      }
      // any other sources...
    ],

    eventOrder: "lookup_building",
    // Convert the allDay from string to boolean
    eventRender: function(event, element, view) {

      // end hide dates //

      if (event.allDay === 'true') {
        event.allDay = true;
      } else {
        event.allDay = false;
      }



    },

    eventClick: function(event) {
      if (event.id) {}

    },
    selectable: true,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>
<div id="calendar" class="calendar"></div>