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>

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

其中某些属性似乎尚未完全实现：

高度似乎被忽略了。
现在可以看到指示器，但是它停留在当天的第一时刻。
营业时间似乎只显示一整天，没有显示任何时间。

其余属性似乎已被拾取。但是，奇怪的是，如果我导航到上一周（或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>

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

1 个答案: