最近做课程表的项目，找了好多个插件感觉都不好用，无意间看到了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" 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> //获取当前日期 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