Recently, I found a lot of plug-ins that are not easy to use when working on the project of curriculum. I accidentally saw the full calendar, which is very simple and convenient. I posted a project page first
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- Calendar plug-in --> <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 Language pack --> <script src='/public/school/table/locale-all.js'></script> <!-- layui --> <link rel="stylesheet" href="/public/school/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/public/school/style/admin.css" 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> //Get current date var myDate = new Date(); var defaultDate = myDate.getFullYear() +'-'+(myDate.getMonth()+1)+'-'+myDate.getDate() $(document).ready(function() { $('#calendar').fullCalendar({ header: { //Display information at the top left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay,listMonth' }, defaultDate: defaultDate, //Default display date navLinks: true, // can click day/week names to navigate views defaultView:'agendaWeek', //Default view at initialization default display week allDaySlot: false, //Whether to display all-day slotLabelFormat:'H:mm', //Left time display format minTime : '06:00:00', //What time does it start on the left maxTime : '22:00:00', //What time does the left end locale: 'zh-cn', //Display Chinese selectable: true, //Set whether to be selected by clicking or dragging eventLimit: true, //If too much data exceeds the display height of the calendar grid, the extra data will not crowd out the grid, but will be displayed as +...more ，Click to display all data completely // Click the course information event and pop up the window eventClick: function(calEvent, jsEvent, view) { console.log('cycle_id:' + calEvent.id); //Course cycle clicked id console.log('sel_type:' + calEvent.sel_type); //Click course cycle type 1 single time 2 repetition // Pop up a page layer.open({ type: 2, title: 'Curriculum information', shadeClose: true, shade: [0.5, '#000'], maxmin: true, //Turn on the maximize minimize button area: ['900px', '650px'], content: "/school/Course_Table/cycleInfo.html?cycle_id="+calEvent.id, end: function () { // Refresh parent window location.reload(); } }); }, // Click the blank area to get the selected date time range and pop up the window select: function(startDate, endDate) { selDate = startDate.format('YYYY-MM-DD'); //Selected start date layer.open({ type: 2, title: 'Cycle scheduling', shadeClose: true, shade: [0.5, '#000'], maxmin: true, //Turn on the maximize minimize button area: ['900px', '650px'], content: "/school/Course_Table/addCycle2.html?selDate="+selDate, end: function () { // Refresh parent window location.reload(); } }); }, // Date display format views: { month: { titleFormat: 'YYYY year MM month' }, agenda: { titleFormat: 'YYYY year MM month DD day' }, week: { titleFormat: 'YYYY year MM month DD day' }, }, // Tips for mouse over use bootstorp Hint eventRender: function(eventObj, $el) { $el.popover({ content: eventObj.description, trigger: 'hover', placement: 'top', container: 'body' }); }, // Getting the data to display returns json format 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('network error'); } }, error:function () { layer.msg('network error'); } }); } }); }); </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" style="margin: 10px"> <div class="layui-card"> <div class="layui-card-body"> <div id='calendar'></div> </div> </div> </div> <script type="text/javascript"> //Load layui layui.use(['layer','element','form'], function(){ var layer = layui.layer ,element = layui.element ,form = layui.form; }); </script> </body> </html>
php backstage Code: Here I have encapsulated the format to be displayed in the backstage. I can take it out and use it directly in the foreground.
Note: title and start, i.e. title and start time, are required. Other parameters are optional. The start format is "Date T time", with a letter "T" in the middle, depending on your situation. The description content is the content to be displayed when you put the mouse on it
public function courseTable() { if (request()->isPost()) {
//Two-dimensional array $list = model('CourseTable')->getCourseTable($this->sid); foreach ($list as $key => $value) { $val['id'] = $value['id']; ///Curriculum cycle $val['sel_type'] = $value['sel_type']; ///Course cycle type 1 single time 2 repetition $val['title'] = 'Teacher:'.$value['teacher_name']. 'class:'.$value['grade_name']; $val['start'] = $value['date'].'T'.$value['start_time']; $val['end'] = $value['date'].'T'.$value['end_time']; $val['description'] = 'Teacher:'.$value['teacher_name'].'class:'.$value['grade_name'].'Classroom:'.$value['room_name']; $val['color'] = '#009688'; $val['textColor'] = '#fff'; $newList[] = $val; } return return_succ($newList); } return $this->fetch(); }
json data returned in the background
There are comments in the code, and you can leave messages if you don't understand.
There are documents in the official website, which can be studied slowly https://fullcalendar.io/docs