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(1)
Oct 09 PHP
php GeoIP的使用教程
Mar 09 PHP
php结合表单实现一些简单功能的例子
Jun 04 PHP
解析PHP多种序列化与反序列化的方法
Jun 06 PHP
Yii中render和renderPartial的区别
Sep 03 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
Oct 14 PHP
PHP中基本HTTP认证技巧分析
Mar 16 PHP
简单谈谈PHP中strlen 函数
Feb 27 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
Sep 22 PHP
PHP ADODB生成下拉列表框功能示例
May 29 PHP
php使用redis的几种常见操作方式和用法示例
Feb 20 PHP
TP5框架页面跳转样式操作示例
Apr 05 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP中extract()函数的定义和用法
2012/08/17 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
php封装一个异常的处理类
2017/06/08 PHP
JavaScript中的事件处理
2008/01/16 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
React key值的作用和使用详解
2018/08/23 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
Python处理PDF与CDF实例
2020/02/26 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
悦木之源美国官网:Origins美国
2016/08/01 全球购物
光声世纪笔试题目
2012/08/25 面试题
公司综合部的成员自我评价分享
2013/11/05 职场文书
中学生操行评语
2014/04/24 职场文书
船舶工程技术专业求职信
2014/08/07 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
家长会感言
2015/08/01 职场文书