FullCalendar v1.6.4
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('生日/纪念日')"/>
<link href="../static/css/font-awesome.css" th:href="@{/css/font-awesome.css}" rel="stylesheet">
<link href="../static/css/plugins/datapicker/datepicker3.css" th:href="@{/css/plugins/datapicker/datepicker3.css}"
rel="stylesheet">
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
<link href="../static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet"/>
<link href="../static/css/animate.css" th:href="@{/css/animate.css}" rel="stylesheet"/>
<link href="../static/css/plugins/fullcalendar/fullcalendar.css" th:href="@{/css/plugins/fullcalendar/fullcalendar.css}"
rel="stylesheet">
<link href="../static/css/plugins/fullcalendar/fullcalendar.print.css"
th:href="@{/css/plugins/fullcalendar/fullcalendar.print.css}" rel="stylesheet">
<body class="gray-bg">
<div class="wrapper wrapper-content">
<div class="row animated fadeInDown">
<div class="col-sm-9">
<div class="ibox float-e-margins">
<div class="ibox-content">
<div id="calendar" class="fc fc-ltr"></div>
</div>
</div>
</div>
</div>
</div>
<div th:include="include::footer"></div>
<!-- 自定义js -->
<script th:src="@{/js/content.js}"></script>
<script th:src="@{/js/jquery-ui.custom.min.js}"></script>
<!-- Full Calendar -->
<script th:src="@{/js/plugins/fullcalendar/fullcalendar.min.js}"></script>
<script>
$(document).ready(function () {
$('.i-checks').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
});
/* 初始化外部事件
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function () {
// 创建一个事件对象(http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// 将事件对象存储在DOM元素中，以便我们以后可以使用它
$(this).data('eventObject', eventObject);
// 使用jQuery UI使事件可拖动
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* 初始化日历
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
//头部按钮
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
//移动
editable: true,
droppable: true,
//渲染动态数据
events: function (start, end, callback) {
$.ajax({
url: ctx + "module/clothCustom" + "/datelist",
type: "post",
data: {},
dataTtpe: "json",
success: function (json) {
var events = [];
for (var i = 0; i < json.total; i++) {
// console.log("total:" + json.total);
// console.log("name:" + json.rows[i].name);
// console.log("time:" + json.rows[i].time);
// console.log("yy,mm,dd:" + json.rows[i].yy, json.rows[i].mm, json.rows[i].dd);
events.push({
title: json.rows[i].name,
start: new Date(json.rows[i].time),
color: json.rows[i].coler,
})
}
callback(events);
}
})
},
drop: function (date, allDay) { // 删除某些内容时会调用此函数
// 检索被删除元素的存储事件对象
var originalEventObject = $(this).data('eventObject');
// 我们需要复制它，以便多个事件没有对同一个对象的引用
var copiedEventObject = $.extend({}, originalEventObject);
// 为其分配报告的日期
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// 最后一个`true`参数确定事件是否“粘住”（http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/）
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// 是选中“删除后删除”复选框？
if ($('#drop-remove').is(':checked')) {
// 如果是这样，请从“可拖动事件”列表中删除该元素
$(this).remove();
}
},
});
});
</script>
<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<!--统计代码，可删除-->
</body>
</html>
发送post请求,按照自己定义的格式对应取就行了。
title：显示的文字
start：在那一天显示
color: 事件的边框颜色
中文说明文档：https://www.helloweba.net/javascript/445.html
浙公网安备 33010602011771号