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 相关文章推荐
PHP文本数据库的搜索方法
Oct 09 PHP
mysql5详细安装教程
Jan 15 PHP
织梦模板标记简介
Mar 11 PHP
在普通HTTP上安全地传输密码
Jul 21 PHP
php执行sql语句的写法
Mar 10 PHP
谨慎使用PHP的引用原因分析
Sep 06 PHP
PHP设计模式之迭代器模式的深入解析
Jun 13 PHP
php实现下载限制速度示例分享
Feb 13 PHP
php图片处理函数获取类型及扩展名实例
Nov 19 PHP
thinkPHP实现多字段模糊匹配查询的方法
Dec 01 PHP
PHP实践教程之过滤、验证、转义与密码详解
Jul 24 PHP
使用composer命令加载vendor中的第三方类库 的方法
Jul 09 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
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[02:56]DOTA2英雄基础教程 巨魔战将
2013/12/10 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python列表计数及插入实例
2014/12/17 Python
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
Python 一句话生成字母表的方法
2019/01/02 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
初中生个人学习的自我评价
2013/12/04 职场文书
酒店端午节促销方案
2014/02/18 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
公司开业致辞
2015/07/29 职场文书
决心书格式范文
2015/09/23 职场文书
升学宴学生致辞
2015/09/29 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android