最近开的一个项目，涉及到了日历日程安排的功能，所以选用了一个免费的日历插件：FullCalendar
1.首先去官网将官方的demo下载下来，通过官方的demo进行一个初步的了解，下面正式开始
PS:中文文档的可能不太全，不清楚的可以去官网看看
2.建议先试试官方的示例：
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'rrule' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
defaultDate: '2019-06-12',
editable: true,
events: [
{
title: 'rrule event',
rrule: {
dtstart: '2019-06-09T13:00:00',
// until: '2019-06-01',
freq: 'weekly'
},
duration: '02:00'
}
],
eventClick: function(arg) {
if (confirm('delete event?')) {
arg.event.remove()
}
}
});
calendar.render();
});
</script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>3.正式开始，首先引入相关的js/css
PS：必须将jquery放在最上面！
jquery-form.js则是我后面需要用ajaxFrom，如果不用可不引入。
<link href='../fm/js/common/fullcalendar-4.2.0/packages/core/main.css' rel='stylesheet' />
<link href='../fm/js/common/fullcalendar-4.2.0/packages/daygrid/main.css' rel='stylesheet' />
<link href='../fm/js/common/fullcalendar-4.2.0/packages/timegrid/main.css' rel='stylesheet' />
<script src='/fm/js/common/jquery-2.1.4.js'></script>
<script src='/fm/js/common/jquery-form.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/core/main.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/interaction/main.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/daygrid/main.js'></script>
<script src='../fm/js/common/fullcalendar-4.2.0/packages/timegrid/main.js'></script>
<script src="../fm/js/common/fullcalendar-4.2.0/packages/core/locales/zh-cn.js"></script>4.构建一个简单的页面
<div id="calendar"></div>5.js方法相关
$(function () {
initFullCalendar();
});
function initFullCalendar(){
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
// defaultDate: '2019-06-12',
navLinks: true, // can click day/week names to navigate views
//允许用户通过点击或拖动选择日历中的对象
selectable: true,
locale: 'zh-cn',
selectMirror: true,
editable: true,
eventLimit: true,
//绑定一个mothod,在点击日历时可以弹出页面
select: function(arg){
//modal 是semantic ui中的弹框样式
$(".ui.small").modal({
onShow : function() {
//弹框显示的时候
},
//点击弹框确定按钮
onApprove : function() {
//弹出的页面，通过ajaxForm的方法存入数据库中
$("#calendar_form").ajaxSubmit({
type: 'POST',
url: '/**/**/insertJobSchedule',
success: function(result) {
// data 保存提交后返回的数据，一般为 json 数据
//可以进行一些操作
},
error:function(){
console.info("提交失败失败");
}
})
//对日历页面进行实时更新
var start = $("#transact_date").val();
var end = $("#end_date").val();
var jobAbstract = $("#jobAbstract").val();
calendar.addEvent({
title: jobAbstract,//必须参数
start: start,//必须参数
end: end,//非必须
//allDay: arg.allDay
})
calendar.unselect();
},
//弹框隐藏时
onHidden : function() {
}
}).modal('show');
},
//点击添加的事件触发的方法
eventClick : function(arg) {
console.info(arg.event.id);
if (confirm('delete event?')) {
arg.event.remove()
}
},
//进入日历界面进行加载添加过的数据
events: function( fetchInfo, successCallback, failureCallback ){
var events = [];
$.ajax({
type:"POST",
url:"/**/**/selectAllJob",
dataType:"json",
success:function(result){
console.info(result.msg);
if(result.status){
console.info(result.obj.jobScheduleList);
var jobScheduleList = result.obj.jobScheduleList;
if(jobScheduleList.length > 1){
$.each(jobScheduleList,function(i,j){
events.push({
id:j.id,
title: j.jobAbstract,
start: new Date(j.startDate).format('yyyy-MM-dd hh:mm:ss'), // will be parsed
end:new Date(j.endDate).format('yyyy-MM-dd hh:mm:ss')
});
})
//回调渲染日历
successCallback(events);
}
}
},
error:function(){
},
})
}
});
calendar.render();
}5.下面我是用的日期格式化方法 格式是：yyyy-MM-dd hh:mm:ss
//将数据库的时间戳转成 字符串
Date.prototype.format = function(format) {
var o = {
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds(),
"q+": Math.floor((this.getMonth() + 3) / 3),
"S": this.getMilliseconds()
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
更多推荐
FullCalendar日历插件的简单使用(版本4.2.0)
发布评论