1.首先看下效果：
官網下載鏈接 https://fullcalendar.io/download
.官方效果圖：https://fullcalendar.io/
2.准備工作，引入對應的 css和 js文件
calendar/theme.css fullcalendar.css fullcalendar.print.css https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js https://momentjs.com/downloads/moment.min.js https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js
3.實際操作：
對fullCalendar的理解
實例化后的圖像：
附上帶注解的代碼
$('#calendar').fullCalendar({
//是否展示主題
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: time,
//月視圖下日歷格子寬度和高度的比例
aspectRatio: 1.35,
//月視圖的顯示模式，fixed：固定顯示6周高；liquid：高度隨周數變化；variable: 高度固定
weekMode: 'variable',
//初始化時的默認視圖，month、agendaWeek、agendaDay
defaultView: 'month',
//agenda視圖下是否顯示all-day
allDaySlot: false,
//agenda視圖下all-day的顯示文本
allDayText: '全天',
//agenda視圖下兩個相鄰時間之間的間隔
slotMinutes: 30,
//區分工作時間
businessHours: true,
//非all-day時，如果沒有指定結束時間，默認執行120分鍾
defaultEventMinutes: 50,
//內容高度
contentHeight: 500,
//設置為true時，如果數據過多超，顯示為 +...more ，點擊后才會完整顯示所有的數據
eventLimit: true,
//設置是否可被單擊或者拖動選擇
selectable: true,
//點擊或者拖動選擇時，是否顯示時間范圍的提示信息，該屬性只在agenda視圖里可用
selectHelper: true,
//點擊日歷外的空白區域是否取消選中狀態 true為取消 false為不取消，只有重新選擇時才會取消
unselectAuto: true,
//Event是否可被拖動或者拖拽
editable: true,
//Event被拖動時的不透明度
dragOpacity: 0.5,
editable: true,
events: [
{
title: '事件1',//事件內容
start:'2018-12-27 20:18',//事件開始時間
end:‘2018-12-27 22:00’,//事件結束時間
color:'blue',//事件框背景的顏色
textColor: 'white',//文字的顏色
borderColor: 'LightGreen',//事件框的顏色
//url: 'www.test.com',//設置事件的url鏈接
className: 'done'//加類名
},
{
事件二
},
{
事件3
}
],
})
這些參數 header，events 必須設置，其他的都有默認值