TP5.1 使用 fullcalendar日历插件

链接：https://www.jb51.net/article/157440.htm

 

html

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset='utf-8'/>
  5     <link href='__ADMIN__/lib/main.css' rel='stylesheet'/>
  6     <link rel="stylesheet" href="__ADMIN__/layui/css/layui.css" media="all">
  7     <script src='__ADMIN__/lib/main.js'></script>
  8     <script src="__ADMIN__/lib/locales/zh-cn.js"></script>
  9     <script src="__ADMIN__/layui/layui.js" charset="utf-8"></script>
 10     <script>
 11 
 12         document.addEventListener('DOMContentLoaded', function () {
 13             var calendarEl = document.getElementById('calendar');
 14             layui.use(['table', 'laydate'], function () {
 15                 var $ = layui.$, laydate = layui.laydate;
 16                 laydate.render({
 17                     elem: '#tag' //指定元素
 18                 });
 19                 var calendar = new FullCalendar.Calendar(calendarEl, {
 20                     headerToolbar: {
 21                         left: 'prev,next today prevYear,nextYear',
 22                         center: 'title',
 23                         right: 'dayGridMonth,timeGridDay,listMonth'
 24                     },
 25                     timezone: 'Asia/Shanghai',
 26                     locale: 'zh-cn',
 27                     navLinks: true, // can click day/week names to navigate views
 28                     businessHours: true, // display business hours
 29                     allDayText: '全天',  //日历上显示全天的文本
 30                     selectable: true,
 31                     editable: false,
 32                     dayMaxEventRows: true, // 限制条数
 33                     loading: function (isLoading, view) {
 34                         var load = "";
 35                         if (isLoading) {
 36                             load = layer.load(1);
 37                         }
 38                         layer.close(load);
 39                     },
 40                     events: {
 41                         url: '{:url("admin/Calendar/getCalendar")}',
 42                         method: 'get',
 43                         failure: function (res) {
 44                             console.log(res);
 45                             alert('there was an error while fetching events!');
 46                         },
 47                         color: '#9ACD32',   // a non-ajax option
 48                         textColor: 'black' // a non-ajax option
 49                     },
 50 
 51                     navLinkDayClick: function (date, jsEvent) {
 52                         console.log(date);
 53                         window.open('{:url("admin/Calendar/groupDirInfo")}?date=' + set_time(Date.parse(date) / 1000));
 54                     }
 55                 });
 56                 calendar.render();
 57 
 58             });
 59 
 60         });
 61 
 62         function set_time(str) {
 63             var n = parseInt(str) * 1000;
 64             var D = new Date(n);
 65             var year = D.getFullYear();//四位数年份
 66 
 67             var month = D.getMonth() + 1;//月份(0-11),0为一月份
 68             month = month < 10 ? ('0' + month) : month;
 69 
 70             var day = D.getDate();//月的某一天(1-31)
 71             day = day < 10 ? ('0' + day) : day;
 72 
 73             var hours = D.getHours();//小时(0-23)
 74             hours = hours < 10 ? ('0' + hours) : hours;
 75 
 76             var minutes = D.getMinutes();//分钟(0-59)
 77             minutes = minutes < 10 ? ('0' + minutes) : minutes;
 78 
 79             // var seconds = D.getSeconds();//秒(0-59)
 80             // seconds = seconds<10?('0'+seconds):seconds;
 81             // var week = D.getDay();//周几(0-6),0为周日
 82             // var weekArr = ['周日','周一','周二','周三','周四','周五','周六'];
 83 
 84             var now_time = year + '-' + month + '-' + day;
 85             return now_time;
 86         }
 87     </script>
 88     <style>
 89 
 90         body {
 91             margin: 10px 10px;
 92             padding: 0;
 93             font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 94             font-size: 14px;
 95         }
 96 
 97         #calendar {
 98             max-width: 1500px;
 99             margin: 0 auto;
100         }
101 
102         .demoTable {
103             margin-bottom: 20px;
104         }
105     </style>
106 </head>
107 <body>
108 
109 <div style="padding: 20px; background-color: #F2F2F2;">
110     <div class="layui-row layui-col-space15">
111         <div class="layui-col-md12">
112             <div class="layui-card">
113                 <div class="layui-card-body">
114                     <div class="layui-inline">
115                         <input class="layui-input" name="usernName" id="usernName" placeholder="姓名" autocomplete="off">
116                     </div>
117                     <div class="layui-inline">
118                         <input class="layui-input" name="tag" placeholder="开始时间" id="tag">
119                     </div>
120 
121                     <button class="layui-btn" id="seach">搜索</button>
122                 </div>
123             </div>
124         </div>
125     </div>
126 </div>
127 
128 
129 <div id='calendar'></div>
130 
131 </body>
132 </html>

php

 public function getCalendar(Request $request)
    {
        $start = $request->get('start');
        $end = $request->get('end');
        $groupDir = GGroupDir::models()->getGroupDirByInterval($start, $end);
        $returnArr = [];
        foreach ($groupDir as $k => $v) {
            $returnArr[$k] = [
                "id" => $v['dirid'],
                "title" => $v['title'],
                "start" => $v['stime'] * 1000, // UNIX时间戳
                "end" => $v['etime'] * 1000,
            ];
        }
        return returnArr;
    }

　　

model

/**
     * 时间区间查询
     * @param $start
     * @param $end
     * @return mixed
     */
    public function getGroupDirByInterval($start, $end)
    {
        return self::field("dirid,title,stime,etime")
            ->where("stime", ">=", strtotime($start))
            ->where("etime", "<=", strtotime($end))
            ->where("stime", "<>", "0")
            ->where("etime", "<>", "0")
            ->all()
            ->toArray();
    }

　　

posted @ 2021-08-09 16:15  上官二狗子  阅读(194)  评论(0)    收藏  举报