|
年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/java script">
//加载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();
}
后台返回的json数据
代码里有注释，有不懂的可以留言沟通。
官方网站里面有文档，可以慢慢研究 https://fullcalendar.io/docs
|