FullCalendar 官方网站 https://fullcalendar.io/
公司新项目做了一个,有一个排班功能。为了能够明显的显示每天有哪些人工作,百度了一番,选择了这个插件。
讲一下使用总遇到的坑,之前在百度中发布的文章中有介绍各种使用方法,但是现在不知道是怎么回事,可能是应为更行了吧现在好像不能使用了,比如下面这段代码
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2018-03-12',
navLinks: true, // can click day/week names to navigate views
selectable: true,
locale:'zh-cn',
selectHelper: true
});
————————————————
版权声明:本文为CSDN博主「衣襟晚照」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/kylinregister/article/details/82988517
当我使用这个方式来进行初始化的时候回提示一个错误
官方最新的初始化方式是
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
最后直接一点如何渲染数据
官方文档给出了一个示例 大家基本能看懂
events: {
url: '/myfeed.php',
method: 'POST',
extraParams: {
custom_param1: 'something',
custom_param2: 'somethingelse'
},
failure: function() {
alert('there was an error while fetching events!');
},
color: 'yellow', // a non-ajax option
textColor: 'black' // a non-ajax option
}
给出一个我目前的代码(非详细,其他属性自己添加)
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['interaction', 'dayGrid', 'timeGrid'],
header: {
left: '',
center: 'title',
right: '月'
},
defaultDate: '2019-11-22',
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
locale: 'zh-cn',
select: function (arg) {
var title = prompt('Event Title:');
if (title) {
calendar.addEvent({
title: title,
start: arg.start,
end: arg.end,
allDay: arg.allDay
})
}
calendar.unselect()
},
editable: true,
eventLimit: true, // allow "more" link when too many events
events: { // 请求数据库数据,获取json数据
url: 'www.baidu.com/api/josn', // 你的后端访问地址 直接返回对应格式的json串即可
type: 'POST',
data: {},
error: function () {
}
}
});
calendar.render();
});