javascript - 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: {
月份:'dddd',
周:'dddd D/M',
日期:'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>