php使用fullcalendar日历插件
发布时间：2024-10-10 点击：63
最近做课程表的项目，找了好多个插件感觉都不好用，无意间看到了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 style=margin: 10px> <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(); }代码里有注释，有不懂的可以留言沟通。
官方网站里面有文档，可以慢慢研究 https://fullcalendar.io/docs
欧洲云服务器价格对比表
云计算服务器租用
网站空间租用多少钱
转出域名解锁-域名及账户问题
云服务器怎么远程打开
腾讯云12m宽带服务器多少钱
【马鞍山seo】网页标题错误的解决方法
邮箱解析异常-企业邮局
<!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 style=margin: 10px> <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(); }代码里有注释，有不懂的可以留言沟通。
官方网站里面有文档，可以慢慢研究 https://fullcalendar.io/docs
欧洲云服务器价格对比表
云计算服务器租用
网站空间租用多少钱
转出域名解锁-域名及账户问题
云服务器怎么远程打开
腾讯云12m宽带服务器多少钱
【马鞍山seo】网页标题错误的解决方法
邮箱解析异常-企业邮局