php使用fullcalendar日历插件详解

最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了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();
 }

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

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

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

(0)

相关推荐

  • JavaWeb项目FullCalendar日历插件使用的示例代码

    本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件 <link href="${base}/assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="external nofollow" rel="stylesheet" type="text/c

  • FullCalendar日历插件应用之数据展现(一)

    开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序. 由于项目需求,需要通过日历的方式展现某些数据,在网上搜索了很多日历的插件,觉得比较好用的还是fullCalendar,下面是我写的一个简单Demo,如有不足,请多多指正!!! 一.引入必要的文件: <link href="Scripts/Plugins/fullcalendar.css" rel="style

  • php使用fullcalendar日历插件详解

    最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 <!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <!-- 日历插件 --> <link href='/public/school/table/fullcalendar.min.css' rel='stylesheet' /> <link href

  • IntelliJ IDEA 刷题利器 LeetCode 插件详解

    IDEA整合LeetCode插件,可以在 IDEA 本地编辑代码并且运行提交,还能关联自己的账号,非常实用. 下载安装 配置 点击File->Settings->Tools->leetcode plugin,如图: 参数说明: Custom code template: 开启使用自定义模板,否则使用默认生成格式 CodeFileName: 生成文件的名称,默认为题目标题 CodeTemplate: 生成题目代码的内容,默认为题目描述和题目代码 TemplateConstant: 模板常用

  • JavaSE系列基础包装类及日历类详解

    目录 1. 基本类型包装类 1.1 概述 1.2 Integer类的概述与使用 1.3 int和String的相互转换 1.4 案例-字符串中数据排序 1.5 自动装箱和拆箱 2. Date类 2.1 Date常用方法 3. SimpleDateFormat类 3.1 案例-日期工具类 4. Calendar类-日历 4.1 Calendar 的常用方法 1. 基本类型包装类 1.1 概述 它用于基本数据类型与字符串之间的转换 举例: public class IntegerDemo { pub

  • Vue组件化(ref,props, mixin,.插件)详解

    目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo

  • js实现符合国情的日期插件详解

    这次开始的项目是PC版的,貌似有2年没正儿八经的折腾PC端了. 言归正传,这次功能中有个选择日期段的功能,本来不麻烦的事情,但是PM非要参照另外一个网站的效果来做,把别人代码扒下来一看,我去,08年的插件,很多功能不能满足当前,PM非要那效果,时间又TM有限,就又找了个国外的插件daterangepicker,基于bootstrap,跟需求长得很像,功能非常强大,需求都能满足,但是...但是,PM和测试说不好用...折腾了半天源代码,优化了下,时间来不及只能凑合用着. 重新动手写了个.依赖jqu

  • Bootstrap滚动监听(Scrollspy)插件详解

    滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以向顶部导航添加滚动监听行为: 1.通过 data 属性:向您想要监听的元素(通常是

  • JS实现图片放大镜插件详解

    前  言 我们大家经常逛各种电商类的网站,商品的细节就需要用到放大镜,这个大家一定不陌生,今天我们就做一个图片放大镜的插件,来看看图片是如何被放大的-- 先看一下我们要是实现的最终效果是怎么样的 看完效果,大家有思路了吗,没有的话,我们一起来看一下是如何实现的~ 1实现思路 ① 要实现指上后放大的效果,需要做三个div,一个用来放原图,另一个用来放放大效果的div,最后一个是鼠标指上后需要放大部分的div(这个div我们用p标签来代替). ② 确定放大比例,最重要的一点,鼠标指上的div与放大效

  • js 博客内容进度插件详解

    前面的话 最近在复习自己写的博客,但有的博客内容很长,长到不知道多少时间可以读完.这时,就有种泄气的冲动.但,如果能够提供一个博客内容进度的插件,根据所读内容的多少,显示进度条,让自己对所读的内容进度心里有数,可以让自己平静下来,一点一点读下去.本文将详细介绍博客内容进度插件的实现 效果演示 无论是通过鼠标滚轮,还是拖动滚动条,也或者是按空格键,只要发生了页面的滚动操作,就会触发页面底部博客内容进度条的变化.根据当前内容的多少计算与博客所有内容的比例,最终对应成进度条的宽度.当鼠标移入进度条范围

随机推荐