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