golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize
来源：互联网 发布：霓虹灯制作软件 编辑：程序博客网 时间：2024/06/14 13:20
<!-- iframe里日历--><!DOCTYPE html><html><head><link rel='stylesheet' href='/static/css/fullcalendar.min.css' /><script src='/static/js/jquery-2.1.3.min.js'></script> <script type="text/javascript" src="/static/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/><script src='/static/js/moment.min.js'></script><script src='/static/js/fullcalendar.min.js'></script><script src='/static/js/fullcalendar.zh-cn.js'></script><script src='/static/js/bootstrap-datetimepicker.min.js'></script><script src='/static/js/bootstrap-datetimepicker.zh-CN.js'></script><link rel='stylesheet' href='/static/css/bootstrap-datetimepicker.min.css'/><link rel="stylesheet" type="text/css" href="/static/font-awesome-4.7.0/css/font-awesome.min.css"/><style>/*body {margin: 0;padding: 0;font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;}*/#script-warning {display: none;background: #eee;border-bottom: 1px solid #ddd;padding: 0 10px;line-height: 40px;text-align: center;font-weight: bold;font-size: 12px;color: red;}#loading {display: none;position: absolute;top: 10px;right: 10px;}#calendar {max-width: 900px;margin: 40px auto;padding: 0 10px;}body {margin: 40px 10px;padding: 0;font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;font-size: 14px;}/*#calendar {max-width: 900px;margin: 0 auto;}*/ .fc-color-picker { list-style: none; margin: 0; padding: 0; } .fc-color-picker > li { float: left; font-size: 30px; margin-right: 5px; line-height: 30px; } .fc-color-picker > li .fa { -webkit-transition: -webkit-transform linear 0.3s; -moz-transition: -moz-transform linear 0.3s; -o-transition: -o-transform linear 0.3s; transition: transform linear 0.3s; } .fc-color-picker > li .fa:hover { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } .text-red { color: #dd4b39 !important; } .text-yellow { color: #f39c12 !important; } .text-aqua { color: #00c0ef !important; } .text-blue { color: #0073b7 !important; } .text-black { color: #111111 !important; } .text-light-blue { color: #3c8dbc !important; } .text-green { color: #00a65a !important; } .text-gray { color: #d2d6de !important; } .text-navy { color: #001f3f !important; } .text-teal { color: #39cccc !important; } .text-olive { color: #3d9970 !important; } .text-lime { color: #01ff70 !important; } .text-orange { color: #ff851b !important; } .text-fuchsia { color: #f012be !important; } .text-purple { color: #605ca8 !important; } .text-maroon { color: #d81b60 !important; }</style></head><!-- <body> --><script type="text/javascript">$(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here header: {left: 'prev,next today',center: 'title',right: 'month,agendaWeek,agendaDay,listMonth'},// defaultDate: '2017-01-12',navLinks: true, // can click day/week names to navigate viewseditable: true,eventLimit: true, // allow "more" link when too many eventsbusinessHours: true, // display business hoursselectable: true,selectHelper: true,// select: function(start, end) {// var title = prompt('Event Title:');// var eventData;// if (title) {// eventData = {// title: title,// start: start,// end: end,// // Color: getRandomColor(),// textColor: getRandomColor(),// backgroundColor: getRandomColor(),// // borderColor: getRandomColor(), // className: 'done',// };// $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true// }// $('#calendar').fullCalendar('unselect');// },select: function(start, end, jsEvent, view){ //添加日程事件 // $("input#cid").remove(); // var th1="<input id='cid' type='hidden' name='cid' value='" +selectRow[0].Id+"'/>" // $(".modal-body").append(th1);//这里是否要换名字$("p").remove(); $("#start").val(start.format('YYYY-MM-DD HH:mm')); $("#end").val(end.format('YYYY-MM-DD HH:mm')); $('#modalTable').modal({ show:true, backdrop:'static' }); },editable: true,// events: '/admin/calendar',// eventSources: [ // '/feed1.php', // '/feed2.php' // ]events: { url: '/admin/calendar', type: 'post' },// events: {// url: '/admin/getcalendar',// error: function() {// $('#script-warning').show();// }// },loading: function(bool) {$('#loading').toggle(bool);},// events: [// {// title: 'All Day Event',// start: '2017-01-01'// },// {// title: 'Long Event',// start: '2017-01-07',// end: '2017-01-10'// },// {// id: 999,// title: 'Repeating Event',// start: '2017-01-09T16:00:00'// },// {// id: 999,// title: 'Repeating Event',// start: '2017-01-16T16:00:00'// },// {// title: 'Conference',// start: '2017-01-11',// end: '2017-01-13'// },// {// title: 'Meeting',// start: '2017-01-12T10:30:00',// end: '2017-01-12T12:30:00'// },// {// title: 'Lunch',// start: '2017-01-12T12:00:00'// },// {// title: 'Meeting',// start: '2017-01-12T14:30:00'// },// {// title: 'Happy Hour',// start: '2017-01-12T17:30:00'// },// {// title: 'Dinner',// start: '2017-01-12T20:00:00'// },// {// title: 'Birthday Party',// start: '2017-01-13T07:00:00'// },// {// title: 'Click for Google',// url: 'http://google.com/',// start: '2017-01-28'// }// ],dayClick: function(date, jsEvent, view) { // alert('Clicked on: ' + date.format()); // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY); // alert('Current view: ' + view.name); // change the day's background color just for fun // $(this).css('background-color', getRandomColor()); }, eventClick: function(data, jsEvent, view){ //修改日程事件 $("input#cid").remove(); var th1="<input id='cid' type='hidden' name='cid' value='" +data.id+"'/>" $(".modal-body").append(th1); $("#title1").val(data.title); $("#content1").val(data.content); $("#isallday1").prop('checked',data.allDay); $("#start1").val(data.start.format('YYYY-MM-DD HH:mm')); $("#end1").val(data.end.format('YYYY-MM-DD HH:mm'));$('#add-new-event1').css({"background-color": data.color, "border-color": data.color}); $('#modalTable1').modal({ show:true, backdrop:'static' }); }, eventDrop: function(event,delta,revertFunc) { // alert(event.id+event.title+delta.days()); // var url = "/admin/calendar/dropcalendar"; // $.post(url,{id:event.id,dalta:delta.days()},function(msg){ // }); $.ajax({ type:"post", url:"/admin/calendar/dropcalendar", data: {id:event.id,delta:delta.days()}, success:function(data,status){ alert("修改“"+data+"”成功！(status:"+status+".)"); }, error:function(data,status){ alert(data); revertFunc(); } }); }, eventResize: function(event,delta,revertFunc) { // alert(delta.asHours()); $.ajax({ type:"post", url:"/admin/calendar/resizecalendar", data: {id:event.id,delta:delta.asHours()}, success:function(data,status){ alert("修改“"+data+"”成功！(status:"+status+".)"); }, error:function(data,status){ alert(data); revertFunc(); } }); }});});// RGB 转16进制 var rgbToHex = function(rgb) { // rgb(x, y, z) var color = rgb.toString().match(/\d+/g); // 把 x,y,z 推送到 color 数组里 var hex = "#"; for (var i = 0; i < 3; i++) { // 'Number.toString(16)' 是JS默认能实现转换成16进制数的方法. // 'color[i]' 是数组，要转换成字符串. // 如果结果是一位数，就在前面补零。例如： A变成0A hex += ("0" + Number(color[i]).toString(16)).slice(-2); } return hex; } // 16进制 转 RGB // 能处理 #axbycz 或 #abc 形式 var hexToRgb = function(hex) { var color = [], rgb = []; hex = hex.replace(/#/,""); if (hex.length == 3) { // 处理 "#abc" 成 "#aabbcc" var tmp = []; for (var i = 0; i < 3; i++) { tmp.push(hex.charAt(i) + hex.charAt(i)); } hex = tmp.join(""); } for (var i = 0; i < 3; i++) { color[i] = "0x" + hex.substr(i+2, 2); rgb.push(parseInt(Number(color[i]))); } return "rgb(" + rgb.join(",") + ")"; }function getRandomColor(){ var c = '#'; var cArray = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; for(var i = 0; i < 6;i++){ var cIndex = Math.round(Math.random()*15); c += cArray[cIndex]; } return c; }function save(){ var title = $('#title').val(); var content = $('#content').val(); var start = $('#start').val(); var end = $('#end').val(); var allday=document.getElementById("isallday").checked; if (title){ $.ajax({ type:"post", url:"/admin/calendar/addcalendar", data: {title:title,content:content,allday:allday,start:start,end:end,color:rgbToHex(currColor)}, success:function(data,status){ alert("添加“"+data+"”成功！(status:"+status+".)"); var eventData; if (title) { eventData = { title: title, content: content, start: start, end: end, color:rgbToHex(currColor), // textColor: getRandomColor(), // backgroundColor: rgbToHex(currColor), // borderColor: rgbToHex(currColor), className: 'done', }; // $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true要用下面这个，否则添加后立即删除，无法删除 $('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据 } $('#calendar').fullCalendar('unselect'); $('#modalTable').modal('hide'); } }); } } function update(){ var title = $('#title1').val(); var content = $('#content1').val(); var start = $('#start1').val(); var end = $('#end1').val(); var cid = $('#cid').val(); var allday=document.getElementById("isallday1").checked; var currColor=$('#add-new-event1').css("background-color"); if (title){ $.ajax({ type:"post", url:"/admin/calendar/updatecalendar", data: {cid:cid,title:title,content:content,start:start,end:end,color:rgbToHex(currColor)}, success:function(data,status){ alert("修改“"+data+"”成功！(status:"+status+".)"); $('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据 // stick? = true $('#modalTable1').modal('hide'); } }); } } //删除事件 function delete_event(){ if(confirm("您确定要删除吗？")){ var cid = $("#cid").val(); $.ajax({ type:"post", url:"/admin/calendar/deletecalendar", data: {cid:cid}, success:function(data,status){ alert("删除“"+data+"”成功！(status:"+status+".)"); //从日程视图中删除该事件 $("#calendar").fullCalendar("removeEvents",cid); // stick? = true $('#modalTable1').modal('hide'); } }); } } </script><!-- <div class="col-lg-12"> --><div id='calendar'></div><!-- </div> --><!-- 新建日程窗口 --><div class="container"> <form class="form-horizontal"> <div class="modal fade" id="modalTable"> <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> </button> <h3 class="modal-title">添加日程</h3> </div> <div class="modal-body"> <div class="modal-body-content"> <div class="form-group must"> <label class="col-sm-3 control-label">标题</label> <div class="col-sm-7"> <input type="text" class="form-control" id="title"></div> </div> <div class="form-group must"> <label class="col-sm-3 control-label">内容</label> <div class="col-sm-7"> <textarea class="form-control" rows="3" id='content'></textarea> </div> </div> <div class="form-group must"> <label class="col-sm-3 control-label">全天事件</label> <div class="col-sm-7 checkbox"> <label> <input type="checkbox" value="true" id="isallday"></label> </div> </div> <div class="form-group must"> <label class="col-sm-3 control-label">开始时间</label> <div class="input-group date form_datetime col-sm-7" data-link-field="dtp_input1"> <input class="form-control" type="text" id="start" readonly=""> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value=""> </div> <div class="form-group must"> <label class="col-sm-3 control-label">结束时间</label> <div class="input-group date form_datetime col-sm-7" data-link-field="dtp_input1"> <input class="form-control" type="text" id="end" readonly=""> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value=""> </div> <div class="form-group must"> <label class="col-sm-3 control-label">选择背景色</label> <div class="col-sm-7"> <div class="btn-group" style="width: 100%; margin-bottom: 10px;"> <ul class="fc-color-picker" id="color-chooser"> <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li> </ul> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <button type="button" id="add-new-event" class="btn btn-primary" onclick="save()">保存</button> </div> </div> </div> </div></form></div><!-- 编辑日程窗口 --><div class="container"> <div class="form-horizontal"> <div class="modal fade" id="modalTable1"> <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> </button> <h3 class="modal-title">编辑日程</h3> </div> <div class="modal-body"> <div class="modal-body-content"> <div class="form-group must"> <label class="col-sm-3 control-label">标题</label> <div class="col-sm-7"> <input type="text" class="form-control" id="title1"></div> </div> <div class="form-group must"> <label class="col-sm-3 control-label">内容</label> <div class="col-sm-7"> <textarea class="form-control" rows="3" id='content1'></textarea> </div> </div> <div class="form-group must"> <label class="col-sm-3 control-label">全天事件</label> <div class="col-sm-7 checkbox"> <label> <input type="checkbox" value="true" id="isallday1"></label> </div> </div> <div class="form-group must"> <label class="col-sm-3 control-label">开始时间</label> <!-- <div class="col-sm-7"> <input type="text" class="form-control" id="start"> </div> --> <div class="input-group date form_datetime col-sm-7" data-link-field="dtp_input1"> <input class="form-control" type="text" id="start1" readonly=""> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value=""> </div> <div class="form-group must"> <label class="col-sm-3 control-label">结束时间</label> <!-- <div class="col-sm-7"> <input type="tel" class="form-control" id="end"> </div> --> <div class="input-group date form_datetime col-sm-7" data-link-field="dtp_input1"> <input class="form-control" type="text" id="end1" readonly=""> <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> </div> <input type="hidden" id="dtp_input1" value=""> </div> <div class="form-group must"> <label class="col-sm-3 control-label">选择背景色</label> <div class="col-sm-7"> <div class="btn-group" style="width: 100%; margin-bottom: 10px;"> <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>--> <ul class="fc-color-picker" id="color-chooser1"> <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li> <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li> </ul> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> <!-- <button type="button" class="btn btn-primary" onclick="update()">修改</button> --> <button type="button" id="add-new-event1" class="btn btn-primary" onclick="update()">修改</button> <button type="button" class="btn btn-danger" onclick="delete_event()">删除</button> </div> </div> </div> </div></div></div> <script type="text/javascript"> $('.form_datetime').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,forceParse: 0, showMeridian: 1 });$('.form_date').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 2,minView: 2,forceParse: 0 });$('.form_time').datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1,autoclose: 1,todayHighlight: 1,startView: 1,minView: 0,maxView: 1,forceParse: 0 });</script><script> var currColor = "#3c8dbc"; //Red by default $(function () { /* ADDING EVENTS */ //Color chooser button // var colorChooser = $("#color-chooser-btn"); $("#color-chooser > li > a").click(function (e) { e.preventDefault(); //Save color currColor = $(this).css("color"); //Add color effect to button $('#add-new-event').css({"background-color": currColor, "border-color": currColor}); }); $("#color-chooser1 > li > a").click(function (e) { e.preventDefault(); //Save color currColor = $(this).css("color"); //Add color effect to button $('#add-new-event1').css({"background-color": currColor, "border-color": currColor}); }); // $("#isallday").click(function(){//是否是全天事件 // if($("#sel_start").css("display")=="none"){ // $("#sel_start,#sel_end").show(); // }else{ // $("#sel_start,#sel_end").hide(); // } // }); // $("#isend").click(function(){//是否有结束时间 // if($("#p_endtime").css("display")=="none"){ // $("#p_endtime").show(); // }else{ // $("#p_endtime").hide(); // } // }); // $("#add-new-event").click(function (e) { // e.preventDefault(); // //Get value and make sure it is not null // var val = $("#new-event").val(); // if (val.length == 0) { // return; // } // //Create events // var event = $("<div />"); // event.css({"background-color": currColor, "border-color": currColor, "color": "#fff"}).addClass("external-event"); // event.html(val); // $('#external-events').prepend(event); // //Add draggable funtionality // ini_events(event); // //Remove event from text input // $("#new-event").val(""); // }); });</script><!-- </body> --></html>效果图：fullcalendar支持拖曳和resize改变时间。缺少事件的检索与定位。
代码如下：
0 0
- golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize
- golang-fullcalendar拖曳drop、resize的坑
- 拖曳事件
- fullcalendar谷歌日历
- FullCalendar日历插件使用说明
- fullcalendar日历组件应用
- fullcalendar日历插件使用手册
- fullcalendar 日历改造
- jquery.fullCalendar日程管理日历插件及事件处理原理视频教程
- fullcalendar日历控件知识点集合
- fullcalendar日历控件知识点集合
- fullcalendar日历控件知识点集合
- fullcalendar日历控件知识点集合
- fullcalendar日历控件知识点集合
- FullCalendar日历插件说明文档
- fullcalendar日历控件知识点集合
- FullCalendar日历插件说明文档
- FullCalendar日历插件说明文档
- 以不自由换自由
- AJAX 通过授权解决跨域问题
- 杭电2015
- Codevs4655 序列终结者
- 基于web的全景漫游自动生成加编辑平台的技术实现（一）----初识krpano引擎
- golang-fullcalendar,engineercms完善日历事件-支持拖曳drop,改变时间resize
- 用c++实现归并排序
- CC2650 Sensor Controller使用介绍
- AFNetworking 的请求头设置
- 【软件体系结构】考点整理
- Tomcat部署时war和war exploded区别
- STM32互补PWM输出使能控制
- 福特、通用
- 2017/1/4学习日志
