Fullcalendar配置说明

141 阅读2分钟

官方文档:fullcalendar.io/docs#toc

显示类

属性名描述默认值备注
plugins需要用到的插件[]
initialView初始化时的视图‘dayGridMonth’
weekends是否显示周末true
locale语言设置
headerToolbar顶部导航栏
contentHeight设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应
nowIndicator当前的时间线显示,为true时当前小时那一格有个红线,并且有红三角
firstDay设置一周中显示的第一天是哪天,周日是0,周一是1,类推0
eventTimeFormat事件的时间格式显示
slotLabelFormat左侧的时间格式显示
allDaySlot周、日视图时,all-day不显示
allDayDefault设置新事件的默认全天状态false
displayEventTime控制事件的时间显示方式false
selectable是否可以选中日历格false
selectMirror拖动或调整选择时间范围时,会显示一个镜像效果来预览选择的区域false
scrollTime滚动到那个时间开始显示'06:00:00'
slotDuration一格时间槽代表多长时间,默认00:30:00(30分钟)'00:30:00'
droppable是否可以拖动事件false
hiddenDays隐藏的天[]1表示周一,0表示周日,以此类推
events事件列表[]基础结构{resourceId: '', // 资源视图需要,对应resources中的id title: '',  start: '',  end:  '',  className: '',  borderColor: '',  color: '',  textColor: '',  extendedProps: {       // 其他的业务数据   },}
resources资源视图的资源列表[]基础结构{id: '', // 资源的id,对应event 的resourceIdtitle: ''}
dayMinWidth单元格最小宽度需要装插件@fullcalendar/scrollgrid,并且配合stickyFooterScrollbar使用
stickyFooterScrollbar是否支持横向滚动false配合dayMinWidth使用

回调类

属性名描述
eventClick点击事件的回调
select选中空格子的回调
selectAllow是否允许选中
slotLabelContent左侧时间轴自定义显示
dayHeaderContent日历视图的顶部列名自定义
resourceLabelContent垂直资源视图的顶部列名自定义
eventMouseover鼠标移入事件的回调
eventMouseout鼠标移出事件的回调