React FullCalendar 名称过长hover显示

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

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

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

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