FullCalendar + react -- 实操记录

• FullCalendar官网：fullcalendar.io/👈
• FullCalendar官方文档：fullcalendar.io/docs👈
• 最新FullCalendar中文文档合集: 最新FullCalendar中文文档👈

原型图

一个很基础的页面

代码片段

<FullCalendar
        ref={calendarRef} 
        height={560} //高度,可根据需求设置
        initialView="dayGridMonth" 
        plugins={[dayGridPlugin]}
        locale="zh-cn"
        buttonText={{
          today: '今天',
        }}
        firstDay={1} //第一天为周一
        eventClick={(arg) => getDetail(arg)}
        eventOrder={customOrder}
        eventSources={[events, detailDays]}
        eventColor={'white'}
        eventTextColor={'#000'}
        eventBackgroundColor="#fff"
        customButtons={{ //自定义按钮可替换头部操作栏(这里为了给按钮添加点击事件)
          nextMonth: {
            icon: 'chevron-right',
            click: () => {
              calendarRef.current.getApi().next();
              changeMonth(calendarRef.current.calendar.view.currentStart);
            },
          },
          prevMonth: {
            icon: 'chevron-left',
            click: () => {
              calendarRef.current.getApi().prev();
              changeMonth(calendarRef.current.calendar.view.currentStart);
            },
          },
          todayBtn: {
            text: '今天',
            click: () => {
              calendarRef.current.getApi().today();
              changeMonth(calendarRef.current.calendar.view.currentStart);
            },
          },
        }}
        headerToolbar={{
          left: 'title',
          center: '',
          right: 'todayBtn prevMonth nextMonth',
        }}
        slotLabelFormat={{ //时间格式配置
          hour: '2-digit', 
          minute: '2-digit', 
          meridiem: false, //不显示上午/下午
          hour12: false, //24小时制
        }}
      />

探索记录

关于事件的自定义排序

//自定义排序,将"详情"排在最后
  const customOrder = (event1: any, event2: any) => {
    if (event1.title.length < event2.title.length) {
      return 1;
    } else if (event1.title.length > event2.title.length) {
      return -1; // 将其他事件排在detail类事件之前
    } else {
      return 0;
    }
  };

关于事件的自定义渲染

- *event使用callback*
- *eventContent 必须写*
        events={async (arg, callback) => {
          //请求拿到后端返回的事件数据
          let events = [];
          const res = await getSqaListApi();
          res.map((event) => {
            events.push({
              title:
                '<div style="font-size: 16px;display: flex;align-items: center"><span style="margin:0 5px;width:10px;height:10px;border-radius:50%;background-color:cadetblue;display: block"></span>' +
                res.title +
                '</div>',
              start: res.start,
              editable: false,
              allDay: false,
              //.......
            });
          });
          callback(events);
        }}
        //html内容前置条件，如果没有这一句，自定义的html不生效，必须
        eventContent={(arg, createElement) => {
          var italicEl = document.createElement('span');
          italicEl.innerHTML = arg.event._def.title;
          var arrayOfDomNodes = [italicEl];
          return {
            domNodes: arrayOfDomNodes,
          };
        }}

关于evnents数据

{
id  //唯一标识，可以不填，持久化时编辑数据时使用
title   //显示在日历上的内容
allDay  //标识是否为全天，可以不填，调用event.allDay时会自动区分是否为全天
start   //开始的时间，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
end //结束的时间，可以不填，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
url //可以不填，点击时跳转到指定url
className   //数据的样式，可以不填
color   //背景和边框颜色，可以不填，默认为#3a87ad
backgroundColor //背景颜色，可以不填，默认为#3a87ad
borderColor //边框颜色，可以不填，默认为#3a87ad
textColor   //文本颜色,可以不填，默认为白色
}
↑↑原文链接：https://blog.csdn.net/DeveloperFanyl/article/details/52192910