引入依賴的JS和CSS
由于 FullCalendar 自身是個 JQuery 插件厂庇，所以首先要引入 ：
<script src='jquery.min.js'></script>
然后是 FullCalendar 的依賴（可以在FullCalendar的官網(wǎng)下載）：
<link href='fullcalendar.css' rel='stylesheet' />
<script src='moment.min.js'></script>
<script src='fullcalendar.min.js'></script>
FullCalendar還為我們提供了國際化的依賴（下載的FullCalendar目錄中包含）权旷，目錄下的lang文件夾也需要拷貝到和當(dāng)前資源同一目錄下：
<script src='lang-all.js'></script>
最后是Bootstrap的依賴：
<link href='bootstrap.min.css' rel='stylesheet' />
<script src='bootstrap.min.js'></script>
構(gòu)建index.html
新建 HTML File 引入相關(guān)文件：
<!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 參數(shù) className 的值 */
.done:before {
content:"【 已完成 】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
/* Event 參數(shù) 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() {
//國際化默認(rèn)值為'en'拄氯，代表使用英文
var initialLangCode = 'en';
//初始化FullCalendar
$('#calendar').fullCalendar({
//設(shè)置頭部信息坤邪，如果不想顯示，可以設(shè)置header為false
header: {
//日歷頭部左邊：初始化切換按鈕
left: 'prev,next today',
//日歷頭部中間：顯示當(dāng)前日期信息
center: 'title',
//日歷頭部右邊：初始化視圖
right: 'month,agendaWeek,agendaDay'
},
//設(shè)置是否顯示周六和周日，設(shè)為false則不顯示
weekends: true,
//日歷初始化時顯示的日期黔衡，月視圖顯示該月盟劫，周視圖顯示該周夜牡，日視圖顯示該天，和當(dāng)前日期沒有關(guān)系
defaultDate: '2018-12-06',
//日程數(shù)據(jù)
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)
);
});
//當(dāng)選擇一種語言時觸發(fā)
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
});
</script>
配置完成
我們可以看到配置完成后侣签，F(xiàn)ullCalendar的雛形也出來了塘装。
image
實(shí)例
往events中添加一些靜態(tài)數(shù)據(jù)，完整的效果如下影所。
events: [
{
id: 1,
title: '這是一個all-day數(shù)據(jù)',
allDay: true,
start: '2018-12-11'
},
{
id: 2,
title: '開始時間為12PM',
start: '2018-12-11 12:00'
},
{
id: 3,
title: '給一點(diǎn)顏色',
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 參數(shù) className 的值 */
.done:before {
content:"【 已完成 】";
background-color:yellow;
color:green;
text-align:center;
font-weight:bold;
width:100%;
}
/* Event 參數(shù) 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觸發(fā)的時間為：', date.format());
// ...
},
//設(shè)置是否可被單擊或者拖動選擇
selectable: true,
//點(diǎn)擊或者拖動選擇時蹦肴，是否顯示時間范圍的提示信息，該屬性只在agenda視圖里可用
selectHelper: true,
//點(diǎn)擊或者拖動選中之后，點(diǎn)擊日歷外的空白區(qū)域是否取消選中狀態(tài) true為取消 false為不取消，只有重新選擇時才會取消
unselectAuto: true,
select: function( start, end ){
//do something here...
console.log('select觸發(fā)的開始時間為：', start.format());
console.log('select觸發(fā)的結(jié)束時間為：', 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('鼠標(biāo)經(jīng)過 ...');
console.log('eventMouseover被執(zhí)行徙瓶，選中Event的title屬性值為：', event.title);
// ...
},
eventMouseout : function( event ) {
//do something here...
console.log('eventMouseout被執(zhí)行，選中Event的title屬性值為：', event.title);
console.log('鼠標(biāo)離開 ...');
// ...
},
//Event是否可被拖動或者拖拽
editable: true,
//Event被拖動時的不透明度
dragOpacity: 0.5,
eventDrop : function( event, dayDelta, revertFunc ) {
//do something here...
console.log('eventDrop --- start ---');
console.log('eventDrop被執(zhí)行闹炉，Event的title屬性值為：', event.title);
if(dayDelta._days != 0){
console.log('eventDrop被執(zhí)行嗅钻，Event的start和end時間改變了：', dayDelta._days+'天柳弄！');
}else if(dayDelta._milliseconds != 0){
console.log('eventDrop被執(zhí)行糖赔，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒！');
}else{
console.log('eventDrop被執(zhí)行声怔，Event的start和end時間沒有改變！');
}
//revertFunc();
console.log('eventDrop --- end ---');
// ...
},
eventResize : function( event, dayDelta, revertFunc ) {
//do something here...
console.log(' --- start --- eventResize');
console.log('eventResize被執(zhí)行，Event的title屬性值為：', event.title);
if(dayDelta._days != 0){
console.log('eventResize被執(zhí)行，Event的start和end時間改變了：', dayDelta._days+'天！');
}else if(dayDelta._milliseconds != 0){
console.log('eventResize被執(zhí)行强饮，Event的start和end時間改變了：', dayDelta._milliseconds/1000+'秒柠座！');
}else{
console.log('eventResize被執(zhí)行，Event的start和end時間沒有改變爆哑！');
}
//revertFunc();
console.log('--- end --- eventResize');
// ...
},
events: [
{
id: 1,
title: '這是一個all-day數(shù)據(jù)',
allDay: true,
start: '2018-12-11'
},
{
id: 2,
title: '開始時間為12PM',
start: '2018-12-11 12:00'
},
{
id: 3,
title: '給一點(diǎn)顏色',
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)
);
});
//當(dāng)選擇一種語言時觸發(fā)
$('#lang-selector').on('change', function() {
if (this.value) {
$('#calendar').fullCalendar('option', 'lang', this.value);
}
});
});
</script>
</html>
常用屬性設(shè)置
FullCalendar中有一些很常用的屬性，非常實(shí)用。
//月視圖下日歷格子寬度和高度的比例
aspectRatio: 1.35,
//月視圖的顯示模式蓝丙，fixed：固定顯示6周高挫鸽；liquid：高度隨周數(shù)變化；variable: 高度固定
weekMode: 'liquid',
//初始化時的默認(rèn)視圖，month、agendaWeek角虫、agendaDay
defaultView: 'month',
//agenda視圖下是否顯示all-day
allDaySlot: true,
//agenda視圖下all-day的顯示文本
allDayText: '全天',
//agenda視圖下兩個相鄰時間之間的間隔
slotMinutes: 30,
//區(qū)分工作時間
businessHours: true,
//非all-day時均驶，如果沒有指定結(jié)束時間，默認(rèn)執(zhí)行120分鐘
defaultEventMinutes: 120,
//設(shè)置為true時妇穴，如果數(shù)據(jù)過多超過日歷格子顯示的高度時腾它，多出去的數(shù)據(jù)不會將格子擠開，而是顯示為 +...more 搁廓，點(diǎn)擊后才會完整顯示所有的數(shù)據(jù)
eventLimit: true,
日程數(shù)據(jù)的設(shè)置
我們可以設(shè)置日程數(shù)據(jù)的內(nèi)容來得到豐富的顯示效果完箩。
{
id //唯一標(biāo)識，可以不填慷蠕，持久化時編輯數(shù)據(jù)時使用
title //顯示在日歷上的內(nèi)容
allDay //標(biāo)識是否為全天珊拼，可以不填，調(diào)用event.allDay時會自動區(qū)分是否為全天
start //開始的時間流炕，格式為 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
end //結(jié)束的時間澎现，可以不填，格式為 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
url //可以不填每辟，點(diǎn)擊時跳轉(zhuǎn)到指定url
className //數(shù)據(jù)的樣式剑辫，可以不填
color //背景和邊框顏色，可以不填渠欺，默認(rèn)為#3a87ad
backgroundColor //背景顏色妹蔽，可以不填，默認(rèn)為#3a87ad
borderColor //邊框顏色挠将，可以不填胳岂，默認(rèn)為#3a87ad
textColor //文本顏色,可以不填，默認(rèn)為白色
}
