反应大日历从时隙隐藏开始时间结束时间答案

【问题标题】：React big calendar hide start time end time from time slot反应大日历从时隙隐藏开始时间结束时间
【发布时间】：2017-10-11 09:17:10
【问题描述】：

我有一个如下图所示的大日历，我想删除带圆圈的时间/结束时间：

react big calendare 是用这个参数渲染的：

<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 以删除开始时间/结束时间但没有结果。

【问题讨论】：

标签： reactjs react-big-calendar

【解决方案1】：

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

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

隐藏开始和结束时间。

【讨论】：

【解决方案2】：

在format.eventTimeRangeFormat中返回null，这样就不会显示时间标签了。

Check the documentation

【讨论】：

内置工具提示使用eventTimeRangeFormat。删除它会导致工具提示为: <event title>，因为它会在时间和标题之间保留冒号。

【解决方案3】：

遵循documentation 中的格式部分：

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

<Calendar formats={formats} />

【讨论】：