从时间段反应大日历隐藏开始时间结束时间

时间:2017-10-11 09:17:10

标签: reactjs react-big-calendar

我有一个反应大日历,如下图所示,我想删除带圆圈的策略时间/结束时间:

img

使用以下参数渲染react大日历:

<BigCalendar
                selectable
                events={this.props.events?this.props.events:[]}
                views={{ week:MyWeek}}
                defaultView='week'
                defaultDate={this.state.date?this.state.date:new Date()}
                date={this.state.date?this.state.date:new Date()}
                now={new Date(0)}
                min={new Date(this.state.today.getFullYear(), this.state.today.getMonth(), this.state.today.getDate(), 8)}
                max={new Date(this.state.today.getFullYear(), this.state.today.getMonth(), this.state.today.getDate(), 20)}
                onSelectSlot={(slotInfo) => {this.props.onSelectSlot('interview', slotInfo, 'add'); store.dispatch(addBreadcrumb({name: B_PREPARATION_INTERVIEW}));}}
                onSelectEvent={event => {this.props.onSelectEvent('interview', event); store.dispatch(addBreadcrumb({name: B_PREPARATION_INTERVIEW}));} }
                onNavigate={(date) => this.changeDate(date)}
                components={{event: Event }}
                eventPropGetter={(this.eventStyleGetter)}
                titleAccessor={function(e) {console.log("aaaaaaaaaaa"); console.log(e); return e.title;}}
            />

我尝试添加titleAccessor以删除开始时间/结束时间但没有结果。

3 个答案:

答案 0 :(得分:1)

遵循 documentation 中的格式部分:

const formats = {
    eventTimeRangeFormat: () => { 
      return "";
    },
  };
<Calendar formats={formats} />

答案 1 :(得分:0)

您可以像这样覆盖CSS类rbc-event-label

.rbc-event-label {
  display: none;
}

隐藏开始和结束时间。

答案 2 :(得分:0)

format.eventTimeRangeFormat中返回null,这不会显示时间标签。

Check the documentation