fullCalendar 不会在 document.ready 上加载标题

Question

我的网站上有一个完整的日历，它应该在页面加载时加载月份，但由于某种原因，在按下月份选择按钮之前不会加载月份的标题。

我可能忽略了一些简单的东西，任何人都可以看看告诉我我哪里出错了。

这是我的代码：

$(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>