使用jQuery集成FullCalendar时遭遇TypeError错误求助

这个错误的根源很明确：你调用$.fullCalendar.formatDate时传入的第一个参数是字符串，但这个方法要求第一个参数必须是Date对象或者moment.js的日期实例，不是原始字符串。当FullCalendar内部尝试用moment处理这个字符串时，就会触发isValid方法不存在的错误。

修正方案 #

你有几种方式可以解决这个问题，这里推荐最直接的三种：

方式1：把字符串转为Date对象后再使用formatDate

修改你定义st和end的代码，先把日期字符串转成Date实例：

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

方式2：直接使用moment.js格式化日期（更推荐）

因为FullCalendar本身依赖moment.js，直接用moment来处理日期会更顺畅：

var st = moment('2018-01-03').format("YYYY-MM-DD HH:mm:ss");
var end = moment('2018-01-05').format("YYYY-MM-DD HH:mm:ss");

方式3：跳过格式化，直接用ISO日期字符串（最简单）

其实FullCalendar的start和end字段可以直接接受YYYY-MM-DD或者YYYY-MM-DDTHH:mm:ss格式的字符串，你完全可以不用格式化，直接写：

// 不需要定义st和end，直接在事件里写
{
  title : 'event2',
  start : '2018-01-03T00:00:00',
  end : '2018-01-05T23:59:59'
}

完整修正后的代码 #

这里用方式2（moment格式化）来展示完整代码：

<!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(){
            // 用moment格式化日期
            var st = moment('2018-01-03').format("YYYY-MM-DD HH:mm:ss");
            var end = moment('2018-01-05').format("YYYY-MM-DD HH: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
                    }
                ]
            });
        });
    </script>
</body>
</html>

这样修改后，错误就会消失，2018-01-03到2018-01-05的事件栏也能正常显示了。

内容的提问来源于stack exchange，提问作者user5443928