使用FullCalendar做日程管理
Github地址：https://github.com/fullcalendar/fullcalendar
官网地址：http://fullcalendar.io/
由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ：
<script src='jquery.min.js'>script>- 1
- 1
然后是 FullCalendar 的依赖（可以在FullCalendar的官网下载）：
<link href='fullcalendar.css' rel='stylesheet' />
<script src='moment.min.js'>script>
<script src='fullcalendar.min.js'>script>- 1
- 2
- 3
- 1
- 2
- 3
FullCalendar还为我们提供了国际化的依赖（下载的FullCalendar目录中包含），目录下的lang文件夹也需要拷贝到和当前资源同一目录下：
<script src='lang-all.js'>script>- 1
- 1
最后是Bootstrap的依赖：
<link href='bootstrap.min.css' rel='stylesheet' />
<script src='bootstrap.min.js'>script>- 1
- 2
- 1
- 2
构建index.html
新建 HTML File 引入相关文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
初始化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: '2016-06-06',
//日程数据
events: [
{
title: 'All Day Event',
start: '2016-08-11'
}
]
});
//初始化语言选择的下拉菜单值
$.each($.fullCalendar.langs, function(langCode) {
$('#lang-selector').append(
$('')
.attr('value', langCode)
.prop('selected', langCode == initialLangCode)
.text(langCode)
);
});
//当选择一种语言时触发
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
});
script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
配置完成
我们可以看到配置完成后，FullCalendar的雏形也出来了。 
常用属性设置
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,
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
日程数据的设置
我们可以设置日程数据的内容来得到丰富的显示效果。
{
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 //文本颜色,可以不填，默认为白色
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
实例
往events中添加一些静态数据，完整的效果如下。
events: [
{
id: 1,
title: '这是一个all-day数据',
allDay: true,
start: '2016-08-11'
},
{
id: 2,
title: '开始时间为12PM',
start: '2016-08-11 12:00'
},
{
id: 3,
title: '给一点颜色',
start: '2016-08-11',
color: 'red'
},
{
id: 4,
title: '使用className:done',
start: '2016-08-10 09:00',
end: '2016-08-11 18:00',
color: 'blue',
className: 'done'
},
{
id: 5,
title: '使用className:doing',
start: '2016-08-11 09:00',
end: '2016-08-12 18:00',
color: 'green',
className: 'doing'
},
{
id: 6,
title: '使用URL和字体颜色',
start: '2016-08-11',
color: 'pink',
url: 'http://flovel.xyz',
className: 'doing',
textColor: 'black'
},
{
id: 7,
title: '使用backgroundColor和borderColor',
start: '2016-08-11 09:00',
end: '2016-08-12 18:00',
backgroundColor: 'gray',
borderColor: 'red',
className: 'done'
},
]- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
1. 首先上官网下载插件, 下面是配置代码。
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
buttonText:{
prev: '上翻',
next: '下翻',
prevYear: '去年',
nextYear: '明年',
today: '今天',
month: '月',
week: '周',
day: '日'
},
aspectRatio:0.9,
allDayDefault:true,
selectable: true,
selectHelper: true,
select: function(start, end,allDay) {
var title = prompt('请输入日程:');
if (title) {
$.post("index.php?action=schedule&func=add",{starttime:start.getTime(),endtime:end.getTime(),title:title},function(data){alert(data)});
calendar.fullCalendar('renderEvent',
{
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
editable: true,
eventSources: [//增加多个源
{
url: 'index.php?action=schedule&func=article-event',
color:'red',
editable:false
},
{