$(document).ready(function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid'],
header: {
left: 'today,prev,next',
center: 'title',
right: 'dayGridMonth,dayGridWeek'
},
locale: 'zh-cn',
defaultView:'dayGridWeek',//默认视图
buttonText: {
today: '今天',
dayGridMonth: '月',
dayGridWeek: '周',
},
defaultDate: new Date(),
nowIndicator:true,//显示当前时间的标记
//设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据
eventLimit: true,
dateClick: function(info) {

},
eventClick: function(event, jsEvent, view) {//点击日程事件，触发此操作 event是日程（事件）对象，jsEvent是个javascript事件，view是当前视图对象。
alert("点击日程事件");
},
eventMouseEnter: function(mouseEnterInfo){//鼠标悬停在日程上的事件
$(mouseEnterInfo.el).popover({
content: 'Popoverddddddd',
trigger: 'hover',
theme: 'primary lg'
})
},
events:function(fetchInfo, successCallback, failureCallback){
var start = fetchInfo.start;
var end = fetchInfo.end;
var startDate= new Date(start);
var endDate = new Date(end);
var startTime = startDate.getFullYear()+'-'+checkTime(startDate.getMonth()+1)+'-'+checkTime(startDate.getDate());
var endTime = endDate.getFullYear()+'-'+checkTime(endDate.getMonth()+1)+'-'+checkTime(endDate.getDate());
var eventsValue = [];
$.ajax({
url: "",
async:false,
type:"post",
dataType:'json',
data:{"startDate":startTime,"endDate":endTime},
success: function(datas) {
if(datas.code==0){
$(datas.data).each(function (i , e){

var htmls=[];
htmls.push("");
htmls.push("<div class='yy-box yy-box-undone'>");
htmls.push("<div>");
htmls.push("  <span>"+datas.data[i].timeRange+"</span>");
htmls.push("</div>");
htmls.push("<div>");
htmls.push("  <span>"+teacheName+"</span>");
htmls.push("</div>");
htmls.push("<div>");
htmls.push("  <span>");
htmls.push("    <a href='javascript:;'>查看</a>");
htmls.push("    <span class='group-line-xs'></span>");
htmls.push("    <a href='javascript:;'>删除</a>");
htmls.push("    <span class='group-line-xs'></span>");
htmls.push("    <a href='javascript:;'>编辑</a>");
htmls.push("    <span class='group-line-xs'></span>");
htmls.push("    <a href='javascript:;'>查看总结</a>");
htmls.push("    <span class='group-line-xs'></span>");
htmls.push("   <a href='javascript:;'>编辑总结</a>");
htmls.push("  </span>");
htmls.push("</div>");
htmls.push("</div>");

var html = htmls.join("\n");

eventsValue.push({
id:datas.data[i].scheduleDefineId,
title:html,
start:datas.data[i].startDate,
end:datas.data[i].endDate,
backgroundColor:datas.data[i].color,
textColor:'#080808'
});
});
}
}
});
successCallback(eventsValue);
},
eventRender: function (info) {
info.el.innerHTML=info.event.title;//主要靠这个实现 显示html内容
},
});

calendar.render();
});


function checkTime(i){
if(i<10){
i = '0'+i
}
return i
}

Fullcalendar 日历 使用 ，包括 视图 选择、事件插入、编辑事件、事件状态更改、事件添加和删除、事件拖动调整， 自定义 头部，加入el-popover 显示 图片、图片预览、添加附件链接等，支持手机 显示 。 这是一款改造后的 fullCalendar ,这个样式是应用了主题的哦，你只要把我说的几个地方，复制样式名在相应的文件中搜索找到后改下就能 实现 这样的效果了。 具体 改了为今天设置背景为图片、事件背景插入了图片、标题是 自定义 的、星期没有 显示 了、左右按钮样式变了、点击左右按钮时日历高度没有变化了。附件是我 实现 后的效果图和改过的源码文件。 这些都是通过改源码才能 实现 的哦，下面我说明改哪些地方能 实现 哪些效果... https://blog.csdn.net/qq_35349982/article/details/108977795 //html 内容 前置条件 eventContent: function(arg, createElement) { // 自定义 html 最外面那层包裹的是什么就用什么 var italicEl = document.createElement('sp 　　https://files.cnblogs.com/files/romayn/ fullcalendar .rar 转载于:https://www.cnblogs.com/romayn/p/9870470.html FullCalendar 是一个基于jquery的日历插件，可用来管理日程安排， 记录 工作日志，它的功能很强大，本节主要是来介绍下 FullCalendar 的基本 使用 ，更多用法可参考官方文档：https:// fullcalendar .io/docs本节 使用 sandboxOA v4.0版本：增加了 django admin配置，增加了dailreport app, 修改了数据库连接设置， 使用 sqlite3... fullcalendar 官网：https:// fullcalendar .io/ 插件下载地址（v5.3.2版本）：https://github.com/ fullcalendar / fullcalendar /releases 项目中用的是 LayerUi弹窗+ fullcalendar 日历插件，上面是效果图 我这里用的是v5.3.2版本，5.x以上版本好像改版了，命令与4.X完全不一样 注意：日历插件里面的表格是 自定义 的HTML代码 当前的项目中有个BUG，就是点击单元格后，弹出窗口 演示效果如下： 从开始到放弃，从放弃到开始，哥们我以及折腾两个早上了，都有点怀疑人生了。 首先，安装 Fullcalendar 插件，这个东西只能看官网，官网：https:// fullcalendar .io/docs#toc。因为它更新快，向下也不兼容哦，一般中文文档啥的更不上官网的速度。有一个小妙招，下个有道词典，不认识的指一下就可以翻译了。 具体 的安装过程就不详细 记录 了，今天说一下鼠标hover日历事件 显示 悬浮框这个东东怎么 实现 。 因为 Fullcalendar 文档基本是基于jquery的，所以jquery的同学很好弄，但 1、 使用 FullCalendar 自定义 的模板及 内容 在 FullCalendar 标签内部 使用 插槽 <template v-slot:eventContent="arg"></template> eventContent是 内容 区域，在template里面就可以定制自己的日程了 arg可以获取到initialEvents这个属性的所有 内容 <template v-slot:event FullCalendar 提供了丰富的属性设置和方法调用，开发者可以根据 FullCalendar 提供的API快速完成一个日历日程的开发，本文将 FullCalendar 的常用属性和方法、回调函数等整理成中文文档，方便参阅。当前版本1.6.4。 普通 显示 设置 $('#calendar'). fullCalendar ({ eventAfterRender: function(data,element,e){ //data 这个日程对应的数据 element 日...