JS插件：fullCalendar图解

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 必须设置，其他的都有默认值