管理系统里面采用了fullcalendar插件,遇到几个问题,总结下:
官方英文文档:https://fullcalendar.io/docs/
中文文档:https://www.helloweba.net/javascript/445.html
初始化模板:
HTML: <div id='calendarSetting'> <div class="datetime-picker"></div> </div>
<script>
$(function () {
// 打钩按钮的节点(这个就是下图背景蓝色的日程,被我用CSS改成打√的)
var htmlnode = '<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable"><div class="fc-content node-height"><span class="fc-title circle-position"> </span></div><div class="fc-resizer fc-end-resizer"></div></a>';
// fullcalendar日程插件初始化
$('#calendarSetting').fullCalendar({
// 头部定义
header: {
left: '',
center: 'prev, today ,next,checkbox',
right: ''
},
// 日历高度
height: 650,
// 默认日期
defaultDate: defaultDate,
// 时间显示模板
views: {
month: {
titleFormat: 'YYYY, MM, DD'
}
},
// 每周的第一天从星期一开始
firstDay: 1,
navLinks: true, // can click day/week names to navigate views editable: true, eventLimit: true, // allow "more" link when too many events
// defaultDate: '2018-02-12',这个可以设置一开始进来显示的默认日期
selectable: true,
selectHelper: true,
// 设置中文
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
buttonText: {
today: '本月',
month: '月',
week: '周',
day: '日',
prev: '上一月',
next: '下一月'
},
// 当点击日历中的某一日程(事件)时,触发此操作,原来没有的日程,点上去,触发这个
dayClick: function (date, jsEvent, view) {
var $this = $(this);
// 判断是否有打钩图案按钮节点
var flag = $this.children('.fc-day-grid-event').length;
// 如果有,则取消该按钮节点,并且删除要提交的对应数据
var clickDate = new Date(date);
var year = clickDate.getFullYear();
var month = (clickDate.getMonth() + 1) < 10 ? "0" + (clickDate.getMonth() + 1) : (clickDate.getMonth() + 1);
var day = clickDate.getDate() < 10 ? "0" + clickDate.getDate() : clickDate.getDate();
var submitDate = year + "-" + month + "-" + day;
if (flag) {
$(this).empty();
AJAX请求
} else {
// 如果没有,添加图案节点,并且将日期添加到数组
$(this).append(htmlnode);
AJAX请求
}
console.log(submitDate);
},
// 取消原来保存的数据,后台获取来的数据,显示上来,想取消的,触发这个
eventClick: function (event, jsEvent, view) {
// 将原数据库有的日程日期取消后,放到取消的数组里面,最后作对比
// console.log(event);
var submitDate = event.start._i;
AJAX请求
// 取消原来保存的数据图标
$(jsEvent.currentTarget).parent().empty();
},
editable: false,
// 初始化数据,可以放这个地方,也可以放下面的地方
// events: evnetsData,
})
// 初始化数据
$('#calendarSetting').fullCalendar('addEventSource', evnetsData);
// 上一个月按钮点击事件
$('.fc-prev-button').on('click', function () {
AJAX请求
});
// 本月按钮点击事件
$('.fc-today-button').on('click', function () {
AJAX请求
});
// 下一个月按钮点击事件
$('.fc-next-button').on('click', function () {
AJAX请求
});
}
function ajaxDate(submitDate,remove){
$.ajax({
url: "jf/vacationsSettings/o_doSave?day=" + submitDate + remove ,
type: "GET",
processData: false,
contentType: false,
dataType: 'json',
async:false,
success: function (json) {
if (json.statusCode == '200') {
alertMsg.correct('您的数据提交成功!')
} else {
alertMsg.warn(json.message);
}
},
error: function (e) {
alertMsg.warn(e);
}
});
}
// 选中的背景 颜色图标
function chooseWeekend(node) {
$(node).append(htmlnode);
}
// 取消被选中的背景颜色,图标
function unchooseWeekend(node) {
$(node).empty();
}
// 数据遍历改变成插件所需要格式
function traversalData(dataListArray){
var newDataListArray = []
$.each(dataListArray, function (i,item) {
newDataListArray[i] = {};
newDataListArray[i]["start"] = item;
});
return newDataListArray;
};
//上个月,下个月,本月,我原来用addEventSource去追加数据,发现数据会重复,图标会重叠。后来才知道
//先删除数据,再追加数据,再获取。这三个帮我很大的忙 ,使用在AJAX请求完成数据后使用
$('#calendarSetting').fullCalendar( 'removeEventSource', evnetsData);
$('#calendarSetting').fullCalendar( 'addEventSource', evnetsData);
$('#calendarSetting').fullCalendar( 'refetchEvents' );
}) </script>
①插件显示是这样的:
只能通过改变样式,改成设计稿的。
②上个月下个月,我是直接获取按钮的的类名,去写点击事件:
// 上一个月按钮点击事件
$('.fc-prev-button').on('click', function () {});
// 本月按钮点击事件
$('.fc-today-button').on('click', function () {});
// 下一个月按钮点击事件
$('.fc-next-button').on('click', function () {});
③自己点的点击事件,那怎么获取到对应的时间呢?
插件提供好的,这样获取点击事件的时间:moment = $('#calendarSetting').fullCalendar('getDate')