fullcalendar官网:https://fullcalendar.io/插件下载地址(v5.3.2版本):https://github.com/fullcalendar/fullcalendar/releases
项目中用的是 LayerUi弹窗+fullcalendar日历插件,上面是效果图
我这里用的是v5.3.2版本,5.x以上版本好像改版了,命令与4.X完全不一样
注意:日历插件里面的表格是 自定义的HTML代码
演示效果如下:
BUG
1.就是点击单元格后,弹出窗口,填完数据以后,日历是全局渲染,性能会很差
2.点击单元格,弹出窗口的时候,没有办法获取单元格的数据,我采用的是接口获取当前日期的数据,性能差
3.点击单元格交互响应慢,体验不是太好
以上如果有好的方法,欢迎留言交流谢谢
如果不介意我代码中的BUG,那就开始把!!
====================================
下载下的fullcalendar安装包 在examples也有官方自带的一些例子
1.引入js
zh-cn.js必须要有,否则默认是英文
<link rel="stylesheet" href="static/libs/fullcalendar/lib/main.css" >
<script src="static/libs/fullcalendar/js/jquery.min.js" type="text/javascript" ></script>
<script src="static/libs/fullcalendar/lib/main.js" type="text/javascript" ></script>
<script src="static/libs/fullcalendar/lib/locales/zh-cn.js" type="text/javascript" ></script>
2.css代码
按需引入
<style>
.box-time{
display: flex;
justify-content: space-between;
align-items: center;
width: 278px;
}
.time{
border: 1px solid #D2D2D2;
background-color: #f7f7f7;;
height: 36px;
line-height: 36px;
width: 100px;
text-align: center;
}
body {
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
.layui-form-item{
margin: 20px 0px;
}
</style>
3.html端
fullcalender日历就只有 <div id='calendar' ></div>
这一句,其他的都是layerUi的
<div class="layui-inline" style="max-width: 1100px;display: flex;justify-content: space-between;align-items: center;margin: 0px auto">
<div class="box-time">
<div class="time" >选择日期</div>
<div class="layui-input-inline" style="float: left">
<!--background-color: #f2f2f2;-->
<input type="text" class="layui-input" id="test3" placeholder="yyyy-MM">
</div>
</div>
</div>
<div id='calendar' ></div>
4.js代码
fullcalendar核心代码是 document.addEventListener
里面的
//日期范围
var monthRangeDateStr ='#(nowRangeDateStr??)';
//请求的Url
var listUrl = '#(path)/manager/censusManager/dtStatisticBusiness/list_airport?monthRangeDateStr='+monthRangeDateStr;
//日历定义为全局变量,方便刷新日历
var calendar = "";
var table = "";
//日历的方法
document.addEventListener('DOMContentLoaded', function() {
//绑定ID
var calendarEl = document.getElementById('calendar');
//核心方法
calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'zh-cn',//日历的语言,中文,必须引入开发的zh-cn的js
// aspectRatio: 1.2,//日历的宽比 可以先忽略
height: 650, //日历高度
showNonCurrentDates:false,//在月视图中,应该完全渲染上个月还是下个月的日期。为false代表非本月的数据,置灰
//日历上方的导航栏的值,我这里置空了,因为我这里是自定义日历的导航栏,所以不需要自带的导航栏属性 (下面每个属性注释后面的值,就是原本的值)
headerToolbar: {
left: '',//prevYear,prev,next,nextYear
center: '',//title
right: ''//dayGridMonth,dayGridWeek,dayGridDay
},
contentHeight: 650,//内容的高度,建议与日历的高度保持一致,这个属性还没试出来具体效果
fixedWeekCount:false,//默认显示6行,现在插件随机4-5行
navLinks: false, // 点击一天后发生的情况,就是禁止点击日历 每个单元格里面的数字日期
editable: true,//允许编辑表格
//往日历添加数据的核心方法
//events.push添加 ,我这里添加的是自定义的html
events: function(arg, callback) {
var events = [];
$.ajax({
url: "#(path)/manager/censusManager/dtStatisticBusiness/list_fullcalender_airport/",
data: {
start_date:arg.startStr,
end_date:arg.endStr
},
type: "POST",
success: function (data) {
if(data.code =='0'){
for (var i=0; i<data.data.length; i++)
{
var singleData1 = data.data[i];
if(singleData1.transport_pre!=null&&singleData1.transport_pre!=''){
//日期时间按顺序 加一个小时 不然排序错误
var reportDate = stringToDate(singleData1.report_date);
var addHour = reportDate.setHours(reportDate.getHours() + 2);
events.push({
title: '<div style="font-size: 16px;display: flex;align-items: center"><span style="margin:0 5px;width:10px;height:10px;border-radius:50%;background-color:cadetblue;display: block"></span>'+singleData1.transport_pre+'</div>',
start: addHour,
editable: false,
allDay: false,
// backgroundColor: '#2C3E50',
//borderColor: '#2C3E50'
});
}
//渲染到日历
callback(events);
}
}
});
},
//html内容前置条件,如果没有这一句,自定义的html不生效,必须
eventContent: function(arg, createElement) {
var italicEl = document.createElement('span');
italicEl.innerHTML = arg.event._def.title
var arrayOfDomNodes = [italicEl]
return {
domNodes: arrayOfDomNodes
}
},
//点击事件的回调
eventClick: function(info) {
//info.event.startStr.substr(0,10) 表示当前点击单元的日期
SingleData(info.event.startStr.substr(0,10));
},
//点击没有事件单元格的回调
dateClick: function(info) {
//alert('Clicked on: ' + info.dateStr);
// alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
//alert('Current view: ' + info.view.type);
SingleData(info.dateStr);
},
});
calendar.render();
});
//日历修改数据接口
// calendar.refetchEvents(); 核心方法,重新刷新日历
function SingleData(report_date) {
//查询当前日期的数据
$.ajax({
url: "#(path)/manager/censusManager/dtStatisticBusiness/singledata_airport/",
data: {
report_date: report_date
},
type: "POST",
success: function (data) {
if(data.code =='0'){
var passenger_pre = null;
//undefined的问题
if(data.data.passenger_pre!=undefined&&data.data.passenger_pre!=null&&data.data.passenger_pre!=""){
passenger_pre = data.data.passenger_pre;
}else{
passenger_pre="";
}
//layerUi的弹窗
layui.use('layer', function(){
var $ = layui.jquery, layer = layui.layer;
layer.open({
type: 1 //此处以iframe举例
,title: report_date+'数据上报'
,area: ['450px', '320px']
,offset: 'auto'
,content: ' <div style="text-align: center"> <div class="layui-form-item">\n' +
' <div class="layui-inline">\n' +
' <div class="layui-form-label" style="width: 120px">旅客吞吐量(万人)</div>\n' +
' <div class="layui-input-inline">\n' +
' <input type="tel" name="phone" id="passengerData" value="'+ passenger_pre+'" lay-verify="required|phone" autocomplete="off" class="layui-input">\n' +
' </div>\n' +
' </div>\n' +
' </div> </div>'
,btn: ['提交', '关闭'] //只是为了演示
,yes: function(){
var passengerData = $('#passengerData').val();
var transportData = $('#transportData').val();
var cargoData = $('#cargoData').val();
/*
if (chanlContent == "") {
layer.alert("退回内容不可为空", {icon: 2});
return false;
}*/
$.ajax({
url: "#(path)/manager/censusManager/dtStatisticBusiness/updateSingle/",
data: {
report_date: report_date,
passenger_pre: passengerData,
transport_pre:transportData,
cargo_pre: cargoData
},
type: "POST",
success: function (data) {
if(data.code =='success'){
//刷新日历事件
calendar.refetchEvents();
}
layer.closeAll();
}
});
}
,btn2: function(){
layer.closeAll();
}
});
})
}
}
});
}
/*
日期转字符串
*/
function stringToDate(str){
var tempStrs = str.split(" ");
var dateStrs = tempStrs[0].split("-");
var year = parseInt(dateStrs[0], 10);
var month = parseInt(dateStrs[1], 10) - 1;
var day = parseInt(dateStrs[2], 10);
var date = new Date(year, month, day);
return date;
}
//选择日期
layui.use('laydate', function() {
var laydate = layui.laydate;
laydate.render({
elem: '#test3'
,type: 'month'
,value: '#(nowDateStr??)'
,done: function(value, date, endDate){
calendar.gotoDate(value);
//console.log(date); //得到日期时间对象:{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
// console.log(endDate); //得结束的日期时间对象,开启范围选择(range: true)才会返回。对象成员同上。
}
});
});