php使用fullcalendar日历插件详解


Posted in PHP onMarch 06, 2019

最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面

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" 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();
 }

php使用fullcalendar日历插件详解

代码里有注释,有不懂的可以留言沟通。

官方网站里面有文档,可以慢慢研究 https://fullcalendar.io/docs

以上所述是小编给大家介绍的php使用fullcalendar日历插件的教程详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
如何使用脚本模仿登陆过程
Nov 22 PHP
php实现的简单压缩英文字符串的代码
Apr 24 PHP
php 404错误页面实现代码
Jun 22 PHP
关于页面优化和伪静态
Oct 11 PHP
PHP Zip解压 文件在线解压缩的函数代码
May 26 PHP
使用PHP导出Word文档的原理和实例
Oct 21 PHP
PHP获取MAC地址的具体实例
Dec 13 PHP
php+mysql大量用户登录解决方案分析
Dec 29 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
Sep 22 PHP
适合PHP初学者阅读的4本经典书籍
Sep 23 PHP
PHP实现的ID混淆算法类与用法示例
Aug 10 PHP
掌握PHP垃圾回收机制详解
Mar 13 PHP
PHP封装XML和JSON格式数据接口操作示例
Mar 06 #PHP
浅谈PHP封装CURL
Mar 06 #PHP
Yaf框架封装的MySQL数据库操作示例
Mar 06 #PHP
PHP实现的敏感词过滤方法示例
Mar 06 #PHP
详解PHP 二维数组排序保持键名不变
Mar 06 #PHP
PHP获取ttf格式文件字体名的方法示例
Mar 06 #PHP
php ajax confirm 删除实例详解
Mar 06 #PHP
You might like
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php 定义404页面的实现代码
2012/11/19 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP实现获取毫秒时间戳的方法【使用microtime()函数】
2019/03/01 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript数组的使用
2013/03/28 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python3中os.path模块下常用的用法总结【推荐】
2018/09/16 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
如何基于Python按行合并两个txt
2020/11/03 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
教师节慰问信
2015/02/15 职场文书
三行辞职书范文
2015/02/26 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
公司新员工欢迎词
2015/09/30 职场文书
幼儿园大班教学反思
2016/03/02 职场文书