如何解决FullCalendar React标头自定义按钮未显示
我试图将一些图标添加到标题作为按钮,我尝试使用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'
}}
/>
结果:
如何在标题中将图标显示为按钮?
解决方法
我也在我的react应用程序中使用fullcalendar,所以我尝试使用您的代码。首先,您要忘记的一件事是,字体很棒的图标也需要“ fa”类,因此正确的应该是fa fa-times
,而不仅仅是fa-times
。
但是还有另一个问题,就是在呈现时自定义fullcalendar类附带了该图标:
因此,您可能使用的解决方案是将其添加到CSS的某个位置:
.fc-icon.fa {
font: normal normal normal 14px/1 FontAwesome !important;
}
对我有用:
已编辑:
fontawesome类的字符串应以空格开头,否则'fa'类将与fullcalendar类连接。因此:icon: ' fa fa-times'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。