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' },

根据文档，它接受字符串值，而不是Array 所以 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>

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

1 个答案: