时间:2021-05-26
最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了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" rel="external nofollow" media="all"><link rel="stylesheet" href="/public/school/style/admin.css" rel="external nofollow" 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 { 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 的内容是鼠标放上去要显示的内容
代码里有注释,有不懂的可以留言沟通。
官方网站里面有文档,可以慢慢研究 https://fullcalendar.io/docs
以上所述是小编给大家介绍的php使用fullcalendar日历插件的教程详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下:使用FullCalendar需要引用的文件1.css文件2.j
开发者可以使用FullCalendar创建强大的日历日程应用,FullCalendar提供了丰富的选项设置和方法调用,使得开发者可以轻松的创建各种功能的日历程序
前言最近老牌日历插件fullcalendar更新了v4版本,而且添加了Vue支持,所以用最新的fullcalendarv4制作一个完整日历体验一下,效果图:安装
Asp.netMVCscheduler的实现方法详解本例使用了fullcalendarjs:https://fullcalendar.io/1.view:@{V
哈哈,就在昨天笔者刚刚在Github上发布了一个基于VUE的日历组件。过去做日历都是需要引用jquerymoment引用fullCalendar.js的。几者加