javascript - JS, Jquery, 全日历, 学生

Question

我是 JS 的新手，甚至是 Jquery 和 fullcalendar 的新手。我创建了一个单独在页面上运行良好的日历。我正在尝试将此代码与另一个页面结合使用，但我无法让日历呈现。

首先我包含一些文件:

<link href='/Include/fullcalendar-2.6.1/fullcalendar.css' rel='stylesheet'/>
<link href='/Include/fullcalendar-2.6.1/fullcalendar.print.css' rel='stylesheet' media='print'/>
<script src='/Include/fullcalendar-2.6.1/lib/moment.min.js'></script>
<script src='/Include/fullcalendar-2.6.1/lib/jquery.min.js'></script>
<script src='/nclude/fullcalendar-2.6.1/fullcalendar.min.js'></script>

<script type="text/javascript" src="/include/jquery-1.9.0.js"></script>

我的日历代码:

$(document).ready(function() {

    $('#calendar').fullCalendar({
        defaultDate: '2017-02-01',
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        events: [

            {
                id: 200,
                title: 'Weekly System\nBackup',
                url: '/images/backup.jpg',
                start: '2017-01-29'
            },
            {
                id: 200,
                title: 'Weekly System\nBackup',
                url: '/images/backup.jpg',
                start: '2017-02-05'
            },
            {
                id: 200,
                title: 'Weekly System\nBackup',
                url: '/images/backup.jpg',
                start: '2017-02-12'
            },
            {
                id: 200,
                title: 'Weekly System\nBackup',
                url: '/images/backup.jpg',
                start: '2017-02-19'
            },
            {
                id: 200,
                title: 'Weekly System\nBackup',
                url: '/images/backup.jpg',
                start: '2017-02-26'
            },
            {
                id: 200,
                title: 'Weekly System\nBackup',
                url: '/images/backup.jpg',
                start: '2017-03-05'
            },
            {
                title: 'Snow Break',
                url:   'https://www.youtube.com/watch?v=SxqmPdIxh8s',
                start: '2017-02-10',
                end:   '2017-02-15'
            },
            {
                title: 'C# Quiz',
                url:   '/images/quiz.jpg',
                start: '2017-02-15T11:30:00',
                end:   '2017-02-15T12:30:00'
            },
            {
                title: 'Snow day 4',
                url: '/images/day4.jpg',
                start: '2017-02-16'
            },
            {
                title: 'SOG3 Due',
                url:  '/images/sog3.jpg',
                start: '2017-02-17'
            },
            {
                title: 'Started SOG4',
                url:  '/images/sog4.jpg',
                start: '2017-02-17'
            },
            {
                title: 'Winter Sale!',
                url:  '/SOG4/index.htm',
                start: '2017-02-28'
            }

        ]
    });

});

我不认为这里有任何问题，因为它在第一页上运行。

我包括一些内联样式:

body {
    margin: 40px 10px;
    padding: 0;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    font-size: 14px;
}

#calendar {
    max-width: 900px;
    margin: 0 auto;
}

最后是 HTML:

<div id="Content">
    <p>Test</p>
    <div id='calendar'></div>   
</div>

测试显示在它应该显示的位置，但没有日历。我对所有代码感到抱歉，但我是一名学生，我不明白为什么这不起作用。感谢您的关注。任何建议将不胜感激。

Answer 1

你在第 3 和第 4 个脚本标签中有拼写错误

<script src='/nclude/fullcalendar-2.6.1/fullcalendar.min.js'></script>

(您输入的是 nclude 而不是 Include)。尝试修复它，看看它是否有效。