Fullcalendar-使用eventRender向事件添加图标

时间:2019-05-29 12:01:29

标签: javascript reactjs typescript fullcalendar

我正在尝试使用import { GoMail } from "react-icons/go";添加svg图标。不幸的是,我似乎找不到一种将其添加到注入的html元素中的准确方法。此外,我还有以下错误:

  

arg.el.find不是函数

我应该在打字稿中使用哪种类型的el参数,我该如何使用Fullcalendar的react-icons?

onEventRender = (arg: {event: EventApi; el: HTMLElement; view: View;}) => {
    const start = arg.event.start ? moment(arg.event.start).format('LT') : null
    const end = arg.event.end ? moment(arg.event.end).format('LT') : null
    const event:any = arg.event
    const eventRecurrenceType = event.extendedProps.recurrenceType

    if (eventRecurrenceType) {

        const icon = <GoMail/>;
        arg.el.find('.noteContainer').append(icon);

        const notes = `<div class=${styles.noteContainer}>
                        <div class=${styles.numberOfNotes}>20</div>
                        <div class=${styles.noteIcon}>${icon}</div>
                       </div>`

        const eventDetails = `<div class=${styles.eventContainer}> 
                                <div>${start}-${end}</div>
                                ${notes}
                              </div>`

        const title = `<div class=${styles.eventTitle}>${arg.event.title}</div>`

        const recurrence = `<div>${eventRecurrenceType}</div>`

        arg.el.innerHTML = eventDetails + title + recurrence
    }

}

谢谢!

0 个答案:

没有答案