<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html>
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <base href="#springUrl('/assets/adminlte/')"/>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工作台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href='plugins/fullcalendar/packages/core/main.css' rel='stylesheet' />
    <link href='plugins/fullcalendar/packages/daygrid/main.css' rel='stylesheet' />
    <link href='plugins/fullcalendar/packages/timegrid/main.css' rel='stylesheet' />
    <link href='plugins/fullcalendar/packages/list/main.css' rel='stylesheet' />
    <style>
        .fc-event, .fc-event-dot{
            background-color: #00893d;
        }
        .fc-event{
            border: 1px solid #00893d;
        }
        .fc-button-primary {
            color: #fff;
            background-color: #00893d;
            border-color: #00893d;
        }
        .fc-button-primary:not(:disabled):active, .fc-button-primary:not(:disabled).fc-button-active {
            color: #fff;
            background-color: #046930;
            border-color: #046930;
        }
        .fc-day-grid-event .fc-content {
            white-space:normal;
            overflow: hidden;
        }
        .fc-time-grid .fc-slats td{height: 2.5rem !important;}
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
            font-size: 14px;
        }

        #top {
            background: #eee;
            border-bottom: 1px solid #ddd;
            padding: 0 10px;
            line-height: 40px;
            font-size: 12px;
        }

        #calendar {
            max-width: 900px;
            margin: 40px auto;
            padding: 0 10px;
        }
    </style>
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini">


<div class="wrapper">
    <div class="content-wrapper" style="margin-left:0;">
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-body" style="margin-top:30px;">
                            <a href="#springUrl('/a/appForm/list')" style="margin-left:10%;margin-bottom: 20px;" type="button" class="fc-prev-button fc-button fc-button-primary">返回列表</a>
                            <div id="calendar_detail" style="width: 80%;margin: 0px auto;"></div>
                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </section><!-- /.content -->
    </div><!-- /.content-wrapper -->


    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
</div><!-- ./wrapper -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script src='plugins/fullcalendar/packages/core/main.js'></script>
<script src='plugins/fullcalendar/packages/core/locales-all.js'></script>
<script src='plugins/fullcalendar/packages/interaction/main.js'></script>
<script src='plugins/fullcalendar/packages/daygrid/main.js'></script>
<script src='plugins/fullcalendar/packages/timegrid/main.js'></script>
<script src='plugins/fullcalendar/packages/list/main.js'></script>
<script>
    var csrfheader = {name: '_csrf_header', value: '${_csrf.headerName}'};
    var csrftoken = {name: '_csrf', value: '${_csrf.token}'};
</script>
<script>
    var dateToString=function(date){
        var year = date.getFullYear();
        var month =(date.getMonth() + 1).toString();
        var day = (date.getDate()).toString();
        if (month.length == 1) {
            month = "0" + month;
        }
        if (day.length == 1) {
            day = "0" + day;
        }
        var dateTime = year + "-" + month + "-" + day;
        return dateTime;
    };
    var dateDayFormat = function(){
        var time = new Date()    //先将时间戳转为Date对象，然后才能使用Date的方法
        var year = time.getFullYear(),
            month = time.getMonth() + 1 ,  //月份是从0开始的
            day = time.getDate(),
            hour = time.getHours(),
            minute = time.getMinutes(),
            second = time.getSeconds()
        //add0()方法在后面定义
        var s = year+'-'+add0(month)+'-'+ add0(day);
        console.log(s);
        return  s

    }

    var add0 = function(m){
        return m < 10 ? '0' + m: m
    }

    var dateFormat = function(time){
        var year = time.getFullYear(),
            month = time.getMonth() + 1 ,  //月份是从0开始的
            day = time.getDate(),
            hour = time.getHours(),
            minute = time.getMinutes(),
            second = time.getSeconds()
        //add0()方法在后面定义
        var s = year+'-'+add0(month)+'-'+ add0(day)+' '+add0(hour)+':'+add0(minute)+':'+add0(second);
        console.log(s);
        return  s

    }
    document.addEventListener('DOMContentLoaded', function() {
        var initialLocaleCode = 'zh-cn';
        var calendarEl = document.getElementById('calendar_detail');
        var array = [];
        var obj = {};
        obj.title="张三";
        obj.start="2019-06-01 13:15";
        obj.end="2019-06-01 14:15";
        obj.color = "red";
        array.push(obj);
        var obj1 = {};
        obj1.title="李四";
        obj1.start="2019-06-25 08:00:00";
        obj1.end="2019-06-30 15:00";
        array.push(obj1);
        var obj2 = {};
        obj2.title="王二";
        obj2.start="2019-06-1 13:00";
        obj2.end="2019-06-1 15:00";
        array.push(obj2);
        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
            defaultDate: dateDayFormat(),
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            editable:false,//不可编辑
            minTime: '09:00:00',
            maxTime: '18:00:00',
            slotLabelFormat: {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false,
            },

            eventStartEditable:false,
            displayEventEnd: true,//总是显示结束时间
            disableDragging:true,//不可拖动
            diableResizing:true,//不可改变大小
            locale: 'zh-cn',
            timeFormat: {'':'HH:mm'},
            axisFormat:'H(:mm)',
            timeFormat: {
                agenda: 'H(:mm)' //h:mm{ - h:mm}'
            },axisFormat: 'H(:mm)', //,'h(:mm)tt',
            buttonIcons: false, // show the prev/next text
            weekNumbers: true,
            weekMode:'fixed',
            navLinks: true, // can click day/week names to navigate views
            weekNumbersWithinDays:true,
            nowIndicator : true,
            firstDay:0,
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events:function(obj, callback){
                var begin =dateFormat(obj.start);
                var end = dateFormat(obj.end);
                $.ajax({
                    type: "POST",
                    url: "#springUrl('/a/appForm/calendarData')",
                    data: {begin: begin,end:end,_csrf_header:csrfheader.value,_csrf:csrftoken.value},
                    dataType: "json",
                    success: function (data) {
                        if (data.errorNo == 0) {
                            callback(data.datas);
                        }
                    },
                    error: function () {
                    }
                })
            }
        });

        calendar.render();

    });

</script>
</body>
</html>
