利用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>

 

posted @ 2017-02-16 15:15  一个勤奋的胖子  阅读(4067)  评论(0)  编辑  收藏  举报