如何构建此页面使用HTML?

时间:2015-07-18 03:55:17

标签: javascript jquery html5 css3

我有一个问题,我不知道如何解决。我尝试使用FullCalendar插件,但失败了。

不好,图片没有上传!

1 个答案:

答案 0 :(得分:0)

以下是我过去使用jQuery完整日历插件时使用的内容:

您需要同时包含CSSJS个文件:

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="css/fullcalendar-2.2.6.min.css" media="all">
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/fullcalendar-2.2.6.min.js"></script>

然后是jQuery:

$(function() {  
    $("#calendar").fullCalendar({
        defaultDate: '', // can be dynamically set to highlight current day
        eventLimit: true, // allows "more" link when too many events in a day
        events: [
            {
                title: 'All Day Event',
                start: '2015-07-01'
            },
            {
                title: 'Long Event',
                start: '2015-07-08',
                end: '2015-07-09'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-07-09T16:00:00'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2015-07-16T16:00:00'
            },
            {
                title: 'Conference',
                start: '2015-07-12',
                end: '2015-07-13'
            },
            {
                title: 'Meeting',
                start: '2015-07-12T10:30:00',
                end: '2015-07-12T12:30:00'
            },
            {
                title: 'Lunch',
                start: '2015-07-12T12:00:00'
            },
            {
                title: 'Meeting',
                start: '2015-07-12T14:30:00'
            },
            {
                title: 'Happy Hour',
                start: '2015-07-12T17:30:00'
            },
            {
                title: 'Dinner',
                start: '2015-07-12T20:00:00'
            },
            {
                title: 'Birthday Party',
                start: '2015-07-13T07:00:00'
            },
            {
                title: 'Click for Google',
                url: 'http://google.com/',
                start: '2015-07-28'
            }
        ]
    }); // end of calendar constructor
}); // end of document.ready function

然后只需要一个日历所需的HTML元素:

<div id="calendar"></div>