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）。尝试修复它，看它是否有效。

Answer 2

$(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'
            }

        ]
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html><head>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='test.js'></script> // this is the file which includes your jquery, call it whatever you like
</head>
<body>
    
<div id="Content">
    <p>Test</p>
    <div id='calendar'></div>   
</div>

</body>
</html>

JS，Jquery，完整日历，学生

2 个答案: