layUI與FullCalendar結合使用示例

敘：第一次是使用layUI以及fullcalendar開發日程管理功能，根基比較淺薄因此遇到了各種各樣的問題，索性最後完成了，現在記錄一下，方便以後再次使用時能有所幫助；

---

---

1、頁面效果

1.1、主界面

現實的日程信息背景顏色不一樣是根據已過時、正在進行中、未開始三種狀態劃分的，下面會有具體代碼講到；

點擊空白處彈出新增日程信息表單，點擊已存在的日程彈出查看頁面，頁面中可以進行修改保存和刪除等；

1.2、添加：

1.3、 查看：

---

2、主界面代碼

直接看代碼，裏面有詳細的步驟：

<div class="layui-fluid">
	<div class="layui-card">
		<div class="layui-card-body">
            <div id='calendar'></div><!-- 此處就是放置日曆界面的div，注意id的使用 -->
		</div>
	</div>
</div>

<script>
    layui.use(['fullCalendar'], function() { // layUI加載fullCalendar插件
        var fullCalendar = layui.fullCalendar; // layUI聲明使用fullCalendar插件並創建其對象
            fboot = layui.fboot,
            $ = layui.jquery; // layUI聲明使用jquery
        fullCalendar.init("calendar", { //根據id初始化日曆的div
            plugins: ['dayGrid','interaction','timeGrid'],
            header: {  //定義日曆表的表頭有哪些信息、按鈕
            	left: 'prev,next,today',  // 此處是前翻、後翻、返回到當前時間，前翻後翻可用於年月週日等不同的時間視圖
                center: 'title',  // 定義爲title出現的是當前的時間或者時間段，年月週日四種視圖均有所差異
                right: 'dayGridMonth,timeGridWeek,timeGridDay' // 此處是定義日曆右邊有幾種時間視圖，代碼中的分別定義了月、周、日三種視圖的按鈕，定義好後點擊就會出現相應的視圖
              },
            defaultView: 'dayGridMonth',  //默認顯示視圖：dayGridMonth、timeGridWeek、timeGridDay
            allDaySlot : false, // 不單獨顯示全天的頭框，有興趣的可以試一下，此屬性默認爲true
            //unselectAuto: true, // 是否單擊頁面上的其他位置將導致清除當前選擇，此屬性默認爲true
            navLinks: true, //確定日期名稱和周名稱是否可單擊，此屬性默認爲false，設置爲true後月視圖日曆上的時間可被點擊直接進入日視圖
            editable: true, //確定是否可以修改日曆上的事件，此屬性默認爲false。
            //selectable: false, // 允許用戶通過單擊並拖動來突出顯示多個日期或時間段，默認false
            eventLimit: true, // 限制一天顯示的事件數。其餘的將出現在popover中，默認： false
            
            // events接口：加載日曆並將當前日曆的起止時間傳給後臺，經後臺處理後得到在起止時間段內所有日程
            events: function(info,callback){
                fboot.get('/oa/schedule/scheduleList', { // 後臺路徑
                    data: {
                    	// info是fullcalendar封裝的關於日曆的信息對象，可直接調用，裏面有此視圖的開始結束時間
                        start: info.startStr, 
                        end: info.endStr
                    },
                    // 後臺獲取的是一個list集合，裏面存放的是一條條日程信息
                    success: function(resp) {
                    	// 創建events數組對象，目的是：放入fullcalendar設定好的數據展示模式（還有json形式的等，不一定非要使用數組類型的）
                        var events = []; //
                        
                        // 此段是根據當前時間與每條數據的開始結束時間相匹對，以此來賦予背景顏色
                        var currentTime = new Date();
                        resp.map(function(eventEl) { // .map會將resp中的元素逐條處理，就像Java後臺中的forEach方法
                        	var bColor = null;
                        	if(currentTime < eventEl.startTime){
                        		bColor = 'green';
                        	}
                        	if(currentTime >= eventEl.startTime && currentTime <= eventEl.endTime){
                        		bColor = 'red';
                        	}
                        	if(currentTime > eventEl.endTime){
                        		bColor = 'slategray ';
                        	}
                        // 往events數組中放入fullcalender展示數據所需要的數據格式
                        events.push({
                                title: eventEl.title,// 日程標題
                                start: eventEl.startTime,// 日程開始時間
                                end: eventEl.endTime,// 日程結束時間
                                id: eventEl.id, // 日程id
                                color: bColor, // 背景色
                              });
                        })
                        // 數據裝載完成後，回調events方法
                        callback(events);
                    }
                });
            },
            // dateClick接口：點擊空白處的方法，此方法中的info是用戶點擊時間點的信息
            dateClick: function(info) {
            	// 獲得info中的時間
                var date = info.dateStr;
                fboot.modalForm('添加', '/oa/schedule/add', { // 聯繫後臺，獲得一個填寫新增的表單頁
                    formId: 'oaSchedule',
                    option: { area: ['670px', '410px'] },
                    param: {date: date},
                    callback: function(closeModal, formData) {// 表單點擊保存後獲得表單中的所有信息
                        fboot.post('/oa/schedule', {  // 保存數據到數據庫的後臺方法路徑
                            data: formData,  // 傳遞到後臺的數據
                            success: function() {
                                layer.closeAll('page'); // 保存成功後關閉彈出層的表單
                                location.reload();  // 刷新界面爲新增的日程信息
                            }
                        });
                    }
                });
            },
            // eventClick接口：單擊日曆上的日程信息方法，方法內部所使用的邏輯與新增的基本一樣
            eventClick: function(event) {
            	// 這是爲了獲得點被點擊日程的id值，此id值被放在event對象的event對象中，有興趣的同學可以打個斷點看看裏面都有什麼~
                var id = event.event.id;
                fboot.modalForm('日程信息', '/oa/schedule/edit', {
                    formId: 'oaSchedule',
                    option: { area: ['670px', '455px'] },
                    param: {id: id},
                    callback: function(closeModal, formData) {
                        fboot.put('/oa/schedule/' + id, {
                            data: formData,
                            success: function(result) {
                                layer.closeAll('page');
                                layer.msg('操作成功！');
                                location.reload();
                            }
                        });
                    }
                });
            }
        });
    });
</script>

剩下的關於修改、刪除等也就沒什麼的好記錄的了~

3、數據庫

CREATE TABLE `oa_schedule` (
  `id` bigint(20) NOT NULL COMMENT '日程ID',
  `title` varchar(32) NOT NULL COMMENT '日程標題',
  `content` varchar(255) DEFAULT NULL COMMENT '日程內容',
  `create_time` datetime NOT NULL COMMENT '日程創建時間',
  `create_user` varchar(16) DEFAULT NULL COMMENT '日程創建人姓名',
  `start_time` datetime NOT NULL COMMENT '日程開始時間',
  `end_time` datetime NOT NULL COMMENT '日程完成時間',
  `all_day` tinyint(1) unsigned NOT NULL COMMENT '是否全天【 true / false  】',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='日程信息表';

pass：歡迎多指正、交流，共同進步！

---

《END》