[英]React Big Calendar how to style a single day in the month view
因此,如圖所示,我想為個別事件設計風格。
使用slotpropgetter,可以有條件地渲染樣式。
slotPropGetter = date => {
const CURRENT_DATE = moment().toDate();
let backgroundColor;
if (moment(date).isBefore(CURRENT_DATE, "month")) {
backgroundColor = "#f7f8f9";
}
var style = {
backgroundColor
};
return {
style: style
};
};
所以“解決方案”是DateCellWrapper,它對我不起作用,或者我以錯誤的方式實現它
const DateCellWrapper = ({ value, children }) => {
console.log("DateCellWrapper")
const style = {
backgroundColor: "#000",
};
return (
<div style={style}>{children}</div>
);
}
它甚至沒有輸出我的console.log,所以..任何人都有想法? :p
components
prop可用於單獨更改日歷的部分呈現方式:
import React, {Children} from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';
BigCalendar.momentLocalizer(moment);
const CURRENT_DATE = moment().toDate();
// example implementation of a wrapper
const ColoredDateCellWrapper = ({children, value}) =>
React.cloneElement(Children.only(children), {
style: {
...children.style,
backgroundColor: value < CURRENT_DATE ? 'lightgreen' : 'lightblue',
},
});
const MyCalendar = props => (
<div style={{height: '100vh', margin: '10px'}}>
<BigCalendar
events={[]}
startAccessor="startDate"
endAccessor="endDate"
components={{
// you have to pass your custom wrapper here
// so that it actually gets used
dateCellWrapper: ColoredDateCellWrapper,
}}
/>
</div>
);
工作實例:
它具有以下類型定義:
{
event?: ReactClass<any>,
eventWrapper?: ReactClass<any>,
dayWrapper?: ReactClass<any>,
dateCellWrapper?: ReactClass<any>,
toolbar?: ReactClass<any>,
agenda?: {
date?: ReactClass<any>,
time?: ReactClass<any>,
event?: ReactClass<any>
},
day?: {
header?: ReactClass<any>,
event?: ReactClass<any>
},
week?: {
header?: ReactClass<any>,
event?: ReactClass<any>
},
month?: {
header?: ReactClass<any>,
dateHeader?: ReactClass<any>,
event?: ReactClass<any>
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.