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 相关文章推荐
模仿OSO的论坛(四)
Oct 09 PHP
PHP关联链接常用代码
Nov 05 PHP
基于wordpress主题制作的具体实现步骤
May 10 PHP
php预定义变量使用帮助(带实例)
Oct 30 PHP
Linux下手动编译安装PHP扩展的例子分享
Jul 15 PHP
PHP获取文件行数的方法
Jun 10 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
Aug 28 PHP
php单元测试phpunit入门实例教程
Nov 17 PHP
PHP基于curl post实现发送url及相关中文乱码问题解决方法
Nov 25 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
Aug 04 PHP
Centos7 Yum安装PHP7.2流程教程详解
Jul 02 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
Oct 18 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(1)
2006/10/09 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
Javascript引用指针使用介绍
2012/11/07 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
jQuery的框架介绍
2016/05/11 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
遍历json获得数据的几种方法小结
2017/01/21 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
JavaScript创建对象方法实例小结
2018/09/03 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
森海塞尔美国官网:Sennheiser耳机与耳麦
2017/07/19 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
班组长安全职责
2014/01/05 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书