FullCalendar 5.7.x 学习笔记-timeGridWeek视图

如果有类似课程表、或者会议安排等类似的需求可能会用到；
FullCalendar 版本 5.7.x timeGridWeek视图

const calendarEl = document.getElementById('fullcalendar');
const calendar = new FullCalendar.Calendar(calendarEl, options)
calendar.render()

options

• 设置时间区间

slotMinTime: '06:00';
slotMaxTime: '20:00'

• 是否需要header工具条
  包含视图、上 下翻页等等功能，

headerToolbar: false

• 设置星期的第一天是周几 默认是周日

firstDay: 1 //星期一 0 星期日

• 是否可编辑
  拖动、调整事件；

editable: true 

• 是否课选择空白区域

selectable: true 

• 设置左侧时间的格式

slotLabelFormat: {
	hour12: false, // 14:00  true = 2pm
	hour: '2-digit',  //'06:xx'
	minute: '2-digit' // 'xx:10'
}

• 设置事件的时间格式同上

eventTimeFormat:{
   hour: '2-digit',
   minute: '2-digit',
   hour12: false
 },

• 设置单元格的时间长度

views:{
  timeGridWeek:{
    slotDuration: '00:15:00', //占 15分钟
  }
},

事件的方法

• addEvent

calendar.addEvent({
   title:'新增事件',
   start: '2020-09-10T10:40:00',
   end: '2020-09-10T11:20:00'
 })

• setProp 设置非时间

let evt = calendar.getEventById('aaa');
evt.setProp('title',"修改后的事件");

• setStart

evt.setStart('2020-09-11T09:03:00')

• setEnd

evt.setEnd('2020-09-11T10:40:00')