fullcalendar + bootstrap

最新推荐文章于 2024-08-21 09:30:00 发布
轻舞飞扬2014
最新推荐文章于 2024-08-21 09:30:00 发布
阅读量3.2k
点赞数
本文链接：https://blog.csdn.net/u013796473/article/details/62043990
版权
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <link href="${request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${request.contextPath}/css/fullcalendar.min.css" rel="stylesheet">
    <link href="${request.contextPath}/css/fullcalendar.print.min.css" rel="stylesheet" media='print'>
    <link href="${request.contextPath}/css/fullcalendar.min.css" rel="stylesheet">
    <link href="${request.contextPath}/css/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <style>
        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 16px;
        }
        #calendar {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="navbar navbar-inverse" role="navigation">
            <ul class="nav navbar-nav">
                <li id="myLogLi" class="active"><a href="#myLog" role="tab" data-toggle="tab"
                                                   aria-controls="myLog">我的日志</a></li>
                <li id="memberLi"><a href="#member" role="tab" data-toggle="tab" aria-controls="member" id="memberNav">成员</a>
                </li>
            </ul>
            <@userLogin>
            <#if loginuser??>
                 <span style="float:right;text-align:center; height:50px;line-height:50px;margin-left: 30px;margin-right:20px;">
                    <a href="${request.contextPath}/index/welcome.html">退出</a>
                </span>

                <span style="float:right;text-align:center; height:50px;line-height:50px;color:white">
                    ${loginuser.username},欢迎您！
                </span>
            </#if>
        </@userLogin>
    </div>
</div>
<div class="tab-content">
    <div class="tab-pane fade in active row" id="myLog">
        <div id="calendar"></div>
    </div>
    <div class="tab-pane fade" id="member">
        <span style="margin-left: 5px;" id="today"></span>
        <div class="row">
            <div class="form-group" style="margin-top:20px;">
                <label for="currentDate" class="col-sm-1 control-label">时间：</label>
                <div class="input-group date form_datetime col-sm-3" style="float: left">
                    <input class="form-control " size="16" type="text" id="currentDate" name="currentDate"
                           readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                <label class="col-sm-2 control-label">
                    <button class="btn btn-primary" type="button" id="selectButton">查询</button>
                </label>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;" id="addLog"></div>
    </div>
</div>
<div class="modal" id="calenderModel"  data-backdrop="static" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="modelTitle"></h4>
            </div>
            <div class="modal-body">
                <form id="scheduleForm" method="post">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">标签：</label>
                        <div class="form-group" id="inputCheck">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="startTime" class="col-sm-3 control-label">起始时间：</label>
                        <div class="col-sm-8">
                            <input class="form-control " size="16" type="text" id="startTime" name="startTime"
                                   readonly style="margin-bottom: 10px;">
                        </div>
                    </div>

                    <div class="form-group" style="margin-top: -5px;" id="endDiv">
                        <label for="endTime" class="col-sm-3 control-label">结束时间：</label>
                        <div class="col-sm-8">
                            <input class="form-control" size="16" type="text" name="endTime" readonly
                                   style="margin-bottom: 10px;" id="endTime">
                        </div>
                    </div>

                    <div class="form-group">
                        <textarea class="form-control" rows="4" name="content" id="content"></textarea>
                    </div>
                    <input type="hidden" name="id" id="logId" value=""/>
                    <@userLogin>
                    <#if loginuser??>
                        <input type="hidden" name="userId" id="userId" value="${loginuser.id}"/>
                    </#if>
                </@userLogin>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="closeButton">关闭</button>
                <button type="button" class="btn btn-primary" id="saveButton">保存</button>
            </div>
        </div>
    </div>
</div>
</div>
<script src="${request.contextPath}/js/moment.min.js"></script>
<script src="${request.contextPath}/js/jquery.min.js"></script>
<script src="${request.contextPath}/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/js/jquery-ui.js"></script>
<script src="${request.contextPath}/js/fullcalendar.min.js"></script>
<script src="${request.contextPath}/js/bootstrap-datetimepicker.js"></script>
<script src="${request.contextPath}/js/bootstrap-datetimepicker.fr.js"></script>


