FullCalendar React标头自定义按钮未显示

编程问答 2022-08-16

问题描述

我试图将一些图标添加到标题作为按钮，我尝试使用docs中提到的bootstrap和fontawesome，但是我得到了一个空的正方形而不是图标。使用bootstrap主题时，出现“未定义”，使用标准时，出现以下情况。

这是我的代码：


const customButtons = { 
    custom1: { 
        icon: "fa-times",click: function() { 
            alert('test');
        }
    }
} 

<CustomCalendar
       customCalendarRef={customCalendarRef}
       select={(e: any) => processClick(e)}
       customButtons={customButtons}
       themeSystem="standard"
       header={{
             right: '',center: '',left: 'prev,next today custom1'
       }}
/>

结果：

enter image description here

如何在标题中将图标显示为按钮？

解决方法

我也在我的react应用程序中使用fullcalendar，所以我尝试使用您的代码。首先，您要忘记的一件事是，字体很棒的图标也需要“ fa”类，因此正确的应该是fa fa-times，而不仅仅是fa-times。

但是还有另一个问题，就是在呈现时自定义fullcalendar类附带了该图标：

enter image description here

因此，您可能使用的解决方案是将其添加到CSS的某个位置：

.fc-icon.fa {
   font: normal normal normal 14px/1 FontAwesome !important;
}

对我有用：

enter image description here

已编辑：

fontawesome类的字符串应以空格开头，否则'fa'类将与fullcalendar类连接。因此：icon: ' fa fa-times'

fullcalendarfullcalendar-4reactjsreactjs