我正在使用 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>)
}