在React-Big-Calendar组件中创建自定义事件

时间:2019-06-19 00:41:26

标签: reactjs typescript calendar react-big-calendar

我正在尝试在react-big-calendar中自定义事件的显示。我正在用打字稿写东西,但是在如何处理函数中的事件时遇到问题。任何输入都将是很不错的事情,以及关于所有这些工作原理的解释。我看过How can I create a custom Event Component for react-big-calendar?,但这行不通。

总体而言,我只想创建一个方法,使我可以获取事件的字段并确定要显示的内容以及日历中事件的大小。

public render() {
return (
  <div style={{height: 800 }}>
    <BigCalendar
      localizer={localizer}
      events={events}
      startAccessor="start"
      endAccessor="end"
      views={['month', 'week', 'day']}
      defaultView={'month'}
      onDoubleClickEvent={event => this.handleDoubleClick(event)}
      components={{
        event: this.CustomEvent
      }} 
      // eventPropGetter={}
    />
  </div>
);

}

CustomEvent = () => (
<div>
  <div>Hello</div>
  <div>World</div>
</div>);

eventStyle(event: IEventProps, start: Date,end: Date,isSelected: boolean) 
{
    return {
      style: {
      backgroundColor: event.color
      }
   }
}

0 个答案:

没有答案