/*!
- FullCalendar v1.6.0
- Docs & License: http://arshaw.com/fullcalendar/
- (c) 2013 Adam Shaw
*/
1.6.0版本使用如下方法
$('#calendar').fullCalendar({
header: {
left: 'prevYear,prev,next,nextYear, today', center: 'title', right: 'month,basicWeek,basicDay'
}, firstDay: 1, editable: false, timeFormat: 'H:mm', axisFormat: 'H:mm', // events: calendar_data
events: function (start, end, callback) {
$.ajax({
url: 'data_statistic/quarter_task', dataType: 'json', data: {
// our hypothetical feed requires UNIX timestamps
start: formatDate(start), end: formatDate(end)
}, success: function (data) {
return callback(data.data.calendar_data);
//data.data.calendar_data数据格式如下
//{allDay: true
//backgroundColor: "rgba(243,156,18,0.56)"
//end: "2024-01-23"
//start: "2024-01-18"}
}
});
}
});
/*!
FullCalendar v5.9.0
Docs & License: https://fullcalendar.io/
(c) 2021 Adam Shaw
*/
5.9.0版本使用如下方法
var date =new Date();
var initialLocaleCode = 'zh-cn';
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYearCustom,prevMonthCustom,nextMonthCustom,nextYearCustom todayCustom',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
}, initialDate: date, locale: initialLocaleCode, buttonIcons: true, // show the prev/next text
weekNumbers: true, navLinks: true, // can click day/week names to navigate views
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
dateClick: dateClick, // 自定义按钮
customButtons: {
prevYearCustom: {
text: '上一年', click: function () {
prevYearCustomClick(calendar);
}
}, prevMonthCustom: {
text: '上月', click: function () {
prevMonthCustomClick();
}
}, nextMonthCustom: {
text: '下月', click: function () {
nextMonthCustomClick();
}
}, nextYearCustom: {
text: '下一年', click: function () {
nextYearCustomClick();
}
}, todayCustom: {
text: '今天', click: function () {
todayCustomClick();
}
},
},
events: [], //先赋值空,下面异步请求具体数据
});
calendar.render();
// 日期点击事件
function dateClick(info) {
console.log(info);
}
function formatDate(time,fmt='yyyy-MM-dd hh:mm:ss') {
let date = new Date(time);
const o = {
'M+': date.getMonth() + 1, //月份
'd+': date.getDate(), //日期
'h+': date.getHours(), //小时
'm+': date.getMinutes(), //分
's+': date.getSeconds(), //秒
'q+': Math.floor((date.getMonth() + 3) / 3), //季度
'S': date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substring(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substring(('' + o[k]).length)));
}
}
return fmt;
}
// 上一年点击
function prevYearCustomClick() {
calendar.prevYear();
var start = formatDate(calendar.view.activeStart);
var end = formatDate(calendar.view.activeEnd);
init(start,end)
// renderCalendar();
}
// 上月点击
function prevMonthCustomClick() {
calendar.prev();
var start = formatDate(calendar.view.activeStart);
var end = formatDate(calendar.view.activeEnd);
init(start,end)
// renderCalendar();
}
// 下月点击
function nextMonthCustomClick() {
calendar.next();
var start = formatDate(calendar.view.activeStart);
var end = formatDate(calendar.view.activeEnd);
init(start,end)
// renderCalendar();
}
// 下一年点击
function nextYearCustomClick() {
calendar.nextYear();
var start = formatDate(calendar.view.activeStart);
var end = formatDate(calendar.view.activeEnd);
init(start,end)
// renderCalendar();
}
// 今日点击
function todayCustomClick() {
calendar.today();
var start = formatDate(calendar.view.activeStart);
var end = formatDate(calendar.view.activeEnd);
init(start,end)
//renderCalendar();
}
// 刷新Calendar的数据
function renderCalendar() {
// TODO:调用接口获取数据,这里定义为空数组
var events = [];
calendar.setOption('events', events);
}
init()
function init(start,end) {
var aj = $.ajax({
url: '/PskIXNVuaY.php/data_statistic/quarter_task',// 跳转到 action
data: {
'start': start,
'end': end,
'status': $('#c-status').val(),
'order_type': $('#c-order_type').val(),
'type': $('#c-type').val(),
'order_num': $('#c-order_num').val()
},
type: 'post', cache: false, dataType: 'json', success: function (data) {
// calendar(data.data.calendar_data)
calendar.setOption('events', data.data.calendar_data);
}, error: function (err) {
// view("异常!");
alert(JSON.stringify(err));
}
});
}