引入依赖的JS和CSS
由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ：
然后是 FullCalendar 的依赖（可以在FullCalendar的官网下载）：
FullCalendar还为我们提供了国际化的依赖（下载的FullCalendar目录中包含），目录下的lang文件夹也需要拷贝到和当前资源同一目录下：
最后是Bootstrap的依赖：
构建index.html
新建 HTML File 引入相关文件：
Title
Language:
初始化FullCalendar
Javascript初始化：
配置完成
我们可以看到配置完成后，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
完整代码
Title
Language:
常用属性设置
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 //文本颜色,可以不填，默认为白色
}