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" 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日历插件的更多相关文章
- fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
- FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
- FullCalendar 日历插件中文说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
- FullCalendar日历插件(中文API)
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
- FullCalendar日历插件说明文档（看到这篇手册，解决了困扰我3天的js问题）
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
- fullcalendar 日历插件3.9.0 -- 基本插件使用
以下主要结构,直接执行即可以使用 ,仅用参考: html: <!DOCTYPE html> <html> <head> <title>test</ ...
- fullcalendar日历插件
https://www.helloweba.net/javascript/231.html
- 日历插件FullCalendar应用：(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- jQuery插件实战之fullcalendar（日历插件）Demo
jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...
随机推荐
- 从零开始单排学设计模式「装饰模式」黑铁 I
阅读本文大概需要 3.6 分钟. 本篇是设计模式系列的第四篇,虽然之前也写过相应的文章,但是因为种种原因后来断掉了,而且发现之前写的内容也很渣,不够系统. 所以现在打算重写,加上距离现在也有一段时间了 ...
- Java学习笔记一：数据类型I
GitHub代码练习地址:https://github.com/Neo-ML/JavaPractice/blob/master/IntPractice1.java https://github.com ...
- 第一节：学会Java前提-手把手教你配置JDK环境变量
前言 大家好,今天写一遍学会Java前提-手把手教你配置JDK环境变量的概述,希望你们喜欢 下载地址 下载jdk,和eclipse就比较简单了,提供JDK 9 地址: http://www.oracl ...
- 'QueryDict' object is not callable 错误解析
我把request内置库和 requests库 给搞混了 requests使用来发送请求的, request 而是用来获取数据的 别看只有一个单词只差,却让我找了大半天 requests.post( ...
- python基础-分支判断语句(4)
1.分支判断语句 1.单一if结构 2.if-else结构 3.if-elif-else结构 4.if嵌套结构 2.单一if结构 只有一种情况的时候 if 条件: 执行语句 说明: if后面的条件成立 ...
- 分布式事务解决方案以及 .Net Core 下的实现（上）
数据一致性是构建业务系统需要考虑的重要问题 , 以往我们是依靠数据库来保证数据的一致性.但是在微服务架构以及分布式环境下实现数据一致性是一个很有挑战的的问题.最近在研究分布式事物,分布式的解决方案有很 ...
- Java 容器 & 泛型：六、容器讲到为什么要使用泛型
Writer:BYSocket(泥沙砖瓦浆木匠) 微博:BYSocket 豆瓣:BYSocket ArrayList是集合类中无处不在的,泛型也是,泛型对集合类尤其有用.但是为啥要使用泛型?理解好了这 ...
- RocketMQ入门案例
学习RocketMQ,先写一个Demo演示一下看看效果. 一.服务端部署 因为只是简单的为了演示效果,服务端仅部署单Master模式 —— 一个Name Server节点,一个Broker节点.主要有 ...
- Log4Net在MVC下的配置以及运用线程队列记录异常信息
Log4Net是用来记录日志的,可以将程序运行过程中的信息输出到一些地方(文件.数据库.EventLog等),日志就是程序的黑匣子,可以通过日志查看系统的运行过程,从而发现系统的问题.日志的作用:将运 ...
- centos7下安装samba服务器
samba笔记: http://services.linuxpanda.tech/%E7%BD%91%E7%BB%9C%E6%96%87%E4%BB%B6%E5%85%B1%E4%BA%AB/samb ...