代码之家 › 专栏 › 技术社区 › user5443928

使用Jquery集成FullCalendar时获取类型错误

fullcalendar jquery

user5443928 · 技术社区 · 7 年前

我面临一个问题。在使用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') 但它显示了上述错误。请帮助我解决此错误。

2 回复 | 直到 7 年前

SWC 7 年前

看起来这是变量的问题。与其使用完整的日历,不如使用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天,以显示正确的日期。

ADyson 7 年前

这些声明:

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日期对象等。

关于你在另一个问题的评论中提到的第二个问题,你的日期不会出现在日历中的1月5日,因为结束日期是独家 (参见 https://fullcalendar.io/docs/event_data/Event_Object/ ). 你的比赛在5月初结束,而不是5月底。如果你想让它出现在星期五,只需在结束日期前加一天( 2018-01-06 ).