整理不易，转载请注明出处！！！

1，任务名称过长显示不全的解决办法

• 1，可以使用css让内容换行显示，但周和天视图可能不兼容

:global(.fc-day-grid-event .fc-content){
  white-space: normal !important;
}

• 2，使用tooltip工具 官网地址： https://atomiks.github.io/tippyjs/

截屏2019-12-0415.26.56.png

首先安装插件，这里使用的是tippy，可以根据喜好更换，但使用方法可能与此不一致

npm i tippy.js

然后想要的效果是鼠标hover时展示长名称，那么加属性eventMouseEnter

          <FullCalendar
            ref={this.myRef}
            height={890}
            defaultView="dayGridMonth"
            plugins={[dayGridPlugin, timeGridPlugin]}
            header={{
              left: "prevYear,prev,next,nextYear today",
              center: "title",
              right: "dayGridMonth,timeGridWeek,timeGridDay"
            }}
            firstDay={1}
            locale='zh-cn'
            eventLimit={true}
            slotLabelFormat={{
              hour: '2-digit',
              minute: '2-digit',
              meridiem: false,
              hour12: false
            }}
            eventTimeFormat={
              {
                hour: '2-digit',
                minute: '2-digit',
                meridiem: false,
                hour12: false
              }
            }
            displayEventEnd
            buttonText={{
              today: '今天',
              month: '月',
              week: '周',
              day: '天'
            }}
            allDayText='全天'
            events={() => this.getDate()} // 这个要放在eventSources前，不然eventSources数据会被覆盖
            events={(dateInfo) => this.getDate(dateInfo)} // 这个要放在eventSources前，不然eventSources数据会被覆盖
            eventClick={this.eventClick}
            eventMouseEnter={this.eventMouseEnter}
            eventSources={[matchList, repeatMatchList]}
          />

调用方法如下

  eventMouseEnter = mouseEnterInfo => {
    tippy(mouseEnterInfo.el, {
      content: mouseEnterInfo.event.extendedProps.name,
      placement: "top-start",
      // arrow: false,
      // 鼠标放在提示中提示不消失
      // interactive: true,  
    });
  }

这样就可以完美显示长名称了