fullcalendar + bootstrap
来源：互联网 发布：excel数据统计图表 编辑：程序博客网 时间：2024/06/03 21:34
<!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">×</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>
0 0
- fullcalendar + bootstrap
- fullCalendar
- fullcalendar
- FullCalendar
- FullCalendar
- bootstrap 标签页与fullcalendar 日历插件联合使用时出现隐藏页不显示日历的解决办法
- FullCalendar 备忘
- fullcalendar用法
- fullCalendar使用
- FullCalendar的二次开发、扩展
- jQuery]FullCalendar 备忘
- [jQuery]FullCalendar 备忘
- jQuery]FullCalendar 备忘
- FullCalendar 官方文档翻译
- fullcalendar的使用
- fullcalendar谷歌日历
- fullCalendar:中文API
- FullCalendar 官方文档翻译
- 用android studio创建手机用户界面
- Linux安装JDK详细步骤
- xml
- visio 2016 图 保存为无白边pdf
- KMP——CODEVS1204 寻找子串位置
- fullcalendar + bootstrap
- cocos2dx 3.2 裁剪节点 ClippingNode
- 信鸽推送使用
- Plus One问题及解法
- 手机信息页面
- COGS1190：最大和（前缀和）
- Oracle笔记--分析函数over
- 模型面数控制&动画名称
- 118 Pascal' Triangle 逻辑已经跟不上了咋整= =
