利用Jquery和fullCalendar制作日程表

本文轉載自查看原文 2017-02-16 15:15 3034

詳情請參考以下代碼

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery插件FullCalendar日程表 .net利用fullcalendar制作網頁日歷日程日程表（Project）循環賽日程表算法循環比賽日程表（match）（分治）算法之循環賽日程表循環賽日程表【例7.4】循環比賽日程表循環賽日程表循環賽日程表問題