首页 > > 网络编程 > Php编程 >

php使用fullcalendar日历插件

2019-01-11 08:37:08来源：博客园阅读 ()

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