1.引入 css 文件和 js 文件
<link rel="stylesheet" type="text/css" href="/assets/css/rcss/fullcalendar.css"/>
<script type="text/javascript" src="/assets/js/rjs/moment.min.js"></script><!-- 日期处理时间工具 -->
<script type="text/javascript" src="/assets/js/rjs/fullcalendar.min.js"></script>
2.新建div
<div class="calendar"></div>
3.js 这个插件最大的问题是 ：
（1）.结束时间一定要天数加一天 不然在日历显示就少一天
（2）.动态调用组件 需要先做全局变量方便调用，然后销毁后在进行动态调用
<script>
function formatDate(date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
return y + '-' + m + '-' + d;
};
$(".calendar").hide();
setTimeout(()=>{
calendar.fullCalendar('destroy'); //销毁
setTimeout(()=>{
$(".calendar").show();
calendar.fullCalendar({
buttonText: { //各按钮的显示文本信息
today: '今天',
},
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份全称
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份简写
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周全称
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周简写
height: 620, //设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。
handleWindowResize: true, //是否随浏览器窗口大小变化而自动变化。
render: function(view) { //method,绑定日历到id上。$('#id').fullCalendar('render');
console.log('render', view)
},
events: function(start, end,timezone, callback ,e) {
setTimeout(function (){
callback(list);
},500);
//上个月点击事件
$('.fc-prev-button').on('click', function (view) {
var m = calendar.fullCalendar('getView').title;
console.log("呵呵呵呵！",m);
let year = '';
let month = '';
if(m.length < 8){
month = m.slice(0,1)
year = m.slice(3,7)
}else{
month = m.slice(0,2)
year = m.slice(4,8)
}
$.ajax({
url: "",
dataType: 'json',
type: 'POST',
data: {
equipment_id:equipment_id,
year:year,
month:month,
},
success: function(data) {
// console.log("嗯呢",data.data)
let aa=data.data
for (var i = 0; i < aa.length; i++) {
var y = aa[i].end.split("-")[0];
var m = aa[i].end.split("-")[1];
var r = aa[i].end.split("-")[2];
aa[i].end = formatDate(new Date(Number(y)+ '-' +Number(m) + '-' +Number(Number(r) + 1)));
}
var event = [];
$.each(aa, function(i) {
event.push({
title: aa[i].title,
start: aa[i].start,
end:aa[i].end,
color:aa[i].color,
editable: false
});
});
callback(event);
},
});
});
// 下一个月按钮点击事件
$('.fc-next-button').on('click', function () {
var m = calendar.fullCalendar('getView').title;
// console.log("呵呵呵呵！",m.length);
let year = '';
let month = '';
if(m.length < 8){
month = m.slice(0,1)
year = m.slice(3,7)
}else{
month = m.slice(0,2)
year = m.slice(4,8)
}
$.ajax({
url: "",
dataType: 'json',
type: 'POST',
data: {
equipment_id:equipment_id,
year:year,
month:month,
},
success: function(data) {
// console.log("嗯呢",data.data)
let aa=data.data
for (var i = 0; i < aa.length; i++) {
var y = aa[i].end.split("-")[0];
var m = aa[i].end.split("-")[1];
var r = aa[i].end.split("-")[2];
aa[i].end = formatDate(new Date(Number(y)+ '-' +Number(m) + '-' +Number(Number(r) + 1)));
}
var event = [];
$.each(aa, function(i) {
event.push({
title: aa[i].title,
start: aa[i].start,
end:aa[i].end,
editable: false,
color:aa[i].color
});
console.log("哈哈",event)
});
callback(event);
}
});
});
},
eventClick: function(event, element) {
},
eventMouseover: function(event, jsEvent) {
// alert(event.title + event.start.format() + '______' + event.end.format() + '_______' + " ——详情");
// $(".tankuang").css("top",jsEvent.offsetX)
// $(".tankuang").css("left",jsEvent.screenY)
console.log("想知道的",event);
$(".tankuang").css("top", 200);
$(".tankuang").css("left", 300);
$(".title").text(event.title);
$(".timeStart").text(event.start._i);
console.log("啥",event.mobile)
if( event.mobile == undefined){
$(".phoneA").hide();
$(".addressB").hide();
// $(".phone").remove();
// $(".address").remove();
}else{
$(".phoneA").show();
$(".phone").text(event.mobile);
}
if(event.address == undefined){
$(".addressB").hide();
}else{
$(".addressB").show();
$(".address").text(event.address);
}
var y = event.end._i.split("-")[0];
var m = event.end._i.split("-")[1];
var r = event.end._i.split("-")[2];
event.end._i = formatDate(new Date(Number(y)+ '-' +Number(m) + '-' +Number(Number(r) - 1)));
$(".timeEnd").text(event.end._i);
$(".tankuang").show();
}, //鼠标划过和离开的事件，用法和参数同上
eventMouseout: function() {
$(".tankuang").hide()
},
});
});
},500);
// 全局定义
let calendar;
//日历
$(document).ready(function () {
calendar = $('.calendar');
$('.calendar').fullCalendar({
header: {
right: 'prev,next',
},
height: 620,
monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份全称
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //月份简写
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周全称
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //周简写
events: []
});
});
</script>
4.events 数据格式
var list=[
{address: "",color: "orange",end: "2020-08-30",mobile: "*****",start: "2020-08-29",title: "001"},
{address: "",color: "orange",end: "2020-08-30",mobile: "*****",start: "2020-08-29",title: "001"},
]
网友评论