我在基本反应大日历中看不到月视图
I can't see month view in basic react-big-calendar
嗨,即使在 react-dev 工具中显示,我也看不到月视图。周视图工作正常,但月视图不显示任何内容。 PFA 下面的代码。
Here is the week view image.
Here is the month view image.
import localizer from 'react-big-calendar/lib/localizers/globalize';
import globalize from 'globalize';
import BigCalendar from 'react-big-calendar';
import events from './events';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import './prism.less';
localizer(globalize);
const allViews = Object.keys(BigCalendar.views).map(k =>
BigCalendar.views[k])
export class EventDetailModal extends React.Component { // eslint-
disable-line react/prefer-stateless-function
render() {
return (
<BigCalendar
{...this.props}
events={events}
views={allViews}
defaultDate={new Date(2015, 3, 1)}
/>
);
}
}
export default EventDetailModal;
您是否在父容器上设置了高度值?来自他们的文档:
It uses modern flexbox for layout making it super responsive and performant. Leaving most of the layout heavy lifting to the browser. note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).
(Source)
您必须设置父组件的宽度。
将此 属性 添加到您的全局 css,它应该可以工作
.rbc-month-view {
height: 100vh;
}
需要根据文档为日历提供明确的高度。
例如
.rbc-month-view {
height: 100vh;
}
或
.rbc-calendar {
min-height: 580px;
}
嗨,即使在 react-dev 工具中显示,我也看不到月视图。周视图工作正常,但月视图不显示任何内容。 PFA 下面的代码。
Here is the week view image.
Here is the month view image.
import localizer from 'react-big-calendar/lib/localizers/globalize';
import globalize from 'globalize';
import BigCalendar from 'react-big-calendar';
import events from './events';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import './prism.less';
localizer(globalize);
const allViews = Object.keys(BigCalendar.views).map(k =>
BigCalendar.views[k])
export class EventDetailModal extends React.Component { // eslint-
disable-line react/prefer-stateless-function
render() {
return (
<BigCalendar
{...this.props}
events={events}
views={allViews}
defaultDate={new Date(2015, 3, 1)}
/>
);
}
}
export default EventDetailModal;
您是否在父容器上设置了高度值?来自他们的文档:
It uses modern flexbox for layout making it super responsive and performant. Leaving most of the layout heavy lifting to the browser. note: The default styles use height: 100% which means your container must set an explicit height (feel free to adjust the styles to suit your specific needs).
(Source)
您必须设置父组件的宽度。
将此 属性 添加到您的全局 css,它应该可以工作
.rbc-month-view {
height: 100vh;
}
需要根据文档为日历提供明确的高度。 例如
.rbc-month-view {
height: 100vh;
}
或
.rbc-calendar {
min-height: 580px;
}