利用Jquery和fullCalendar制作日程表

详情请参考以下代码
<!DOCTYPE html>
<html>

<head>
    <title>利用Jquery和fullCalendar制作日程表</title>
    <!--FullCalendar CSS-->
    <link href=\'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.css\' rel=\'stylesheet\' />
    <link href=\'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.print.min.css\' rel=\'stylesheet\' media=\'print\' />
    <!--jQuery/jQuery-ui/moment-->
    <script src=\'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js\'></script>
    <script src=\'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js\'></script>
    <script src=\'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js\'></script>
    <!--FullCalendar/本地脚本js-->
    <script src=\'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/fullcalendar.min.js\'></script>
    <script src=\'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.2.0/locale/zh-cn.js\'></script>
    <script type="text/javascript">
    /*
                                        jQuery载入
                                    */

    $(document).ready(function() {
        /**
         * 定义date，d，m,y
         */
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();


        /**
         * 初始化fullCalendar，便于后续其他js的调用
         */
        var calendar = $(\'#calendar\').fullCalendar({
            /**
             * head参数
             */
            header: {
                left: \'prev,next today\',
                center: \'title\',
                right: \'month,agendaWeek,agendaDay\'
            },
            /**
             * [defaultView 默认视图]
             */
            defaultView: \'agendaWeek\',
            /**
             * [selectable 是否可选]
             */
            selectable: true,
            selectHelper: true,

            select: function(start, end, allDay) {
                /*
                    after selection user will be promted for enter title for event.
                */
                var title = prompt(\'标题:\');
                /*
                    if title is enterd calendar will add title and event into fullCalendar.
                */
                if (title) {
                    calendar.fullCalendar(\'renderEvent\', {
                            title: title,
                            start: start,
                            end: end,
                            allDay: allDay
                        },
                        true // make the event "stick"
                    );
                }
                calendar.fullCalendar(\'unselect\');
            },
            /*
                editable: true allow user to edit events.
            */
            editable: true,
            /*
                events is the main option for calendar.
                for demo we have added predefined events in json object.
            */
            events: [{
                title: \'测试1\',
                start: new Date(y, m, 1)
            }, {
                title: \'测试2\',
                start: new Date(y, m, d - 5),
                end: new Date(y, m, d - 2)
            }, {
                id: 999,
                title: \'测试3\',
                start: new Date(y, m, d - 3, 16, 0),
                allDay: false
            }, {
                id: 999,
                title: \'测试4\',
                start: new Date(y, m, d + 4, 16, 0),
                allDay: false
            }, {
                title: \'测试5\',
                start: new Date(y, m, d, 10, 30),
                allDay: false
            }, {
                title: \'测试6\',
                start: new Date(y, m, d, 12, 0),
                end: new Date(y, m, d, 14, 0),
                allDay: false
            }, {
                title: \'测试7\',
                start: new Date(y, m, d + 1, 19, 0),
                end: new Date(y, m, d + 1, 22, 30),
                allDay: false
            }, {
                title: \'测试8\',
                start: new Date(y, m, 28),
                end: new Date(y, m, 29),
                url: \'http://www.baidu.com/\'
            }]
        });

    });
    </script>
    <style type="text/css">
    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    }
    
    #calendar {
        width: 900px;
        margin: 0 auto;
    }
    </style>
</head>

<body>
<!-- 定义一个容器 -->
    <div id=\'calendar\'></div>
</body>

</html>