溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何在php中使用fullcalendar日歷插件？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- 日歷插件 --> <link href='/public/school/table/fullcalendar.min.css' rel='stylesheet' /> <link href='/public/school/table/fullcalendar.print.min.css' rel='stylesheet' media='print' /> <script src='/public/school/table/moment.min.js'></script> <script src='/public/school/table/jquery.min.js'></script> <script src='/public/school/table/fullcalendar.min.js'></script> <!-- fullcalendar語言包 --> <script src='/public/school/table/locale-all.js'></script> <!-- layui --> <link rel="stylesheet" href="/public/school/layui/css/layui.css" rel="external nofollow" media="all"> <link rel="stylesheet" href="/public/school/style/admin.css" rel="external nofollow" media="all"> <script src="/public/school/layui/layui.js"></script> <!-- bootstrap --> <link href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' rel='stylesheet' /> <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script> </head> <script> //獲取當前日期 var myDate = new Date(); var defaultDate = myDate.getFullYear() +'-'+(myDate.getMonth()+1)+'-'+myDate.getDate() $(document).ready(function() { $('#calendar').fullCalendar({ header: { //頂部顯示信息 left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay,listMonth' }, defaultDate: defaultDate, //默認顯示日期 navLinks: true, // can click day/week names to navigate views defaultView:'agendaWeek', //初始化時的默認視圖默認顯示周 allDaySlot: false, //是否顯示all-day slotLabelFormat:'H:mm', //左側時間顯示格式 minTime : '06:00:00', //左側時間從幾點開始 maxTime : '22:00:00', //左側時間從幾點結束 locale: 'zh-cn', //顯示中文 selectable: true, //設置是否可被單擊或者拖動選擇 eventLimit: true, //如果數據過多超過日歷格子顯示的高度時，多出去的數據不會將格子擠開，而是顯示為 +...more ，點擊后才會完整顯示所有的數據 // 點擊課程信息事件，并彈窗 eventClick: function(calEvent, jsEvent, view) { console.log('cycle_id:' + calEvent.id); //點擊的課程周期id console.log('sel_type:' + calEvent.sel_type); //點擊的課程周期類型 1單次 2重復 // 彈出一個頁面 layer.open({ type: 2, title: '課程表信息', shadeClose: true, shade: [0.5, '#000'], maxmin: true, //開啟最大化最小化按鈕 area: ['900px', '650px'], content: "/school/Course_Table/cycleInfo.html?cycle_id="+calEvent.id, end: function () { // 刷新父窗口 location.reload(); } }); }, // 點擊空白區域，獲取選擇的日期時間范圍，并彈窗 select: function(startDate, endDate) { selDate = startDate.format('YYYY-MM-DD'); //選中的開始日期 layer.open({ type: 2, title: '周期排課', shadeClose: true, shade: [0.5, '#000'], maxmin: true, //開啟最大化最小化按鈕 area: ['900px', '650px'], content: "/school/Course_Table/addCycle2.html?selDate="+selDate, end: function () { // 刷新父窗口 location.reload(); } }); }, // 日期顯示格式 views: { month: { titleFormat: 'YYYY年MM月' }, agenda: { titleFormat: 'YYYY年MM月DD日' }, week: { titleFormat: 'YYYY年MM月DD日' }, }, // 鼠標移上的提示 使用bootstorp的提示 eventRender: function(eventObj, $el) { $el.popover({ content: eventObj.description, trigger: 'hover', placement: 'top', container: 'body' }); }, // 獲取要顯示的數據 返回的是json格式 events: function(start,end,timezone, callback) { $.ajax({ url: "{:url('courseTable')}", dataType: 'json', type:"POST", success: function(data) { if (data.status == 0) { callback(data.msg); }else{ layer.msg('網絡錯誤'); } }, error:function () { layer.msg('網絡錯誤'); } }); } }); }); </script> <style> body { /*margin: 40px 10px;*/ padding: 0; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; font-size: 14px; } #calendar { max-width: 1200px; margin: 0 auto; } </style> </head> <body> <div class="layui-fluid" > <div class="layui-card"> <div class="layui-card-body"> <div id='calendar'></div> </div> </div> </div> <script type="text/javascript"> //加載layui layui.use(['layer','element','form'], function(){ var layer = layui.layer ,element = layui.element ,form = layui.form; }); </script> </body> </html>
php后臺代碼：這里我把要顯示的格式在后臺封裝好了，到前臺直接取出來拿來用就可以了。
注意：title和start即標題和開始時間是必須要有的，其他的參數可選，其中 start 格式是“日期T時間”，中間有個字母“T”，看自己情況，description 的內容是鼠標放上去要顯示的內容
public function courseTable()
{
if (request()->isPost()) {
//二維數組
$list = model('CourseTable')->getCourseTable($this->sid);
foreach ($list as $key => $value) {
$val['id'] = $value['id']; ///課程周期表
$val['sel_type'] = $value['sel_type']; ///課程周期類型 1單次 2重復
$val['title'] = '教師:'.$value['teacher_name']. '班級:'.$value['grade_name'];
$val['start'] = $value['date'].'T'.$value['start_time'];
$val['end'] = $value['date'].'T'.$value['end_time'];
$val['description'] = '教師:'.$value['teacher_name'].'班級:'.$value['grade_name'].'教室:'.$value['room_name'];
$val['color'] = '#009688';
$val['textColor'] = '#fff';
$newList[] = $val;
}
return return_succ($newList);
}
return $this->fetch();
}
1、執行速度快。2、具有很好的開放性和可擴展性。3、PHP支持多種主流與非主流的數據庫。4、面向對象編程：PHP提供了類和對象。5、版本更新速度快。6、具有豐富的功能。7、可伸縮性。8、功能全面，包括圖形處理、編碼與解碼、壓縮文件處理、xml解析等。
看完上述內容，你們掌握如何在php中使用fullcalendar日歷插件的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
