为什么我的react-big-calendar基础示例显示样式异常？

问题原因 #

你遇到的显示异常确实是未引入react-big-calendar的官方样式文件导致的，该组件的网格布局、事件块样式、交互效果都依赖独立的样式资源，默认不会随组件逻辑代码自动导入，缺少样式时就会出现布局错乱、事件无样式、日历结构塌陷的问题。

解决方法 #

在当前组件文件的顶部引入对应样式即可：

• 普通项目直接引入编译好的css文件：

import 'react-big-calendar/lib/css/react-big-calendar.css'

• 使用Sass的项目可以引入scss源文件，方便后续自定义样式：

import 'react-big-calendar/lib/sass/styles.scss'

引入后重新编译运行项目，就能看到正常的日历展示效果。

另外你代码中定义的weekendDay函数目前没有绑定到Calendar组件，如果你需要实现周末高亮的效果，可以给Calendar组件增加dayPropGetter属性，把判断逻辑传入即可。

内容的提问来源于stack exchange，提问作者Ammar ALSananni