引入依赖的JS和CSS
由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ：
<script src='jquery.min.js'></script>
然后是 FullCalendar 的依赖（可以在FullCalendar的官网下载）：
<link href='fullcalendar.css' rel='stylesheet' />
<script src='moment.min.js'></script>
<script src='fullcalendar.min.js'></script>
FullCalendar还为我们提供了国际化的依赖（下载的FullCalendar目录中包含），目录下的lang文件夹也需要拷贝到和当前资源同一目录下：
<script src='lang-all.js'></script>
最后是Bootstrap的依赖：
<link href='bootstrap.min.css' rel='stylesheet' />
<script src='bootstrap.min.js'></script>
构建index.html
新建 HTML File 引入相关文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='fullcalendar.css' rel='stylesheet' />
<link href='bootstrap.min.css' rel='stylesheet' />
<style>
/* 语言选择 */
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
/* 日历 */
#calendar {
margin: 40px auto;
padding: 0 10px;
}
/* Event 参数 className 的值 */
.done:before {
content:"【 已完成 】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
/* Event 参数 className 的值 */
.doing:before {
content:"【 未完成 】";
background-color:yellow;
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'></select>
</div>
<div id='calendar'></div>
</body>
<script src='jquery.min.js'></script>
<script src='moment.min.js'></script>
<script src='fullcalendar.min.js'></script>
<script src='lang-all.js'></script>
<script src='bootstrap.min.js'></script>
</html>
初始化FullCalendar
Javascript初始化：
<script type="text/javascript">
$(document).ready(function() {
//国际化默认值为'en'，代表使用英文
var initialLangCode = 'en';
//初始化FullCalendar
$('#calendar').fullCalendar({
//设置头部信息，如果不想显示，可以设置header为false
header: {
//日历头部左边：初始化切换按钮
left: 'prev,next today',
//日历头部中间：显示当前日期信息
center: 'title',
//日历头部右边：初始化视图
right: 'month,agendaWeek,agendaDay'
},
//设置是否显示周六和周日，设为false则不显示
weekends: true,
//日历初始化时显示的日期，月视图显示该月，周视图显示该周，日视图显示该天，和当前日期没有关系
defaultDate: '2018-12-06',
//日程数据
events: [
{
title: 'All Day Event',
start: '2018-12-06'
}
]
});
//初始化语言选择的下拉菜单值
$.each($.fullCalendar.langs, function(langCode) {
$('#lang-selector').append(
$('<option/>')
.attr('value', langCode)
.prop('selected', langCode == initialLangCode)
.text(langCode)
);
});
//当选择一种语言时触发
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
});
</script>
配置完成
我们可以看到配置完成后，FullCalendar的雏形也出来了。
image
实例
往events中添加一些静态数据，完整的效果如下。
events: [
{
id: 1,
title: '这是一个all-day数据',
allDay: true,
start: '2018-12-11'
},
{
id: 2,
title: '开始时间为12PM',
start: '2018-12-11 12:00'
},
{
id: 3,
title: '给一点颜色',
start: '2018-12-11',
color: 'red'
},
{
id: 4,
title: '使用className:done',
start: '2018-12-10 09:00',
end: '2018-12-11 18:00',
color: 'blue',
className: 'done'
},
{
id: 5,
title: '使用className:doing',
start: '2018-12-11 09:00',
end: '2018-12-12 18:00',
color: 'green',
className: 'doing'
},
{
id: 6,
title: '使用URL和字体颜色',
start: '2018-12-11',
color: 'pink',
url: 'http://foreknow.com',
className: 'doing',
textColor: 'black'
},
{
id: 7,
title: '使用backgroundColor和borderColor',
start: '2018-12-11 09:00',
end: '2018-12-12 18:00',
backgroundColor: 'gray',
borderColor: 'red',
className: 'done'
},
]
image
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href='js/fullcalendar.css' rel='stylesheet' />
<style>
/* 语言选择 */
#top {
background: #eee;
border-bottom: 1px solid #ddd;
padding: 0 10px;
line-height: 40px;
font-size: 12px;
}
/* 日历 */
#calendar {
margin: 40px auto;
padding: 0 10px;
}
/* Event 参数 className 的值 */
.done:before {
content:"【 已完成 】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
/* Event 参数 className 的值 */
.doing:before {
content:"【 未完成 】";
background-color:yellow;
color:red;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id='top'>
Language:
<select id='lang-selector'></select>
</div>
<div id='calendar'></div>
</body>
<script src='js/jquery.min.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/lang-all.js'></script>
<script type="text/javascript">
$(document).ready(function() {
var initialLangCode = 'en';
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
weekends: true,
weekMode: 'liquid',
defaultView: 'month',
allDayText: '全天',
businessHours: true,
defaultEventMinutes: 120,
eventLimit: true,
dayClick : function( date ) {
//do something here...
console.log('dayClick触发的时间为：', date.format());
// ...
},
//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
selectHelper: true,
//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
unselectAuto: true,
select: function( start, end ){
//do something here...
console.log('select触发的开始时间为：', start.format());
console.log('select触发的结束时间为：', end.format());
// ...
},
eventClick : function( event ){
//do something here...
console.log('eventClick中选中Event的id属性值为：', event.id);
console.log('eventClick中选中Event的title属性值为：', event.title);
console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的end属性值为：', event.end==null?'无':event.end.format('YYYY-MM-DD HH:mm'));
console.log('eventClick中选中Event的color属性值为：', event.color);
console.log('eventClick中选中Event的className属性值为：', event.className);
// ...
},
eventMouseover : function( event ) {
//do something here...
console.log('鼠标经过 ...');
console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);
// ...
},
eventMouseout : function( event ) {
//do something here...
console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);
console.log('鼠标离开 ...');
// ...
},
//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,
eventDrop : function( event, dayDelta, revertFunc ) {
//do something here...
console.log('eventDrop --- start ---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventDrop被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('eventDrop --- end ---');
// ...
},
eventResize : function( event, dayDelta, revertFunc ) {
//do something here...
console.log(' --- start --- eventResize');
console.log('eventResize被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventResize被执行，Event的start和end时间没有改变！');
}
//revertFunc();
console.log('--- end --- eventResize');
// ...
},
events: [
{
id: 1,
title: '这是一个all-day数据',
allDay: true,
start: '2018-12-11'
},
{
id: 2,
title: '开始时间为12PM',
start: '2018-12-11 12:00'
},
{
id: 3,
title: '给一点颜色',
start: '2018-12-11',
color: 'red'
},
{
id: 4,
title: '使用className:done',
start: '2018-12-10 09:00',
end: '2018-12-11 18:00',
color: 'blue',
className: 'done'
},
{
id: 5,
title: '使用className:doing',
start: '2018-12-11 09:00',
end: '2018-12-12 18:00',
color: 'green',
className: 'doing'
},
{
id: 6,
title: '使用URL和字体颜色',
start: '2018-12-11',
color: 'pink',
url: 'http://foreknow.com',
className: 'doing',
textColor: 'black'
},
{
id: 7,
title: '使用backgroundColor和borderColor',
start: '2018-12-11 09:00',
end: '2018-12-12 18:00',
backgroundColor: 'gray',
borderColor: 'red',
className: 'done'
},
]
});
//初始化语言选择的下拉菜单值
$.each($.fullCalendar.langs, function(langCode) {
$('#lang-selector').append(
$('<option/>')
.attr('value', langCode)
.prop('selected', langCode == initialLangCode)
.text(langCode)
);
});
//当选择一种语言时触发
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
});
</script>
</html>
常用属性设置
FullCalendar中有一些很常用的属性，非常实用。
//月视图下日历格子宽度和高度的比例
aspectRatio: 1.35,
//月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定
weekMode: 'liquid',
//初始化时的默认视图，month、agendaWeek、agendaDay
defaultView: 'month',
//agenda视图下是否显示all-day
allDaySlot: true,
//agenda视图下all-day的显示文本
allDayText: '全天',
//agenda视图下两个相邻时间之间的间隔
slotMinutes: 30,
//区分工作时间
businessHours: true,
//非all-day时，如果没有指定结束时间，默认执行120分钟
defaultEventMinutes: 120,
//设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据
eventLimit: true,
日程数据的设置
我们可以设置日程数据的内容来得到丰富的显示效果。
{
id //唯一标识，可以不填，持久化时编辑数据时使用
title //显示在日历上的内容
allDay //标识是否为全天，可以不填，调用event.allDay时会自动区分是否为全天
start //开始的时间，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
end //结束的时间，可以不填，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
url //可以不填，点击时跳转到指定url
className //数据的样式，可以不填
color //背景和边框颜色，可以不填，默认为#3a87ad
backgroundColor //背景颜色，可以不填，默认为#3a87ad
borderColor //边框颜色，可以不填，默认为#3a87ad
textColor //文本颜色,可以不填，默认为白色
}
