1. 程式人生 > >我的第一篇部落格之fullcalendar的使用

我的第一篇部落格之fullcalendar的使用

       //獲取醫生資源
        $.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,接下來可能有需要知道標題的同學我這裡說一下,標題沒有提供開源的自定義,所以我是直接修改原始碼來達到我的需求。