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.进入我的主场,下面先介绍方法以及方法的参数,文档在这位大佬的博客https://www.helloweba.net/javascript/231.html

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: 'agendaWeek',
//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}
                        ]

});

猜你喜欢

转载自www.cnblogs.com/lelexiu/p/10187117.html