A calendar which is like github commit calendar, but the data to be displayed is decided by yourself.
npm install commit-calendar
You can use this in your react project like this:
const Page = () => {
const data = [
{ date: '2023-01-01', count: 2 },
{ date: '2023-01-02', count: 2 },
{ date: '2023-02-03', count: 1 },
{ date: '2023-05-11', count: 5 },
{ date: '2023-07-20', count: 10 },
{ date: '2023-09-10', count: 4 },
{ date: '2023-11-27', count: 3 },
]
return (
<>
<!-- other codes -->
<CommitCalendar dataSource={data} />
<!-- other codes -->
</>
)
}
Then you will see the calendar:
name | meaning | type |
---|---|---|
dataSource | Array containing date and count | Array<{ date: any, count:number }> |
options | configuration of calendar styles | Object (see next part: Options) |
year | which year to be displayed | number or string or Date |
Required. Including three segments:
- bgColor: Array;
- borderColor: Array;
- minCount: Array;
Optional. Including two segments:
- color?: string;
- fontSize?: string;
Optional. Same with weekLabelStyles.
Optional. Including three segments:
- bgColor?: string;
- borderColor?: string;
- borderRadius?: string;
Optional. Including five segments:
- bottomTip?: React.ReactNode;
- lessText?: string;
- moreText?: string;
- lessTextColor?: string;
- moreTextColor?: string;
- enable choosing year
- enable customizing color
- supporting different locale
v1.0.0 2023-12-25
- ๐ธ Finish basic commit-calendar component and publish to npmjs.com
v1.1.0 2023-12-29
- ๐ธ Support changing year
- ๐ Fix cols displayed wrong
v1.1.1 2023-01-02
- ๐ธ Support custom styles
v1.1.2 2023-01-02
- โ๏ธ Update docs and publish homepage with git pages