整理不易，轉載請注明出處！！！

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,  
    });
  }

這樣就可以完美顯示長名稱了