{"id":26000004,"url":"https://github.com/lspriv/wx-calendar","last_synced_at":"2025-03-05T18:42:36.608Z","repository":{"id":46424243,"uuid":"355835484","full_name":"lspriv/wx-calendar","owner":"lspriv","description":"微信小程序日历","archived":false,"fork":false,"pushed_at":"2025-02-12T09:23:28.000Z","size":751,"stargazers_count":318,"open_issues_count":2,"forks_count":47,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-12T10:32:16.936Z","etag":null,"topics":["calendar","miniprogram","wechat"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lspriv.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-08T09:05:13.000Z","updated_at":"2025-02-09T02:32:17.000Z","dependencies_parsed_at":"2024-01-19T17:40:48.640Z","dependency_job_id":"eee732b1-e568-4584-b187-e482bb361790","html_url":"https://github.com/lspriv/wx-calendar","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lspriv%2Fwx-calendar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lspriv%2Fwx-calendar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lspriv%2Fwx-calendar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lspriv%2Fwx-calendar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lspriv","download_url":"https://codeload.github.com/lspriv/wx-calendar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242083189,"owners_count":20069252,"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","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":["calendar","miniprogram","wechat"],"created_at":"2025-03-05T18:40:52.194Z","updated_at":"2025-03-05T18:42:36.595Z","avatar_url":"https://github.com/lspriv.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"## WX Calendar\n\n\u003e\n\n\u003c!-- https://shields.io/ --\u003e\n![NPM Version](https://img.shields.io/npm/v/@lspriv/wx-calendar)\n![NPM Downloads](https://img.shields.io/npm/dw/@lspriv/wx-calendar)\n![Static Badge](https://img.shields.io/badge/coverage-later-a9a9a9)\n![GitHub License](https://img.shields.io/github/license/lspriv/wx-calendar)\n\n\n微信小程序日历\n\n\u003e     · 年月周日程视图\n\u003e     · 支持skyline和webview渲染\n\u003e     · 支持插件扩展\n\n\n### 设计\n\n[![pizCOOg.png](https://s11.ax1x.com/2024/01/06/pizCOOg.png)](https://imgse.com/i/pizCOOg)\n\n[![pEKJ3wD.png](https://s21.ax1x.com/2025/02/15/pEKJ3wD.png)](https://imgse.com/i/pEKJ3wD)\n\n\n\n### 使用\n小程序基础库 `SDKVersion` \u003e= 3.0.0\n\n#### 1.安装\n```bash\nnpm i @lspriv/wx-calendar -S\n```\n\n#### 2.构建\n微信小程序开发工具菜单栏：`工具` --\u003e `构建 npm`\n[*官方文档*](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html#_2-%E6%9E%84%E5%BB%BA-npm)\n\n#### 3.引入配置\n在页面或全局配置文件中配置\n```json\n{\n    \"usingComponents\": {\n        \"calendar\": \"@lspriv/wx-calendar\"\n    }\n}\n```\n\n#### 4.页面使用\n在页面wxml文件中使用\n```html\n\u003ccalendar id=\"calendar\" bindload=\"handleLoad\" /\u003e\n```\n\n```javascript\nconst { WxCalendar } = require('@lspriv/wx-calendar/lib');\nconst { LunarPlugin } = require('@lspriv/wc-plugin-lunar');\n// 使用农历插件\nWxCalendar.use(LunarPlugin);\n\nPage({\n  handleLoad(detail) {\n    console.log('calendar load', detail);\n    \n    const calendar = this.selectComponent('#calendar');\n    console.log('calendar', calendar);\n  }\n})\n```\n\n\n#### 5.类型检查\n由于小程序构建npm的特殊性，日历组件本身是非纯js库，为了获得正确的的类型提示，需要在小程序根目录的jsconfig.json或是tsconfig.json文件中指明路径。\n```json\n{\n  \"compilerOptions\": {\n    \"paths\": {\n      \"@lspriv/wx-calendar/*\": [\n          \"./node_modules/@lspriv/wx-calendar/dist/*\"\n        ]\n    }\n  }\n}\n```\n\n\u003e [!IMPORTANT]\n\u003e 请在 bindload 事件后执行 selectComponent('#calendar') 操作。\n\n### 二次开发\nalpha分支是最新开发分支，develop是测试包分支，master是稳定包分支\n\n#### 启动\n```bash\nnpm install\n# 启动，默认skyline配置\nnpm run dev\n# 设置webview\n# npm run dev @webview 或者 npm run dev @W\n```\n\n#### 打包\n```bash\nnpm run build\n```\n\n#### 发包（预览包）\n```bash\nnpm run package\n```\n\u003e [!NOTE]\n\u003e 这个发包命令执行了打包、发包和推送仓库三部分，所以不必重复执行打包命令\n\n#### 测试\n\n测试尚未写完\n\n### 多端支持\n#### Donut\n需要开启以下选项，开发工具右上角 -\u003e 详情 -\u003e 本地设置\n- 使用 SWC 编译脚本文件\n- 编译 worklet 代码\n- Android XWeb SDK，在 project.miniapp.json中开启\n\n#### UniApp\n1. 项目根目录下创建 components 文件夹，将打包后dist里的文件拷贝过来放到单独的一个文件夹，比如 components/wx-calendar/**\n2. 在 `pages.json` 的 `globalStyle` 中配置 `usingComponents`\n   ```json\n   {\n      \"globalStyle\": {\n        \"wx-calendar\": \"/components/wx-calendar\"\n      } \n   }\n   ```\n注意事项请参考 [UniApp小程序自定义组件支持](https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html)\n\n#### Taro\n请使用日历组件 [Taro插件](https://github.com/lspriv/plugin-taro)\n\u003e [!NOTE]\n\u003e 如果在 Taro 项目引用了小程序原生的组件，那么该项目将不再具备多端转换的能力。\n\n\n### 类型说明\n以下出现的类型定义：\n```typescript\ntype CalendarDay = {\n  year: number; // 年\n  month: number; // 月\n  day: number; // 日\n};\n```\n\n### Props 属性\n以下所有属性都是可选填属性\n\u003ctable\u003e\n    \u003ctr\u003e\n        \u003cth\u003e属性\u003c/th\u003e\n        \u003cth\u003e类型\u003c/th\u003e\n        \u003cth\u003e说明\u003c/th\u003e\n        \u003cth\u003e默认值\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eview\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e视图\u003c/td\u003e\n        \u003ctd\u003emonth [week|schedule]\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003emarks\u003c/td\u003e\n        \u003ctd\u003earray\u003c/td\u003e\n        \u003ctd\u003e日程、角标和节假日标记\u003c/td\u003e\n        \u003ctd\u003e[]\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003evibrate\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e点选日期是否震动\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edarkmode\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e深色模式（跟随系统）\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edate\u003c/td\u003e\n        \u003ctd\u003estring|number\u003c/td\u003e\n        \u003ctd\u003e选中日期\u003c/td\u003e\n        \u003ctd\u003exxxx-xx-xx|timestamp\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eweekstart\u003c/td\u003e\n        \u003ctd\u003enumber\u003c/td\u003e\n        \u003ctd\u003e周首日，0|1|2|3|4|5|6\u003c/td\u003e\n        \u003ctd\u003e0\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003estyle\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e设置主题样式变量\u003c/td\u003e\n        \u003ctd\u003e''\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efont\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e设置字体\u003c/td\u003e\n        \u003ctd\u003e''\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eareas\u003c/td\u003e\n        \u003ctd\u003earray\u003c/td\u003e\n        \u003ctd\u003e自定义布局区域\u003c/td\u003e\n        \u003ctd\u003e['header', 'title', 'subinfo', 'today', 'viewbar', 'dragbar']\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eviewGesture\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e是否滑动手势控制视图\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003esameChecked\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e保持选中日期样式一致\u003c/td\u003e\n        \u003ctd\u003efalse\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ecustomNavBar\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e组件所在页面是否自定义导航栏\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ealignDate\u003c/td\u003e\n        \u003ctd\u003estring\u003c/td\u003e\n        \u003ctd\u003e日期排布（居中｜基线对齐）\u003c/td\u003e\n        \u003ctd\u003ecenter [center|baseline]\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eshowRest\u003c/td\u003e\n        \u003ctd\u003eboolean\u003c/td\u003e\n        \u003ctd\u003e非本月日期是否显示\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e [!TIP] \n\u003e 1.7.0+版本已经移除了固定视图属性，新增手势控制属性 `viewGesture` ，用以下方式实现固定视图，有更高的自由度\n\n固定视图的新方式\n```html\n\u003c!-- 固定为周视图 --\u003e\n\u003c!-- view 默认初始视图 --\u003e\n\u003c!-- view-gesture 取消手势控制 --\u003e\n\u003c!-- areas 只保留四个区域，将viewbar和dragbar移除 --\u003e\n\u003ccalendar \n  view=\"week\"\n  view-gesture=\"{{ false }}\"\n  areas=\"{{ ['header', 'title', 'subinfo', 'today'] }}\"\n/\u003e\n```\n\n\u003e [!TIP] \n\u003e 关于属性 `marks`\n\u003e ```typescript\n\u003e // 标记里的日期，要么输入年月日year｜month｜day，要么输入日期 date\n\u003e type CalendarMark = {\n\u003e   year?: number; // 年\n\u003e   month?: number; // 月 \n\u003e   day?: number; // 日\n\u003e   date?: string | number | Date; // 日期 yyyy-mm-dd | timestamp | Date\n\u003e   type: 'schedule' | 'corner' | 'festival' | 'solar'; // 日程｜角标｜节假日 | 日期文字\n\u003e   text: string; // 内容\n\u003e   style?: string | Record\u003cstring, string | number\u003e; // 标记样式\n\u003e }\n\u003e // 样式标记\n\u003e type CalendarStyleMark = {\n\u003e   year?: number; // 年\n\u003e   month?: number; // 月 \n\u003e   day?: number; // 日\n\u003e   date?: string | number | Date; // 日期 yyyy-mm-dd | timestamp | \n\u003e   style: string | Record\u003cstring, string | number\u003e;\n\u003e }\n\u003e ```\n\u003e 角标内容最好一个字符长度，只对一个字符校正了位置，多出的请自行调整位置\n\n\u003e [!IMPORTANT]\n\u003e 如果组件所在页面未开启自定义导航栏，请设置属性 `customNavBar` 为 `false`\n### Events 事件\n\n[***`bindload`***](#bindload)  日历加载完成\n```typescript\ntype LoadEventDetail = {\n    checked: CalenderDay; // 当前选择日期\n    view: 'week' | 'month' | 'schedule'; // 当前视图\n    range: [start: CalenderDay, end: CalenderDay]; // 当前渲染的月份范围\n}\n```\n获取组件实例\n```html\n\u003ccalendar id=\"calendar\" bindload=\"handleLoad\" /\u003e\n```\n```typescript\nimport { CalendarExport } from '@lspriv/wx-calendar/lib';\n\nPage({\n  handleLoad() {\n    const calendar = this.selectComponent('#calendar') as CalendarExport; \n    // 如果你使用了其他插件，比如 WxCalendar.use(AnyPlugin)，则可以\n    // const calendar = ... as CalendarExport\u003c[typeof AnyPlugin]\u003e;\n  }\n});\n```\n\n[***`bindclick`***](#bindload)  日期点击\n```typescript\ntype LoadEventDetail = {\n    checked: CalenderDay; // 当前点击日期\n    view: 'week' | 'month' | 'schedule'; // 当前视图\n}\n```\n\u003e [!NOTE]\n\u003e 日期点击事件，若有必要请自行防抖处理\n\n[***`bindchange`***](#bindchange)  日期选中变化\n```typescript\ntype ChangeEventDetail = {\n    checked: CalenderDay; // 当前选择日期\n    view: 'week' | 'month' | 'schedule'; // 当前视图\n    range: [start: CalenderDay, end: CalenderDay]; // 当前渲染的月份范围\n}\n```\n\n[***`bindviewchange`***](#bindviewchange)   面板视图变化\n```typescript\ntype ViewChangeEventDetail = {\n    checked: CalenderDay; // 当前选择日期\n    view: 'week' | 'month' | 'schedule'; // 当前视图\n}\n```\n\n[***`bindschedule`***](#bindviewchange)   点击日程触发\n```typescript\ntype ScheduleEventDetail = {\n    schedules?: Array\u003cScheduleEventDetail\u003e; // 所有日程\n    schedule?: ScheduleEventDetail; // 当前点击日程\n    all: boolean; // 是否所有日程\n}\n```\n\n### Methods 方法\n\n[***`checked`***](#toDate) 选中日期\n```typescript\n{\n  /**\n   * @param date 选中日期\n   * yyyy-mm-dd | timestamp | Date | CalendarDay\n   */\n  (date: string | number | Date | CalendarDay): Promise\u003cvoid\u003e;\n}\n```\n\n[***`toggleView`***](#toggleView) 切换视图\n```typescript\n{\n  /**\n   * @param [view] 要切换的视图\n   * 当view未指定时，会在周月视图之间切换\n   */\n  (view?: 'month' | 'week' | 'schedule'): void;\n}\n```\n\n[***`openAnnual`***](#openAnnual) 打开年度面板\n```typescript\n{\n  (): Promise\u003cvoid\u003e;\n}\n```\n\n[***`getMarks`***](#getMarks) 获取完整的日期标记\n```typescript\n{\n  /**\n   * @param date 获取日期\n   */\n  (date: CalendarDay): PluginEntireMarks;\n}\n```\n\n[***`getPlugin`***](#getPlugin) 获取插件实例\n```typescript\n{\n  /**\n   * @param key 插件的KEY\n   */\n  (key: string): InstanceType\u003cPluginConstructor\u003e;\n}\n```\n \n[***`updateDates`***](#updateDates) 更新日期数据\n```typescript\n{\n  /**\n   * 若不指定哪些日期更新，默认刷新全部\n   */\n  (dates?: Array\u003cCalendarDay\u003e): Promise\u003cvoid\u003e;\n}\n```\n\n\n### 样式\n组件开启了样式隔离，仅可以调整字体大小和色号，可通过传入style属性修改以下css变量调整主题\n```css\n.wcc {\n    --wc-primary: #409EFF; /* 主题色 */\n    \n    /* 浅色主题 */\n    --wc-bg-light: #FFF; /* 主背景色 */\n    --wc-title-color-light: #333; /* 左上角日期标题 */\n    --wc-title-sub-color-light: #7A7A7A; /* 左上角日期标题的右侧描述 */\n    --wc-opt-color-light: #409EFF; /* 视图控制条主色 */\n    --wc-week-color-light: #ABABAB; /* 星期 */\n    --wc-date-color-light: #333; /* 日期 */\n    --wc-mark-color-light: #ABABAB; /* 日期下方信息 */\n    --wc-dot-color-light: #ABABAB; /* 日期上方‘･’ */\n    --wc-schedule-color-light: #409EFF; /* 日程默认 */\n    --wc-schedule-bg-light: #EAEEF2; /* 日程默认背景 */\n    --wc-today-color-light: #409EFF; /* 日期（今日） */\n    --wc-solar-color-light: #409EFF; /* 日期下方信息默认（节气，节假日） */\n    --wc-checked-color-light: #333; /* 被选日期 */\n    --wc-checked-mark-color-light: #ABABAB; /* 被选日期下方信息 */\n    --wc-checked-dot-color-light: #ABABAB; /* 被选日期上方‘･’ */\n    --wc-checked-today-color-light: #FFF; /* 被选日期（今日） */\n    --wc-checked-bg-light: #F5F5F5; /* 被选日期背景圆圈 */\n    --wc-checked-today-bg-light: #409EFF; /* 被选日期背景圆圈（今日） */\n    --wc-control-bg-light: #DFDFDF; /* 底部控制条背景 */\n    --wc-annual-bg-light: #FFF; /* 年面板背景 */\n    --wc-annual-title-color-light: #333; /* 年面板左上角标题 */\n    --wc-annual-title-sub-color-light: #7A7A7A; /* 年面板左上角标题右侧信息 */\n    --wc-annual-cv-month-color-light: #333; /* 年面板月份标题颜色 */\n    --wc-annual-cv-week-color-light: #ABABAB; /* 年面板星期颜色 */\n    --wc-annual-cv-date-color-light: #333; /* 年面板普通日期颜色 */\n    --wc-annual-cv-rest-color-light: #ABABAB; /* 年面板休息日颜色 */\n    --wc-annual-cv-checked-color-light: #FFF; /* 年面板普通日期选中时颜色 */\n    --wc-annual-cv-checked-bg-light: #F5F5F5; /* 年面板普通日期选中时背景颜色 */\n    --wc-annual-cv-present-color-light: #409EFF; /* 年面板当前月份标题和今日选中时颜色 */\n\n    /* 深色主题，以下和浅色主题一一对应 */\n    --wc-bg-dark: #000;\n    --wc-title-color-dark: #E5E5E5;\n    --wc-title-sub-color-dark: #7A7A7A;\n    --wc-opt-color-dark: #409EFF;\n    --wc-week-color-dark: #ABABAB;\n    --wc-date-color-dark: #E5E5E5;\n    --wc-mark-color-dark: #5F5F5F;\n    --wc-dot-color-dark: #ABABAB;\n    --wc-schedule-color-dark: #66B1FF;\n    --wc-schedule-bg-dark: #332D2D80;\n    --wc-today-color-dark: #409EFF;\n    --wc-solar-color-dark: #409EFF;\n    --wc-checked-color-dark: #E5E5E5;\n    --wc-checked-mark-color-dark: #5F5F5F;\n    --wc-checked-dot-color-dark: #ABABAB;\n    --wc-checked-today-color-dark: #E5E5E5;\n    --wc-checked-bg-dark: #262626;\n    --wc-checked-today-bg-dark: #409EFF;\n    --wc-control-bg-dark: #262626;\n    --wc-annual-bg-dark: #000;\n    --wc-annual-title-color-dark: #E5E5E5;\n    --wc-annual-title-sub-color-dark: #3F3F3F;\n    --wc-annual-cv-month-color-dark: #D9D9D9; \n    --wc-annual-cv-week-color-dark: #484848; \n    --wc-annual-cv-date-color-dark: #D9D9D9; \n    --wc-annual-cv-rest-color-dark: #484848; \n    --wc-annual-cv-checked-color-dark: #D9D9D9; \n    --wc-annual-cv-checked-bg-dark: #262626;\n    --wc-annual-cv-present-color-dark: #409EFF; \n\n    /** 字号 */\n    --wc-title-size: 46rpx; /** 左上角日期标题字号 */ \n    --wc-title-sub-size: 20rpx; /** 左上角日期标题右侧描述信息字号 */ \n    --wc-operator-size: 22rpx; /** 视图控制按钮字号 */ \n    --wc-week-size: 20rpx; /** 星期字号 */ \n    --wc-date-size: 36rpx; /** 日期字体字号 */ \n    --wc-mark-size: 20rpx; /** 日期下方信息字体字号 */\n    --wc-dot-size: 10rpx; /** 日期上方‘･’大小 */\n    --wc-dot-offset-x: 0; /** 日期上方‘･’水平偏移量 */ \n    --wc-dot-offset-y: 0; /** 日期上方‘･’垂直偏移量 */ \n    --wc-corner-size: 16rpx; /** 日期角标字体字号 */ \n    --wc-schedule-size: 16rpx; /** 日程字体字号 */ \n    --wc-annual-title-size: 50rpx; /** 年面板左上角年份标题字体字号 */ \n    --wc-annual-title-sub-size: 18rpx; /** 年面板左上角年份标题右侧信息字体字号 */ \n}\n```\n修改样式\n```html\n\u003ccalendar style=\"--wc-bg-light: #000;\" /\u003e\n```\n\n### 插件\n\n#### 插件使用\n```javascript\nconst { WxCalendar } = require('@lspriv/wx-calendar/lib');\nconst { YourPlugin } = require('anywhere');\n\n// WxCalendar.clearPlugin(); 清理预设插件\n\nWxCalendar.use(YourPlugin, options); // options 插件选项\n\nComponent({\n    ...\n})\n```\n\n#### 插件开发\n\n##### 基础部分\n\n```typescript \nimport { Plugin } from '@lspriv/wx-calendar/lib';\n\nclass MyPlugin implements Plugin {\n  /**\n   * 插件的 KEY 是必须的，没有此插件会被过滤掉\n   */\n  static KEY = 'my-plugin' as const;\n\n  /**\n   * 构造函数，参数为用户传入的插件选项。\n   * 此构造器可选择实现，如果没有提供选项配置或是其他初始化过程的话。\n   */\n  constructor(options?: Record\u003cstring, any\u003e) {\n    // options 引入时的插件选项\n  }\n}\n\n```\n\n##### 生命周期\n注册日历组件的三个生命周期钩子 `created` `attached` `detacched`。\n```typescript \n\nimport { Plugin, PluginService, CalendarData } from '@lspriv/wx-calendar/lib';\n\nclass MyPlugin implements Plugin {\n\n  /**\n   * 插件初始化，可选择实现该方法\n   * 在日历组件 created 阶段最后，在插件实例化后\n   * @param service PliginService实例\n   */\n  PLUGIN_ON_INITIALIZE(service: PluginService): void {\n    // 获取日历组件实例\n    const component = service.component;\n  }\n\n  /**\n   * 组件挂载，可选择实现该方法\n   * 在日历组件 attached 阶段中，此时组件的所有工具类已完成实例化，视图数据即将更新。\n   * 你可以在此方法里修改视图更新数据 sets，还可以调整一些工具实例的初始值。\n   * @param service PliginService实例\n   * @param sets 视图数据\n   */\n  PLUGIN_ON_ATTACH(service: PluginService, sets: Partial\u003cCalendarData\u003e): void {\n\n  }\n\n  /**\n   * 组件销毁，可选择实现该方法\n   * 在日历组件 detacched 阶段中\n   * @param service PliginService实例\n   */\n  PLUGIN_ON_DETACHED(service: PluginService): void {\n\n  }\n}\n\n```\n\n##### 数据标记\n添加修改和删除日期标记，以及完善补充日程数据。\n```typescript \nimport { \n  Plugin, \n  WcYear, \n  CalendarDay, \n  TrackDateResult, \n  TrackYearResult, \n  WcScheduleInfo,\n  getMarkKey, \n  getAnnualMarkKey \n} from '@lspriv/wx-calendar/lib';\n\nclass MyPlugin implements Plugin {\n  /**\n   * 捕获日期，可选择实现该方法\n   * 在此添加修改和删除【周/月/日程视图面板】的日期标记\n   * @param date 日期\n   */\n  PLUGIN_TRACK_DATE(date: CalendarDay): TrackDateResult | null {\n    // do something...\n    return {\n      schedule: [{ text: '', color: '', bgColor: '', key: getMarkKey('id', MyPlugin.KEY) }], // 设置日程数组，可选\n      corner: { text: '', color: '' }, // 设置角标，可选\n      festival: { text: '', color: '' }, // 设置节假日，可选\n      style: { backgroundColor: '', color: '' } // 设置日期样式，也可传字符串形式（如 'background-color: #409EFF;color: #fff;'），可选\n    };\n  };\n\n  /**\n   * 捕获年份，可选择实现该方法\n   * 在此添加修改和删除【年面板】的日期标记\n   * @param year 年\n   */\n  PLUGIN_TRACK_YEAR(year: WcYear): TrackYearResult | null {\n    // do something...\n\n    return {\n      subinfo: [\n        { text: '乙巳蛇年', color: '#F56C6C' },\n        { text: '农历初一', color: '#409EFF' }\n      ], \n      marks: new Map([\n        [getAnnualMarkKey({ month: 10, day: 6 }), { rwtype: 'rest' }], // 休息日，置灰\n        [getAnnualMarkKey({ month: 10, day: 7 }), { rwtype: 'work' }], // 工作日，正常\n        [getAnnualMarkKey({ month: 10, day: 12 }), { sub: '#F56C6C' }] // 自定义颜色下标\n        [getAnnualMarkKey({ month: 10, day: 20 }), { \n          style: {\n            color: { light: '#fff', dark: '#000' }, // 日期字体颜色, light浅色模式下，dark深色模式下\n            bgColor: { light: '#409EFF', dark: '#409EFF' }, // 日期背景颜色\n            opacity: { light: 1, dark: 1 }, // 不支持 0\n            bgTLRadius: { light: 50, dark: 50 }, // 日期背景左上圆角半径\n            bgTRRadius: { light: 0, dark: 0 }, // 日期背景右上圆角半径\n            bgBLRadius: { light: 0, dark: 0 }, // 日期背景左下圆角半径\n            bgBRRadius: { light: 50, dark: 50 }, // 日期背景右下圆角半径\n            bgWidth: { light: 'dateCol', dark: 'dateCol' } // 日期背景宽度，deteCol为列宽\n          } \n        }]\n      ])\n    }\n  };\n\n  /**\n   * 捕获日程信息（点击日程时执行），可选择实现该方法\n   * @param date 日期\n   * @param id 插件内标记, 由 getMarkKey 生成 key 时传入的 id，详见 PLUGIN_TRACK_DATE\n   */\n  PLUGIN_TRACK_SCHEDULE(date: CalendarDay, id:? string): WcScheduleInfo {\n\n  }\n}\n\n```\n\n##### 动作捕捉\n捕获用户的手势动作，此时动作已完成，但在日历组件默认行为之前。\n```typescript \nimport { Plugin, PluginService, EventIntercept } from '@lspriv/wx-calendar/lib';\n\nclass MyPlugin implements Plugin {\n\n  /**\n   * 拦截日期点击动作，可选择实现该方法\n   * @param service PliginService实例\n   * @param event 事件参数\n   * @param intercept 拦截器\n   */\n  PLUGIN_CATCH_TAP(service: PluginService, event: TouchEvent, intercept: EventIntercept): void {\n     // 获取日历组件实例\n    const component = service.component;\n    // 若不想事件继续传播\n    if (...) intercept();\n    // intercept(0) 直接退出 \n    // intercept(1) 继续向其他插件传播，但不会执行日历组件默认行为\n  }\n\n  /**\n   * 拦截日期跳转动作（如跳转到今日或者调用toDate方法），可选择实现该方法\n   * @param service PliginService实例\n   * @param date 要跳转的日期\n   * @param intercept 拦截器\n   */\n  PLUGIN_CATCH_MANUAL(service: PluginService, date: CalendarDay, intercept: EventIntercept): void {}\n}\n\n```\n\u003e [!NOTE] \n\u003e 本日历统计共有七个主要的动作，当前仅提供日期点击动作和日期跳转动作的捕获，七个动作分别是\n\u003e - 日期点击\n\u003e - 日期跳转（今日按钮点击跳转到今日或者调用toDate方法）\n\u003e - 头部标题点击（打开年面板）\n\u003e - 视图按钮点击（按钮切换视图）\n\u003e - 垂直手势滑动（手势切换视图）\n\u003e - 水平手势滑动（swiper滑动滑块）\n\u003e - 年面板点击月份（主面板跳转到某月）\n\n\n##### 事件响应\n响应日历组件事件 `load` `click` `change` `viewChange`。\n```typescript \nimport { Plugin, PluginService, CalendarEventDetail, OnceEmitter } from '@lspriv/wx-calendar/lib';\n\nclass MyPlugin implements Plugin {\n\n  /**\n   * 日历加载完成，可选择实现该方法\n   * @param service PliginService实例\n   * @param detail 响应数据\n   * @param emiter 事件触发器\n   */\n  PLUGIN_ON_LOAD(service: PluginService, detail: CalendarEventDetail, emiter: OnceEmitter): void {\n    // 获取日历组件实例\n    const component = service.component;\n\n    emiter.cancel(); // 取消日历组件触发 bindload 事件。\n    // emiter.emit(detail); 劫持触发 bindload 事件，和 emiter.cancel 只能二选一。\n  }\n\n   /**\n   * 日期点击事件，可选择实现该方法\n   * @param service PliginService实例\n   * @param detail 响应数据\n   * @param emiter 事件触发器\n   */\n  PLUGIN_ON_CLICK(service: PluginService, detail: CalendarEventDetail, emiter: OnceEmitter): void {\n    \n  }\n\n   /**\n   * 日期选中变化，可选择实现该方法\n   * @param service PliginService实例\n   * @param detail 响应数据\n   * @param emiter 事件触发器\n   */\n  PLUGIN_ON_CHANGE(service: PluginService, detail: CalendarEventDetail, emiter: OnceEmitter): void {\n    \n  }\n\n  /**\n   * 视图变化，可选择实现该方法\n   * @param service PliginService实例\n   * @param detail 响应数据\n   * @param emiter 事件触发器\n   */\n  PLUGIN_ON_VIEWCHANGE(service: PluginService, detail: CalendarEventDetail, emiter: OnceEmitter): void {\n\n  }\n}\n\n```\n\n##### 其他\n```typescript\nimport { Plugin, CalendarDay, PluginService, DateRange } from '@lspriv/wx-calendar/lib';\n\nclass MyPlugin implements Plugin {\n  /**\n   * 日期过滤器（提供给其他组件调用的），可选择实现该方法\n   * @param service PliginService实例\n   * @param dates 待过滤的日期数组\n   */\n  PLUGIN_DATES_FILTER(service: PluginService, dates: Array\u003cCalendarDay | DateRange\u003e): Array\u003cCalendar | DateRange\u003e {\n     // 获取日历组件实例\n    const component = service.component;\n\n    return [\n      [{ year: 2024, month: 6, day: 1 } , { year: 2024, month: 6, day: 28 }], // 日期范围\n      { year: 2024, month: 7, day: 1 } // 单点日期\n    ]\n  }\n}\n```\n\n#### 使用装饰器声明上述钩子\n```typescript\nimport { WcPlugin, Track, Catch, On, Filter } from '@lspriv/wx-calendar/lib';\n\nexport const MY_PLUGIN_KEY = 'my-plugin';\n\n@WcPlugin(MY_PLUGIN_KEY) // 声明插件和KEY\nclass MyPlugin {\n\n  @Track('date')\n  trackDate() {}\n\n  @Track('year')\n  trackYear() {}\n\n  @Catch('tap')\n  catchTap() {}\n\n  @On('load')\n  onLoad() {}\n\n  @Filter\n  datesFilter() {}\n}\n\n```\n\n\n#### 插件说明\n- `数据标记` 后引入的插件数据覆盖先引入的插件数据\n- `动作捕捉` 后引入的先执行\n- `响应事件` 按插件的引入顺序响应事件，先引入的先响应\n\n\n#### 已完成插件\n- [x] \u003ca href=\"https://github.com/lspriv/wc-plugin-lunar/tree/alpha\" target=\"_blank\"\u003e**@lspriv/wc-plugin-lunar 农历插件**\u003c/a\u003e\n- [x] \u003ca href=\"https://github.com/lspriv/wc-plugin-disabled\" target=\"_blank\"\u003e**@lspriv/wc-plugin-disabled 日历禁用插件**\u003c/a\u003e\n- [x] \u003ca href=\"https://github.com/lspriv/wc-plugin-multiple\" target=\"_blank\"\u003e**@lspriv/wc-plugin-multiple 日历多选插件**\u003c/a\u003e\n- [x] \u003ca href=\"https://github.com/lspriv/wc-plugin-ics\" target=\"_blank\"\u003e**@lspriv/wc-plugin-ics ICS日历订阅插件**\u003c/a\u003e\n- [ ] *Locale本地化插件*\n\n### 关于\n\n\u003e     有任何问题或是需求请到 `Issues` 面板提交\n\u003e     忙的时候还请见谅\n\u003e     有兴趣开发维护的道友加微信\n\n![wx_qr](https://chat.qilianyun.net/static/git/calendar/wx.png)\n ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flspriv%2Fwx-calendar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flspriv%2Fwx-calendar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flspriv%2Fwx-calendar/lists"}