日历组件fullcalendar使用记录

 

 首先这是 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 下一天