最近做课程表的项目，找了好多个插件感觉都不好用，无意间看到了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. vue组件推荐

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  2. 转：Python: 什么是*args和**kwargs

    今天看源码的时候发现一个是*args和**kwargs,一看就能知道args是神马,就是所有参数的数组,kwargs就不知道了,google一下,一个人的blog写的比较简单明了,秒懂了~~kwarg ...

  3. 可能是把Java内存区域讲的最清楚的一篇文章

    写在前面(常见面试题) 下面是面试官可能在“Java内存区域”知识点问你的问题,快拿出小本本记下来! 基本问题: 介绍下Java内存区域(运行时数据区). Java对象的创建过程(五步,建议能默写出来 ...

  4. Python安装模块的几种方法

    一.方法1: 单文件模块 直接把文件拷贝到 $python_dir/Lib 二.方法2: 多文件模块,带setup.py 下载模块包,进行解压,进入模块文件夹,执行:python setup.py i ...

  5. Informatica

    安装 相关专题 关于Bulk加载模式 性能调优 性能瓶颈 性能瓶颈概览 性能瓶颈之Target 性能瓶颈之Source 性能瓶颈之Mapping 性能瓶颈之Session 性能瓶颈之System 性能 ...

  6. python元组和字典的简单学习

    元组(tuple) 用圆括号()标识,定义元组后,元组元素不可修改.如果想修改元组只能重新定义元组. 因为元组不可更改,所以也没有增删改等用法,主要语法就是访问元组元素,遍历元组. 访问元组元素: t ...

  7. [原创]k8exe2bat任意文件转Bat工具(WebShell无法上传EXE解决方案)

    http://qqhack8.blog.163.com/blog/static/114147985201126105626755/ 这是我2011年的东西了,当时用此方法可免杀很多马,至今依然有很大的 ...

  8. [原创]IIS提权工具-VBS提权脚本免杀生成器

    [原创]添加系统用户 VBS提权脚本随机加密生成器[K.8] 2011-05-05 02:42:53|  分类: 原创工具 VBS提权脚本随机加密生成器[K.8]  Author: QQ吻 QQ:39 ...

  9. 【WebAPI】从零开始学会使用.NET Core WebAPI

    介绍 以后会慢慢总结在项目使用中或者学习到的webAPI相关的知识,在这里做记录. 我会从最开始的如何创建WebAPI项目到项目的后续知识一点一点的开始讲述记录. 通过简单有效的方式,让我们能够快速的 ...

  10. sql server 性能调优之 资源等待SOS_SCHEDULER_YIELD

    一.概念 SOS_SCHEDULER_YIELD等待类型是一个任务自愿放弃当前的资源占用,让给其他任务使用.   这个等待类型与CPU有直接关系,与内存与也有间接关系,与CPU有关系是因为在sql s ...