我的第一篇部落格之fullcalendar的使用
阿新 • • 發佈:2019-02-07
//獲取醫生資源 $.ajax({ url:'../static/main/php/getDoctorList.php', type:'get', success: function (list) { for(var i= 0,arr={};i<list.length;i++){ arr={ id:list[i].dtdid, title:list[i].dtname }; doc.push(arr); $('#makeCalendar').fullCalendar('addResource', { id:list[i].dtdid, title:list[i].dtname }); } doc=list; for(var i=0;i<doc.length;i++){ docmsg+=`<option>${doc[i].dtname}</option>` } }, error: function () { } }) //獲取資料來源 $.ajax({ url:'../static/main/php/appointmentEvent.php', type:'get', success: function (list) { for(var i= 0,arr={};i<list.length;i++){ arr={ title:list[i].atdiseases, start:list[i].atstarTime, end:list[i].atendTime, id:list[i].atid, resourceId:list[i].atdoctor, className:[{appointmentState:list[i].classState,patientName:list[i].atpatient}] }; event.push(arr); } $('#makeCalendar').fullCalendar('addEventSource',event); }, error: function () { } }) for(var i=0;i<classState.length;i++){ statemsg+=`<option>${classState[i]}</option>` } //彈出框點選後下一次操作隱藏的兩個方法 $(document).on('click', function () { msgShow.close().remove();//預約項懸浮提示訊息 $('#makeClendar_title').hide();//預約項標題 }) $(document).on('mousewheel DOMMouseScroll', function () { msgShow.close().remove();//預約項懸浮提示訊息 }) //修改預約時間 function isModifyDateFn(event,revertFunc){ isModifyDate=dialog({ title:'預約修改確認', content:'您確認要修改預約時間嗎', okValue:'確定', ok:function(){ var atid=event.id; console.log(event); var atpatient=event.className[0].patientName; var atstarTime=event.start.format(); var atendTime=event.end.format(); var atdoctor=event.resourceId; $.ajax({ url:'../static/main/php/modifyDate.php', type:'post', dataType:'text', data:{"atid":atid,"atstarTime":atstarTime,"atendTime":atendTime,"atdoctor":atdoctor,"atpatient":atpatient}, success: function (data) { console.log('succ'); }, error: function (data) { console.log('err:'+data); } }) }, cancelValue:'取消', cancel: function () { revertFunc(); } }) isModifyDate.showModal(); } //建立新預約 function createBooking(start,end,docName,state,jsEvent,title,appointmentState,patientName){ //設定狀態按鈕 var dialogButton=[]; if(state=='修改預約'){ dialogButton=[ { value:'刪除預約', callback:function(){ $.ajax({ url:'../static/main/php/deleteEvent.php', type:'post', data:{"atpatient":jsEvent.id}, dataType:'text', success: function (data) { if(data){ $('#makeCalendar').fullCalendar('removeEvents',[jsEvent.id]);//刪除事件用姓名做判斷 } } }) } } ]; }else{ dialogButton=[]; } var bookingHtml=` <div class="newBookingBox"id="wqeqwesa"> <label for="patientName">病人姓名:</label><input type="text"id="patientName"value="${jsEvent.className?jsEvent.className[0].patientName:''}"/> <br/><br/> <label for="appointmentPro">預約專案:</label><input type="text"id="appointmentPro"value="${title?title:''}"/> <br/><br/> <label for="startTime">開始時間:</label><input type="text"id="startTime"class="easyui-datetimebox" data-options="showSeconds:false"value="${start}"/><br/><br/> <label for="endTime">結束時間:</label><input type="text"id="endTime"class="easyui-datetimebox" data-options="showSeconds:false"value="${end}"/><br/><br/> <label for="">選擇醫生:</label> <select class="easyui-combobox" id="docSelect" name="state" style="width:200px;"data-options="value:'${docName}',editable:false"> ${docmsg} </select><br/> <label for="stateSelect">選擇狀態:</label> <select class="easyui-combobox" id="stateSelect"style="width:200px;"data-options="value:'${appointmentState?appointmentState:classState[0]}',editable:false"> ${statemsg} </select> </div> `; newBookingdialog=dialog({ title:state, content:bookingHtml, okValue:'儲存預約', id:'newBookWarp', width:600, ok:function(){ var startTime= $('#startTime').datetimebox('getValue'); var endTime=$('#endTime').datetimebox('getValue'); var patientName=$('#patientName').val(); var docName=$('#docSelect').combobox('getValue'); var atscheduling='正常'; var atdiseases=$('#appointmentPro').val(); var atcreateTime=getNowFormatDate(); var classState=$('#stateSelect').val(); var atid=jsEvent.id; if(!startTime||!endTime||!patientName||!docName||!atdiseases||!classState){ console.log('不能為空'); var alertNull=dialog({ title:'輸入不能為空!!!!', content:'請正確填寫預約項', okValue:'確定', ok: function () { alertNull.close(); } }).showModal(); return false; }else { $.ajax({ url: '../static/main/php/setEvent.php', type: 'post', data: { "atid":atid, "state":state, "startTime": startTime, "endTime": endTime, "patientName": patientName, "docName": docName, "atscheduling": atscheduling, "atdiseases": atdiseases, "atcreateTime": atcreateTime, "classState":classState }, dataType: 'text', success: function (data) { if(state=='修改預約'){ console.log(1); jsEvent.startTime=startTime; jsEvent.endTime=endTime; jsEvent.title=atdiseases; jsEvent.className=[{appointmentState:classState,patientName:patientName}]; jsEvent.resourceId=docName, $('#makeCalendar').fullCalendar('updateEvent', jsEvent); }else { $('#makeCalendar').fullCalendar('unselect'); $('#makeCalendar').fullCalendar('addEventSource', [{ title: atdiseases, start: startTime, end: endTime, id: data, resourceId: docName, className: [{appointmentState: classState.classState, patientName: patientName}] }]); } }, error: function () { console.log('err'); } }) } }, cancelValue:'取消', cancel: function () { $('#makeCalendar').fullCalendar('unselect'); }, button:dialogButton }) $.parser.parse($('#wqeqwesa').parent()) newBookingdialog.showModal(); } //預約盒子 function createDialog(){ } //獲取當前時間 function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var seperator2 = ":"; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) { month = "0" + month; } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + date.getHours() + seperator2 + date.getMinutes() + seperator2 + date.getSeconds(); return currentdate; } /** 繫結事件到日期下拉框 **/ $(function(){ $('#makeClendar_title').calendar({ onSelect: function(date){ $("#makeCalendar").fullCalendar('gotoDate',date); $(this).hide(); } }); $("#fc-dateSelect").delegate("select","change",function(){ var fcsYear = $("#fcs_date_year").val(); var fcsMonth = $("#fcs_date_month").val(); $("#makeCalendar").fullCalendar('gotoDate', fcsYear, fcsMonth); }); }); //日期標題點擊出現日曆 $(document).on('click', '#dateSelectBtn',function (e) { e.stopPropagation(); $('#makeClendar_title').show(); }) //對目標元素停止冒泡防止點選目標元素關閉 $(document).on('click', '#makeClendar_title',function (e) { e.stopPropagation(); }) })
這裡如果還能堅持看下去的同學在下佩服,我這裡用到的標題日曆是easyui 的日曆,彈窗用的是artdialog,接下來可能有需要知道標題的同學我這裡說一下,標題沒有提供開源的自定義,所以我是直接修改原始碼來達到我的需求。