1

我正在使用 React 完整日历。

即使我点击日历外,我也想保持所选日期突出显示,即此处的地图。我还想在单击时突出显示我的自定义事件,即cropname。我也附上了我的jsx。

有人可以帮我弄这个吗?

前端

JSX=>

渲染(){返回(

  <FullCalendar
    dafaultView="dayGridMonth"
    // defaultDate= '2017-12-12'
    eventLimit="true"
    eventLimitText="More"
    views={{
      month: {
        eventLimit: 3
      }
    }}
    dateClick={(e) => { this.onDateSelection(e) }}
    plugins={[dayGridPlugin, interactionPlugin]}
    weekends={true}
    selectable="true"
    unselect={(e)=>e.jsEvent.preventDefault()}
    contentHeight="auto"
    showNonCurrentDates="false"
    events={this.state.calendarEvents && this.state.calendarEvents.list}
    // viewRender={(view, element) => { alert("render"); console.log(view, element) }}
    viewSkeletonRender={info => { this.addPaginationEvent(); }}
    eventRender={({ event, el }) => {
      const content = <div className="eventDetailContainer eventColor row justify-content-around">
        <div id="eventDetailImg"className="col-md-1" onClick={(e) => e.preventDefault()}>
          <img onClick={(e) => this.onCropSelect(event._def.extendedProps,e)} src={CropImageFinder(event._def.extendedProps.cropName)} />
        </div>
        <div className="col-md-5 harvestEventCropName harvestEventCropNameHideMobile">
          <span onClick={(e) => this.onCropSelect(event._def.extendedProps,e)} > {event._def.extendedProps.cropName} </span>
        </div>
        <div id="eventDetailQuantity"className="col-md-2 harvestEventCropName">
          <span onClick={(e) => this.onCropSelect(event._def.extendedProps,e)} > {event._def.extendedProps.cropQuantity + event._def.extendedProps.cropQuantityUnit } </span>
        </div>
      </div>;
      ReactDOM.render(content, el);
      return el;
    }
    }
  />
</section>)

}

4

0 回答 0