javascript - fullCalendar - 首次加载时未应用属性

Question

我已经开始查看 fullCalendar 包，但在第一次加载时发现了一些异常行为。

我的设置如下:

<div id='calendar'></div>

<script>
        // Create FullCalendar Object
        $j('#calendar').fullCalendar({
            height: 650,
            nowIndicator: true,
            defaultView: 'agendaWeek',
            columnHeaderFormat: 'ddd D MMM',
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            businessHours: businessHours,
            selectable: true,
            select: function (startDate, endDate) {
                AddWorkHours(startDate, endDate);
            }
        });

</script>

但是，当我第一次启动日历时，它显示如下:

某些属性似乎尚未完全实现:

1. 高度似乎被忽略了。
2. 现在指标可见，但在当天的第一时刻卡住了。
3. 营业时间似乎只显示全天，没有显示任何时间。

其余属性似乎已被拾取。然而奇怪的是，如果我导航到前一周(或 fullCalender 中的任何其他位置)，它就会正确呈现，如下所示:

是否有其他人经历过这种行为或对从哪里开始寻找有任何建议。我正在尝试在相当大的系统上实现这一点，但我很确定我在 fullCalendar.js 文件之前加载了所有 JQuery。

Answer 1

您是否在 fullcalendar.js 之前加载了 moment.js？并检查版本是否兼容。

您的代码片段工作正常，我需要查看businessHours var和AddWorkHours函数以确认一切正常。

如果您检查下面的示例，您将看到突出显示的区域(周一至周五上午 10 点到下午 6 点)，这就是示例中的营业时间。

jQuery(document).ready(function($){
  var businessHours = {
    // days of week. an array of zero-based day of week integers (0=Sunday)
    dow: [ 1, 2, 3, 4, 5 ], // Monday - Friday
    start: '10:00', // a start time (10am in this example)
    end: '18:00', // an end time (6pm in this example)
  };
  
  $('#calendar').fullCalendar({
    height: 666,
    nowIndicator: true,
    defaultView: 'agendaWeek',
    columnHeaderFormat: 'ddd D MMM',
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    businessHours: businessHours,
    selectable: true,
    select: function (startDate, endDate) {
      AddWorkHours(startDate, endDate);
    }
  });
  
  function AddWorkHours(startDate, endDate){
    alert('Selected Start Time is: ' + startDate);
    alert('Selected End Time is: ' + endDate);
  }
});

<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 href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

<div id="calendar-container">
  <div id="calendar"></div>
</div>