最近做课程表的项目，找了好多个插件感觉都不好用，无意间看到了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" media="all">

<link rel="stylesheet" href="/public/school/style/admin.css" 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();

    }

后台返回的json数据

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

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

php使用fullcalendar日历插件的更多相关文章

  1. fullcalendar日历插件的使用并动态增删改查

    我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...

  2. FullCalendar日历插件说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  3. FullCalendar 日历插件中文说明文档

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  4. FullCalendar日历插件(中文API)

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  5. FullCalendar日历插件说明文档（看到这篇手册，解决了困扰我3天的js问题）

    FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...

  6. fullcalendar 日历插件3.9.0 -- 基本插件使用

    以下主要结构,直接执行即可以使用 ,仅用参考: html: <!DOCTYPE html> <html> <head> <title>test</ ...

  7. fullcalendar日历插件

    https://www.helloweba.net/javascript/231.html

  8. 日历插件FullCalendar应用：(二)数据增删改

    接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...

  9. jQuery插件实战之fullcalendar（日历插件）Demo

    jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...

随机推荐

  1. 第35节：Java面向对象中的多线程

    Java面向对象中的多线程 多线程 在Java面向对象中的多线程中,要理解多线程的知识点,首先要掌握什么是进程,什么是线程?为什么有多线程呢?多线程存在的意义有什么什么呢?线程的创建方式又有哪些?以及 ...

  2. pycharm安装plugins

    1 . 启动 PyCharm 软件 2 . 打开 设置(Setting) 窗口.(操作:File -> Setting 或者 按快捷键 Ctrl + Alt + S) 3 . 在搜索框里面搜索: ...

  3. 关于 java.toString() ,(String),String.valueOf的区别

    今天,在群里有一个妹子问我一个问题,我开始时草草帮她解答,后来她说她还是没懂,然后自己仔细看了看,才发现自己其实更本没说清楚其中的道理,在查看源代码和API然后在网上看看前辈们的文章才知道了,这个问题 ...

  4. 运维笔记--ubuntu rm删除文件后 恢复

    待补充 特别注意:umount分区,尝试恢复文件,文件夹(目录),全部文件 https://www.cnblogs.com/wangxiaoqiangs/p/5630288.html https:// ...

  5. mysql 开发进阶篇系列 44 物理备份与恢复( 热备份xtrabackup 工具介绍)

    一.概述 物理备份和恢复又分为冷备份和热备份.与逻辑备份相比,它最大优点是备份和恢复的速度更快.因为物理备份的原理都是基于文件的cp. 1.1 冷备份 冷备份就是停掉数据库服务.这种物理备份一般很少使 ...

  6. Linux编程 18 安装软件程序(yum工具对软件包安装，删除，更新介绍)

    一.   概述 本篇介绍在linux上见到的各种包管理系统(package management system,PMS)用来进行软件安装,管理,删除的命令行工具.PMS是利用一个数据库来记录各种相关内 ...

  7. Web中的积累：外观模式 Facade

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 壹 前言 目测好久没写文章了,距离上一篇文章也有二十多天.我是怎么了?哈 ...

  8. MySQL导入导出实践

    最近一次数据迁移,需要将MySQL的数据导出.处理后导入到新表和ES.这里做个简单记录,方便后续查询. 注: 为了写文章方便及隐私安全,实际内容会有所简化.例如表结构简化.数据库连接部分全部用 xxx ...

  9. vue-14-less 语法的使用

    vue-15-rem-less 在计算手机端页面的时候, 使用rem和less的方式, 可以方便的设置需要的大小等 1, 在index.html中添加rem的script 代码 在head中添加 &l ...

  10. C# 获取 sha256

    C# 获取 sha256, 输入可以是 字符串,也可以是 字节流流: 自定义的输入类型的枚举: public enum Sha26ParseType { StringType, StreamType ...