# react-calendar

**Repository Path**: yin-chunyang/react-calendar

## Basic Information

- **Project Name**: react-calendar
- **Description**: react 日历组件；一个可以上下收起展开的日历，收起展示所在日期一周的信息，展开展示月的信息
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: calendar-toggle
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-08-14
- **Last Updated**: 2025-05-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react typescript vite
一个用来回顾react，ts的仓库，顺便做一个日历组件

![这是图片](./src/assets/demo.png)

**使用该组件需要配置 css modules**
- vite配置css modules示例：
```js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  css: {
    modules: {
      localsConvention: 'camelCaseOnly' // Optional, to ensure camelCase conversion
    }
  }
})
```

**基本使用**
```
npm i sa-calendar-react
```
```js
import { FC } from "react";
import Calendar from 'sa-calendar-react';
const App:FC = () =>{
    return <>
        <Calendar date={new Date()} firstDayOfWeek={1}></Calendar>
    </>
} 
export default App;
```
**更多例子：** https://gitee.com/yin-chunyang/react-calendar/blob/calendar-toggle/src/App.tsx

# calendar
## props
| 属性               | 类型                                                      | 说明                                        |
|------------------|---------------------------------------------------------|-------------------------------------------|
| date             | Date对象                                                  | 日历所展示日期的月份                                |
| firstDayOfWeek   | number                                                  | 日期展示第一列是周几                                |
| ?isFixedRows     | boolean                                                 | true固定6*7，false月份时间变化5、6自动；默认不加固定6行       |
| ?taskData        | Record<string,any>[]                                    | 用来映射任务到每天的对象中，数组列表中要含有一个日期格式的字符串，默认获取date |
| ?taskDataDateMap | string                                                  | 修改获取任务列表获取日期的字段                           |
| ?onChange        | onChange?:(arg0:CalendarProps,arg1:dateTableType)=>void | 更新日期后的事件                                  |
| ?open            | boolean                                                 | 带上该参数开启mouse交互，可上下拖动日历收缩只展示当前周            |
| ?onToggle        | (arg0:boolean)=>void                                    | 组件内mouse交互更新open触发                        |
| ?cellHeight      | number                                                  | 开启mouse交互需要设置每格的高度，在设置了open参数时才生效         |
| ?onClick         | (arg0:dateTableCell)=>void                              | 格子点击事件                                    |

## props 自定义展示内容的

| 属性         | 类型                                               | 说明                               |
|------------|--------------------------------------------------|----------------------------------|
| customWeek | customWeek?:(arg0:weekDataItemType)=>JSX.Element | 自定义渲染周内容，参数内含有Date日期对象week的index |
| customDay  | customDay?:(arg0:dateTableCell)=>JSX.Element     | 自定展示日期每天的内容，返回每天的对象              |


# npm上传包指令
```
npm login

npm publish
```
每次更新修改package.json version