# ss-vue-calendar

> 1. 使用SsVueCalendar组件 ```js npm install ss-vue-calendar import SsVueCalendar from 'ss-vue-calendar' import "ss-vue-calendar/style.css" createApp(App).use(SsVueCalendar).mount('#app') // 如果项目中ts警告，`npm install @xxxxx` (如果存在)，或者添加一个包含 `

Latest version **0.0.5** (published 2022-04-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install ss-vue-calendar
pnpm add ss-vue-calendar
yarn add ss-vue-calendar
bun add ss-vue-calendar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-04-28 |
| First published | 2022-04-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 105.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex |
| Maintainers | alex.ss |
| Keywords | vue3, calendar |

## Links

- npm: https://www.npmjs.com/package/ss-vue-calendar
- npm.io page: https://npm.io/package/ss-vue-calendar

## Recent versions

- 0.0.5 (latest) — 2022-04-28
- 0.0.4 — 2022-04-28
- 0.0.3 — 2022-04-25
- 0.0.2 — 2022-04-25
- 0.0.1 — 2022-04-25

## README

1. 使用SsVueCalendar组件
  ```js
    npm install ss-vue-calendar
    import SsVueCalendar from 'ss-vue-calendar'
    import "ss-vue-calendar/style.css"
    createApp(App).use(SsVueCalendar).mount('#app')
    // 如果项目中ts警告，`npm install @xxxxx` (如果存在)，或者添加一个包含 `declare module ‘xxxxx‘；` 的新声明(.d.ts)文
    // 只需要在src下创建index.d.ts，内容是：declare module 'ss-vue-calendar'
  ```
2. SsVueCalendar属性
  ```html
    <ss-vue-calendar :width='480' :height='480' :islunarCalendar='false'></ss-vue-calendar>
  ```

  |  属性   | 说明  | 类型   | 默认值  |
  |  ----  | ----  |----  | ----  |
  | width  | 宽度，支持数字/px/% | number/string   | 480 |
  | height  | 高度，支持数字/px/%  |number/string  | 480 |
  | islunarCalendar  | 是否显示农历  |boolean  | true |

3. SsVueCalendar事件
  ```html
    <ss-vue-calendar @resetTodayHandle='xx' ></ss-vue-calendar>
  ```

  |  事件   | 说明  | 参数类型   |
  |  ----  | ----  |----  | 
  | resetTodayHandle  | 点击‘今天’按钮触发 | params ，今天的年月日信息   |
  | selectDayHandle  | 点击可点击日期触发  |params，选中日的年月日信息   | 
  | currentSelectDayHandle  | 监听到选中日变动时触发  |params，选中日的年月日信息  | 
  | updateYearHandle  | 年下拉框选中时触发  |number，选中的年  | 
  | updateMonthHandle  | 月下拉框选中时触发  |number，选中的月  | 
  

  其中params参数
  ```
    {
      day: 阳历日
      month: 阳历月
      type: "current"  //current表示当月，last表示上月,next表示下月
      week: 阳历周 // 0~6分别代表周日到周六
      year: 阳历年
      lunarDay: 农历日
      lunarMonth: 农历月
      lunarYear: 农历年
    }
  ```

4. SsVueCalendar插槽
  ```html
    <ss-vue-calendar>
      <template #tableHeader="scope">
        <!--scope中包含currentYear，currentMonth，currentDay信息-->
      </template>
      <template #theadCell="scope">
        <!--scope中包含星期几【'日', '一', '二', '三', '四', '五', '六'】的信息-->
      </template>
      <template #tbodyCell="scope">
        <!--scope中包含当前单元格日期信息-->
      </template>
    </ss-vue-calendar>
  ```

  |  插槽名   | 说明  | 
  |  ----  | ----  |
  | tableHeader  | 可替换表格头部，如年月下拉框等 | 
  | theadCell  | 可替换表格头部周一，周二.....  |
  | tbodyCell  | 可自定义单元格内容以及样式  |

---
_Source: https://npm.io/package/ss-vue-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._