react-native-calendars如何实现带事件的网格样式日历

在Expo项目中使用react-native-calendars组件，期望实现网格样式的日历展示效果，参考效果如下：

最初通过修改组件theme配置项尝试实现，编写代码如下：

<Calendar
   theme={{
    'container': {
        innerWidth: 100,
        innerHeight: 100
    },
    'stylesheet': {
        'calendar': {
            'main': {
                monthView: {
                    flex: 1,
                    height: '100%',
                    justifyContent: 'space-around'
                },
                week: {
                    flex: 1,
                    marginVertical: 0,
                    flexDirection: 'row',
                    justifyContent: 'space-around'
                },
                dayContainer: {
                    borderColor: '#f5f5f5',
                    borderWidth: 1,
                    flex:1,
                },
            },
        }
    },
}}/>

上述配置生效后未呈现预期的网格样式日历效果，需要实现网格布局下的日历事件展示功能。

• 配置的样式层级错误：react-native-calendars的主题样式有固定的层级映射，你写的container.innerWidth、stylesheet.calendar.main.dayContainer这类属性组件内部没有消费逻辑，不会生效
• 布局逻辑错误：默认日期单元格自带外边距、自适应宽度，直接给容器加边框会出现边框错位、单元格不对齐的问题，无法形成规整网格
• 事件展示未匹配对应API：组件的事件标记有专属配置项，仅靠容器样式修改无法实现日期下的事件展示。

1. 基础网格样式配置 #

按照组件官方支持的样式层级配置主题，用边框合并的方式实现均匀网格线，避免双边框问题：

<Calendar
  theme={{
    // 月视图、周行基础样式
    'stylesheet.calendar.main': {
      monthView: {
        flex: 1
      },
      week: {
        marginVertical: 0,
        flexDirection: 'row',
      }
    },
    // 单个日期单元格样式
    'stylesheet.day.basic': {
      base: {
        width: `${100/7}%`, // 7天均分宽度
        height: 50, // 固定单元格高度
        borderWidth: 1,
        borderColor: '#f0f0f0',
        // 负边距合并边框，避免双边框问题
        marginTop: -1,
        marginLeft: -1,
        alignItems: 'center',
        paddingTop: 6
      }
    },
    // 基础文字样式可按需调整
    dayTextColor: '#333',
    todayTextColor: '#1677ff',
    textSectionTitleColor: '#666',
    monthTextColor: '#333'
  }}
  // 开启自定义标记模式，用于展示日期事件
  markingType={'custom'}
  markedDates={markedDates}
/>

2. 日历事件配置 #

在markedDates中配置对应日期的样式和事件标记，示例如下：

const markedDates = {
  // 日期key格式固定为'YYYY-MM-DD'
  '2024-06-10': {
    customStyles: {
      container: {
        backgroundColor: '#e6f4ff'
      },
      text: {
        color: '#1677ff',
        fontWeight: 600
      }
    },
    // 多事件圆点标记
    dots: [
      {key: 'work', color: '#1677ff'},
      {key: 'meeting', color: '#ff7d00'}
    ]
  },
  '2024-06-15': {
    customStyles: {
      container: {
        backgroundColor: '#fff1f0'
      },
      text: {
        color: '#f5222d'
      }
    },
    dots: [{key: 'holiday', color: '#f5222d'}]
  }
}

如果需要在单元格内展示更复杂的事件内容（比如多行事件文本、自定义标签），直接传入dayComponent属性，完全接管日期单元格的渲染即可。

• 不要在主题中添加组件未定义的属性，这类属性会被直接忽略，不会产生任何效果
• 单元格宽度使用百分比均分，不要写固定像素值，避免在不同宽度的设备上出现错位
• 如果需要整月撑满容器高度，可以给Calendar组件设置固定高度，再动态计算每个day的base样式高度，保证6行日期均匀铺满。

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