<script>
    $(document).ready(function () {
        var data = [];
        var myDate = new Date();
        var y = myDate.getFullYear();
        var m = myDate.getMonth() + 1;
        var d = myDate.getDate();
        var w = myDate.getDay();
        if (w == 0) {
            w = "星期天";
        } else if (w == 1) {
            w = "星期一";
        } else if (w == 2) {
            w = "星期二";
        } else if (w == 3) {
            w = "星期三";
        } else if (w == 4) {
            w = "星期四";
        } else if (w == 5) {
            w = "星期五";
        } else {
            w = "星期六";
        }
        $("#today").html("当前日期是：  " + y + "-" + m + "-" + d + "  " + w);
        var object_operate = {
            type: "",
            init: function () {
                $.get("${request.contextPath}/index/selectLabelList.html", function (result) {
                    data = eval('(' + result + ')');
                    for (var i = 0; i < data.length; i++) {
                        var valueId = data[i].id;
                        var labelNamestr = data[i].labelName;
                        $('#inputCheck').append('<label class="checkbox-inline" id="inputCheck">' +
                                '<input type="checkbox"  id="label' + valueId + '" name="labelName" value="' + labelNamestr + '">' + labelNamestr);
                    }
                });
            },
            selectLogData: function () {
                var date = $("#currentDate").val();
                $.ajax({
                    url: "${request.contextPath}/index/selectLogData.html",
                    data: {"date": date},
                    type: "POST",
                    dataType: "html",
                    success: function (result) {
                        $("#addLog").html(result);
                    }
                });
            }
        };

        $('.form_datetime').datetimepicker({
            minView: "month",
            format: "yyyy-mm-dd",
            autoclose: true
        });

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'agendaWeek'
            },
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            buttonText: {
                today: '今天',
                week: '周',
                prev: '上一周',
                next: '下一周'
            },
            editable: true,
            defaultView: "agendaWeek",
            events: function (start, end, timezone, callback) {
                var userId = $("#userId").val();
                $.ajax({
                    url: "${request.contextPath}/index/selectUserLog.html",
                    dataType: 'json',
                    data: {
                        start: start.format(),
                        end: end.format(),
                        userId: userId
                    },
                    success: function (doc) {
                        var eventServer = [];
                        $(doc).each(function () {
                            eventServer.push({
                                id: $(this).attr('id'),
                                title: $(this).attr('content'),
                                start: $(this).attr('startTime'),
                                end: $(this).attr('endTime'),
                            });
                        });
                        callback(eventServer);
                    }

                })
            },
            eventDrop: function (event, delta, revertFunc) {
                var startTime = event.start.format("YYYY-MM-DD HH:mm");
                var endTime = event.end.format("YYYY-MM-DD HH:mm");
                var id = event.id;
                $.post("${request.contextPath}/index/updateScheduleById.html",
                        {"startTime": startTime, "endTime": endTime, "id": id},
                        function (result) {
                            var result = eval('(' + result + ')');
                            if (result.status == 1) {
                                $('#calendar').fullCalendar('updateEvent', event);
                            } else {
                                revertFunc();
                            }
                        }
                );
            },
            eventResize: function(event, delta, revertFunc) {
                var startdate = $.fullCalendar.formatDate(event.start, "YYYY-MM-DD HH:mm");
                var enddate = $.fullCalendar.formatDate(event.end, "YYYY-MM-DD HH:mm");
                $("#endDiv").attr("style", "display:block");
                $("#startTime").val(startdate);
                $("#endTime").val(enddate);
                var contentStr = (event.title).split(":");
                $("#content").val(contentStr[1]);
                $("#logId").val(event.id);
                var labelNameStr = contentStr[0].split(",");
                for (var j = 0; j < labelNameStr.length; j++) {
                    for (var i = 0; i < data.length; i++) {
                        if (labelNameStr[j] == data[i].labelName) {
                            $("#label" + data[i].id).attr("checked", true);
                            break;
                        }
                    }
                };
                object_operate.type = "modify";
                $("#modelTitle").html("修改日常事件");
                $("#closeButton").html("");
                $("#closeButton").html("删除");
                $("#calenderModel").modal("toggle");
                //检测到模态框点击关闭按钮
                $('#calenderModel').on('hidden.bs.modal', function(){
                    revertFunc();
                })
            },
            dayClick: function (date, allDay, jsEvent, view) {
                object_operate.type = "add";
                $("#modelTitle").html("增加日常事件");
                $("#startTime").val(date.format("YYYY-MM-DD HH:mm"));
                $("#endTime").val("");
                $("#endDiv").attr("style", "display:none");
                $("#content").val("");
                $("#closeButton").html("");
                $("#closeButton").html("关闭");
                $("#calenderModel").modal("toggle");
            },
        });
        $("#saveButton").click(function () {
            if (object_operate.type == "add") {
                $("#scheduleForm").attr("action", "${request.contextPath}/index/addSchedule.html");
                $("#scheduleForm").submit();
            } else {
                $("#scheduleForm").attr("action", "${request.contextPath}/index/updateSchedule.html");
                $("#scheduleForm").submit();
            }
        });
        $("#closeButton").click(function () {
            if (object_operate.type == "add") {
                $("#calenderModel").modal('hide');
            } else {
                var id = $("#logId").val();
                window.location.href = "${request.contextPath}/index/deleteScheduleById.html?id=" + id;
            }
        });

        $("#memberNav").click(function () {
            object_operate.selectLogData()
        });

        $("#selectButton").click(function () {
            object_operate.selectLogData()
        });

        object_operate.init();
    });

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