Question

我面临一个问题。使用Jquery集成完整日历时出现以下错误。

Uncaught TypeError: a.isValid is not a function
    at X (moment.min.js:6)
    at String.kc (moment.min.js:6)
    at e (fullcalendar.min.js:6)
    at d (fullcalendar.min.js:7)
    at c (fullcalendar.min.js:7)
    at Object.t [as formatDate] (fullcalendar.min.js:6)
    at HTMLDocument.<anonymous> (cal.html:15)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

我正在解释下面的代码。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Fullcalendar Integration with example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/fullcalendar.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/fullcalendar.print.css" rel="stylesheet"  media="print" />
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.0/fullcalendar.min.js"></script>
</head>
<body>
<div id="calendar"></div>
<script type="text/javascript">    
$(document).ready(function(){
        var st=$.fullCalendar.formatDate('2018-01-03', "yyyy-MM-dd H:mm:ss");
        var end=$.fullCalendar.formatDate('2018-01-05', "yyyy-MM-dd H:mm:ss");
        var calendar = $("#calendar").fullCalendar({  
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            navLinks: true, 
            editable: true,
            eventLimit: true, 
            events: [
                {
                    title  : 'event1',
                    start  : '2017-04-01'
                },
                {
                    title  : 'event2',
                    start  : st,
                    end    : end
                },
                {
                    title  : 'event3',
                    start  : '2017-04-09T12:30:00',
                    allDay : false // will make the time show
                }
            ],  // request to load current events

        });

     });
</script>
</body>
</html>

实际上我需要显示event bar start date to end date (i.e-'2018-01-03' and '2018-01-05')，但它显示上述错误。请帮我解决这个错误。

Answer 1

看起来这是变量的问题。不要使用完整日历，只需使用Moment JS。

所以你应该能够将它们改为：

var st = moment().format('2018-01-03', "yyyy-MM-dd H:mm:ss");
var end = moment().format('2018-01-06', "yyyy-MM-dd H:mm:ss");

更新时将结束日期设置为加1天，以显示正确的日期。

Answer 2

这些陈述：

var st=$.fullCalendar.formatDate('2018-01-03', "yyyy-MM-dd H:mm:ss");
var end=$.fullCalendar.formatDate('2018-01-05', "yyyy-MM-dd H:mm:ss");

不行。此函数在fullCalendar中不再是当前的，它已在v2.0中删除。它似乎仍然可以调用它，但它不再记录，你不应该期望它以任何可预测或正确的方式工作。

即使它工作，你对它的使用也是多余的，因为你要求将你的字符串格式化为它已经完全相同的格式（H:mm:ss部分是无关紧要，因为你的日期字符串没有时间组件，因此也不会输出时间字符串。

在fullCalendar中执行此操作的当前方法（var st = moment().format('2018-01-03', "yyyy-MM-dd H:mm:ss"); - 请参阅https://fullcalendar.io/docs/utilities/Moment/）也只生成2018-01-03 - 与输入相同。根本不需要使用它。

相反，您可以直接在活动中指定时间：

{
  title  : 'event2',
  start  : "2018-01-03",
  end    : "2018-01-05"
}

这是可能的，因为fullCalendar接受momentJS接受的任何日期 - 包括ISO字符串，本机JS Date对象等。

关于您在其他问题的评论中提到的次要问题，您的日期不会出现在日历中的1月5日，因为结束日期独占（请参阅https://fullcalendar.io/docs/event_data/Event_Object/）。您的活动在5日开始结束，而不是结束。如果您想让它出现在星期五，只需将一天添加到结束日期（2018-01-06）。

使用Jquery

2 个答案: