日历图API详解，使用react-activity-calenda库（对齐github）

参考资源

这两个网站，推荐都看一下，帮助蛮大的！

• react-activity-calendar - docs 这是关于日历图中所有API的详细解释，很有用
• react-activity-calendar - 源码 这个examples中有很多示例，可以根据自己想要的效果进行设置，我觉得最有用的是关于 renderBlock的使用

---

常用且略复杂API详解

data

这个data属性有个要非常注意的一点是，数据的第一条数据date时间和最后一条数据date时间决定着日历图的范围。

• 数据结构：每一条数据的结构都必须如下所示（注意date是YY-MM-DD的形式）

{
   "date": "2024-07-28", // 必须是YY-MM-DD
   "count": 0,
   "level": 0  //0就表示无数据
}

• date range 由第一条数据和最后一条数据决定，日历图会按照第一条数据和最后一条数据的date返回来渲染格子。

---

labels

这个属性在自定义日历图的时候，使用频率也是比较多的

• months：数组 —— 自定义 横向月份 显示
• weekdays：数组 —— 自定义 纵向星期 显示
• legend：对象 —— less和more属性为空时则不显示左右Less和More，也支持自定义
  
• totalCount: 字符串 —— 用来覆盖总活动计数的属性，支持自定义

labels={{
    months: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
    ],
    weekdays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    legend: {
        less: '',
        more: '',
    },
    totalCount: '{{count}} activities in {{year}}',
}}

---

eventHandlers

举个例子

• 这是实现点击选中某个日期（格子），然后再次点击取消选中，默认是当前时间
• activity 是指当前选中的格子

eventHandlers={{
    onClick: _ => activity => {
       const selected = clickedDate === activity.date ? '' : activity.date               
       setClickedDate(selected === '' ? dayjs().format('YYYY-MM-DD') : selected)              
    },
}}

---

renderBlock

• 如果你需要hover到格子上显示Tooltip，或者是给选中的格子/hover的格子加上border，那么就需要用到这个属性
• ⚠️：如果你需要给格子加上border，此时会占据部分的像素，需要加上transform: 'translate(-1px, -1px)'，否则靠近边界的格子会被盖住一个像素
• 下面举个例子可供理解（虽然说使用cloneElement可能会被eslint警告，但是我看官方给出的方法也是这样是用的）

renderBlock={(block, activity) => {
   const isSelected = clickedDate === activity.date // 选中的
   const isHovered = hoveredDate === activity.date // hover的

   return (
      <Tooltip title={activity.date} trigger={['hover']}>
           {cloneElement(block, {
           // 这里可以给每个block设置样式
           // 下面的是style属性（设置选中/hover的边框，我这里选中的是2px，hover的是1px）
              style: {
                 ...block.props.style,
                 stroke: isSelected || isHovered ? 'var(--blue--blue-06)' : 'none',
                 strokeWidth: isSelected ? 2 : isHovered ? 1 : 0,
                 boxSizing: 'border-box',
                 transform: 'translate(-1px, -1px)', // 向内缩，避免边界被盖住1px
               },
               onMouseEnter: () => setHoveredDate(activity.date),
               onMouseLeave: () => setHoveredDate(''),
            })}
     </Tooltip>
   )
}}

---

简单API

blockSize

格子的大小，也就是宽高

blockRadius

每个格子的圆角

theme

• 如果不设置，就会启用默认的color
• 至少需要两个colors，你可以根据level的个数来设置colors的数量
• 默认level是4个等级，当然，其实日历图中会有5种颜色，因为level为0的时候，是表示无数据的，此时

 theme={{
    light: [#ddd', '#fff'],
    dark: ['#333', 'rgb(214, 16, 174)'],
  }}

hideMonthLabels hideColorLegend hideTotalCount

• 如果你不想显示横向月份和底部颜色legend就使用hideMonthLabels、hideColorLegend
• 如果日历图下方你不想显示总数，就加上这个属性hideTotalCount即可隐藏

---

结尾

大概就说这么多吧，其他api大家就看顶部的链接就行，也很详细～