{"id":30580592,"url":"https://github.com/react-component/rc-calendar-graph","last_synced_at":"2025-08-29T05:37:52.630Z","repository":{"id":184133284,"uuid":"671308839","full_name":"react-component/rc-calendar-graph","owner":"react-component","description":"like github  calendar graph","archived":false,"fork":false,"pushed_at":"2023-07-27T07:19:32.000Z","size":95,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2023-07-27T07:47:39.789Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-component.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-27T03:09:40.000Z","updated_at":"2023-07-27T07:47:49.872Z","dependencies_parsed_at":null,"dependency_job_id":"a597c0b4-a3aa-4da8-a1c2-ba89a3b39909","html_url":"https://github.com/react-component/rc-calendar-graph","commit_stats":null,"previous_names":["react-component/rc-calendar-graph"],"tags_count":null,"template":null,"template_full_name":null,"purl":"pkg:github/react-component/rc-calendar-graph","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Frc-calendar-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Frc-calendar-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Frc-calendar-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Frc-calendar-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-component","download_url":"https://codeload.github.com/react-component/rc-calendar-graph/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-component%2Frc-calendar-graph/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272636246,"owners_count":24967983,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-29T02:00:10.610Z","response_time":87,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-29T05:37:49.920Z","updated_at":"2025-08-29T05:37:52.622Z","avatar_url":"https://github.com/react-component.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## rc-calendar-graph\n\n一个研发组件的日历图表，用于展示研发人员的日常研发情况。\n\n## 需求数据格式\n\n```json\n{\n  \"max\": 31,\n  \"min\": 1,\n  \"total\": 1933,\n  \"githubTotal\": 641,\n  \"codeTotal\": 1292,\n  \"year\": \"2023\",\n  \"days\": [\n    {\n      \"week\": 1,\n      \"days\": [\n        {\n          \"date\": \"2023-01-01\",\n          \"day\": 0,\n          \"month\": 1,\n          \"total\": 0,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 5,\n          \"codeCount\": 0,\n          \"githubCount\": 5\n        },\n        {\n          \"date\": \"2023-01-02\",\n          \"day\": 1,\n          \"month\": 1,\n          \"total\": 0,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 3,\n          \"codeCount\": 0,\n          \"githubCount\": 3\n        },\n        {\n          \"date\": \"2023-01-03\",\n          \"day\": 2,\n          \"month\": 1,\n          \"total\": 29,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 35,\n          \"codeCount\": 29,\n          \"githubCount\": 6\n        },\n        {\n          \"date\": \"2023-01-04\",\n          \"day\": 3,\n          \"month\": 1,\n          \"total\": 26,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 27,\n          \"codeCount\": 26,\n          \"githubCount\": 1\n        },\n        {\n          \"date\": \"2023-01-05\",\n          \"day\": 4,\n          \"month\": 1,\n          \"total\": 1,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 2,\n          \"codeCount\": 1,\n          \"githubCount\": 1\n        },\n        {\n          \"date\": \"2023-01-06\",\n          \"day\": 5,\n          \"month\": 1,\n          \"total\": 9,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 14,\n          \"codeCount\": 9,\n          \"githubCount\": 5\n        },\n        {\n          \"date\": \"2023-01-07\",\n          \"day\": 6,\n          \"month\": 1,\n          \"total\": 1,\n          \"week\": 1,\n          \"year\": 2023,\n          \"count\": 1,\n          \"codeCount\": 1,\n          \"githubCount\": 0\n        }\n      ]\n    }\n  ]\n}\n```\n\n## 使用方法\n\n```tsx\n\u003cCalendarGraph\n  boxRender={(defaultDom, item) =\u003e {\n    return \u003cTooltip title={\u003cdiv\u003e{item.date}\u003c/div\u003e}\u003e{defaultDom}\u003c/Tooltip\u003e;\n  }}\n  calendarGraphList={days || []}\n/\u003e\n```\n\n![demo](https://mdn.alipayobjects.com/huamei_ptjqan/afts/img/A*_rkKTKhRhO4AAAAAAAAAAAAADkN6AQ/original)\n\n## API\n\n| 参数 | 说明 | 类型 | 默认值 | 版本 |\n| --- | --- | --- | --- | --- |\n| boxPadding | 每个格子的间距 | `number` | - | - |\n| boxSize | 每个格子的大小 | `number` | - | - |\n| calendarGraphList | 数据源 | `CalendarGraphList` | - | - |\n| selectedDay | 选中某一天 | `string` | - | - |\n| onSelectedDay | 选中某一天的回调 | `(day?: string) =\u003e void` | - | - |\n| prefixCls | 自定义样式前缀 | `string` | - | - |\n| colorLevel | 自定义颜色等级 | `{ start: number; end: number; color: string; }[]` | - | - |\n| lowText | 自定义低文案 | `string` | - | - |\n| highText | 自定义高文案 | `string` | - | - |\n| boxRender | 自定义格子内容 | `(boxDom: React.ReactNode, boxItem: CalendarGraphItem) =\u003e React.ReactNode` | - | - |\n| weekLabelList | 格子周提示标签 | `{ label: string; col: number; }[]` | - | - |\n| getBoxColor | 获取格子颜色 | `(item?: CalendarGraphItem, isActive?: boolean) =\u003e string` | - | - |\n\n### 使用示例\n\n```tsx\nimport React from 'react';\nimport { CalendarGraph } from 'rc-calendar-graph';\n\nconst MyComponent = () =\u003e {\n  // 日历数据源\n  const calendarGraphList = [\n    // ...data\n  ];\n\n  // 选中某一天的回调函数\n  const handleSelectedDay = (day) =\u003e {\n    // ...handle selected day\n  };\n\n  return (\n    \u003cCalendarGraph\n      calendarGraphList={calendarGraphList}\n      selectedDay=\"2023-07-15\"\n      onSelectedDay={handleSelectedDay}\n      boxPadding={10}\n      boxSize={20}\n      prefixCls=\"custom-calendar\"\n      colorLevel={[\n        { start: 1, end: 10, color: 'rgba(24, 144, 255, 0.3)' },\n        // ...more color levels\n      ]}\n      lowText=\"Low\"\n      highText=\"High\"\n      boxRender={(boxDom, boxItem) =\u003e (\n        \u003cdiv className=\"custom-box\"\u003e\n          {boxDom}\n          \u003cspan className=\"tooltip\"\u003e{boxItem.tooltip}\u003c/span\u003e\n        \u003c/div\u003e\n      )}\n      weekLabelList={[\n        { label: '周日', col: 1 },\n        { label: '周二', col: 3 },\n        { label: '周四', col: 5 },\n        { label: '周六', col: 7 },\n      ]}\n      getBoxColor={(item, isActive) =\u003e (isActive ? 'green' : 'blue')}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\n### CalendarGraphList 数据格式\n\n```ts\ntype CalendarGraphList = CalendarGraphItem[];\n\ninterface CalendarGraphItem {\n  date: string;\n  day?: number;\n  month?: number;\n  total?: number;\n  week?: number;\n  year?: number;\n  count: number;\n}\n```\n\n- `date`: 日期，格式为 `YYYY-MM-DD`。\n- `day` (可选): 日期中的天数。\n- `month` (可选): 日期中的月份。\n- `total` (可选): 表示每个格子的总数或累计值。\n- `week` (可选): 日期所在的周数。\n- `year` (可选): 日期所在的年份。\n- `count`: 表示每个格子的计数或值。\n\n上述字段中的 `day`、`month`、`total`、`week` 和 `year` 都是可选的，你可以根据需要选择性地使用它们来提供更多的日期信息。如果某个字段没有提供，默认情况下将不显示该信息。另外，`count` 字段是每个格子必需的，用于显示每个格子的具体数值。\n\n### 自定义格子内容 (boxRender)\n\n`boxRender` 函数可以自定义每个格子的内容。它接收两个参数：\n\n- `boxDom`: 表示当前格子的默认内容。\n- `boxItem`: 表示当前格子的数据项。\n\n你可以自定义格子的样式和内容，然后将它们与 `boxDom` 结合在一起返回。\n\n```tsx\nimport React from 'react';\nimport CalendarGraph from 'path/to/CalendarGraph';\n\nconst MyComponent = () =\u003e {\n  // 日历数据源\n  const calendarGraphList = [\n    // ...data\n  ];\n\n  // 自定义格子内容的渲染函数\n  const customBoxRender = (boxDom, boxItem) =\u003e {\n    // 在默认内容基础上添加自定义内容\n    return (\n      \u003cdiv className=\"custom-box\"\u003e\n        {boxDom}\n        \u003cspan className=\"tooltip\"\u003e{boxItem.count}\u003c/span\u003e\n      \u003c/div\u003e\n    );\n  };\n\n  return (\n    \u003cCalendarGraph\n      calendarGraphList={calendarGraphList}\n      boxRender={customBoxRender}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\n以下是一个示例，展示如何使用 `boxRender` 函数来自定义格子的内容：\n\n```jsx\nimport React from 'react';\nimport CalendarGraph from 'path/to/CalendarGraph';\n\nconst MyComponent = () =\u003e {\n  // 日历数据源\n  const calendarGraphList = [\n    // ...data\n  ];\n\n  // 自定义格子内容的渲染函数\n  const customBoxRender = (boxDom, boxItem) =\u003e {\n    // 在默认内容基础上添加自定义内容\n    return (\n      \u003cdiv className=\"custom-box\"\u003e\n        {boxDom}\n        \u003cspan className=\"tooltip\"\u003e{boxItem.count}\u003c/span\u003e\n      \u003c/div\u003e\n    );\n  };\n\n  return (\n    \u003cCalendarGraph\n      calendarGraphList={calendarGraphList}\n      boxRender={customBoxRender}\n    /\u003e\n  );\n};\n\nexport default MyComponent;\n```\n\n在上述示例中，我们定义了一个 `customBoxRender` 函数，它接收 `boxDom` 和 `boxItem` 作为参数。在这个函数中，我们可以根据需要自定义格子的样式和内容。\n\n在这个例子中，我们在默认内容的基础上添加了一个自定义的提示信息，通过一个 `\u003cspan\u003e` 元素展示了 `boxItem.count` 中的数值。最后，我们将自定义渲染函数 `customBoxRender` 作为 `boxRender` 的值传递给了 `CalendarGraph` 组件。\n\n通过使用 `boxRender` 函数，你可以根据需求自定义格子的内容，添加任何你想要的元素或样式。\n\n### 样式定制\n\n你可以通过自定义样式前缀 (`prefixCls`) 来自定义组件的样式。例如，将样式类名设置为 `custom-calendar`，然后使用相应的 CSS 样式来覆盖默认样式。\n\n### 格子颜色\n\n通过 `colorLevel` 和 `getBoxColor` 可以自定义格子的颜色。`colorLevel` 是一个颜色等级列表，定义了每个值范围的颜色。`getBoxColor` 是一个函数，接收当前格子的数据项和是否为选中状态作为参数，并返回相应的颜色值。\n\n### 格子周提示标签\n\n通过 `weekLabelList` 可以自定义格子周提示标签。每个标签包含两个属性：\n\n- `label`: 周提示文本。\n- `col`: 标签对应的列数。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Frc-calendar-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-component%2Frc-calendar-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-component%2Frc-calendar-graph/lists"}