首先这是 fullcalendar.io官网。由于是英文的,所以阅读起来可能不是很友好。
这是部分api中文文当链接 中文文档
自定义表头的化需要用到 @fullcalendar/resource-timegrid
自定义表头后设置宽度 @fullcalendar/scrollgrid
涉及到一些样式方面的,都可以直接通过 :global(类名) 直接修改
<FullCalendar
schedulerLicenseKey='CC-Attribution-NonCommercial-NoDerivatives'
ref={ref}
timeZone="UTC"
plugins={[dayGridPlugin, scrollPlugin, timeGridPlugin, resourceTimeGrid, interactionPlugin]}
initialView='resourceTimeGridDay' // 视图模式
resources={header} //自定义表头
selectable={true}
selectOverlap={false}
selectMirror={true}
events={data} // 数据源
select={handleDateSelect} // 点击表格可用区域
unselectAuto={true}
eventClick={handleEventClick} // 点击表格已有事件
allDaySlot={false} // 是否展示全天
slotDuration={`${timeStep}:00`} // 时间间隔
slotEventOverlap={false} // 是否可叠加覆盖
locale={'zh-cn'} // 语言模式
stickyHeaderDates={true} // 表头固定
weekNumbers={true} // 是否显示第几周
firstDay={1} // 从周几开始
nowIndicator={true} // 当前(今天)是否高亮显示
slotLabelInterval={timeStep} //显示时段的间隔
slotMinTime={workTime[0]} // 左侧开始时间
slotMaxTime={workTime[1]} // 左侧结束时间
weekText={'No.'} // 左上角展示的第几周
dayMinWidth={230} // 该属性需要@fullcalendar/scrollgrid 插件
eventMinHeight={40} // 选中时间的最小高度
eventContent={(arg) => { // 自定义返回的样式
const node = document.createElement('div')
node.innerHTML = (arg.backgroundColor && arg.backgroundColor != '#e8e8e8') ? `<div style="display: flex; align-items:start;justify-content: flex-start;">
<img
src="${getSVGSrc(Number(arg.event.constraint))}"
width="14"
height="14"
style="margin-top:4px"
/>
<span style="font-size:12px;color:#222;margin-left:4px">${arg.event.title}</span>
</div>`: ''
const arrayOfDomNodes = [node]
return { domNodes: arrayOfDomNodes }
}}
/>
// 表格已有事件,
const handleEventClick = (clickInfo: EventClickArg) => {
console.log('clickInfo', clickInfo);
}
// 点击表格 可用区域 的事件
const handleDateSelect = (selectInfo: DateSelectArg) => {
console.log('selectInfo', selectInfo);
}
// 隐藏 FullCalendar 工具后需要触发事件,可以直接获取ref触发
ref?.current?._calendarApi.prev() //触发 FullCalendar 上一天
ref?.current?._calendarApi.next() //触发 FullCalendar 下一天