• 利用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>
  • 相关阅读:
    MySQL
    Date和String转换
    Spring-test事务自动回滚
    java多线程:生产者和消费者模式(wait-notify) : 单生产和单消费
    制作ISO文件 与 提取ISO文件
    windows10 更换密码
    win 添加网络位置共享 && win 实用快捷键
    ubuntu16 安装mysql5.7
    ubuntu16 中chkconfig 命令不能使用
    mysql 5.7 初始化密码或随机密码
  • 原文地址:https://www.cnblogs.com/ys-wuhan/p/6405872.html
Copyright © 2020-2023  润新知