我已经开始查看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>


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

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

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


身高似乎被忽略了。
现在,指标可见,但停留在当天的第一时刻。
营业时间似乎只显示一整天,没有显示任何时间。


其余的属性似乎已经被拾取。
但是,奇怪的是,如果我导航到上一周(或fullCalender中的任何其他地方),则它将正确呈现,如下所示:

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

有没有其他人经历过这种行为或对从哪里开始寻找任何建议。我正在尝试在相当大的系统上实现此功能,但是可以肯定的是,在fullCalendar.js文件之前,我已经加载了所有的JQuery。

最佳答案

在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>

关于javascript - fullCalendar-首次加载时未应用属性,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51018845/

10-12 01:15
查看更多