增加日历使用文档

chajian/rili/readme.md

+## 小程序插件 calendar 
+
+### 日历功能
+
+日历基本功能，自定义样式
+
+### 先睹为快
+
+![IMG_2556](http://ow20g4tgj.bkt.clouddn.com/2018-06-28-IMG_2556.PNG)
+
+
+### 使用方法：
+
+1、 在微信小程序管理后台——设置——第三方服务，按 AppID（ wx23a9cef3522e4f7c）搜索到该插件并申请授权。 
+
+2、在要使用该插件的小程序 app.json 文件中引入插件声明。 
+
+```json
+"plugins": {
+    "calendar": {
+        "version": "1.0.0",
+        "provider": "wx23a9cef3522e4f7c"
+    }
+}
+```
+
+3、在需要使用到该插件的小程序页面的 JSON 配置文件中，做以下配置： 
+
+```json
+{
+  "usingComponents": {
+    "calendar": "plugin://calendar/calendar"
+  }
+}
+```
+
+4、在相应的 HTML 页面中添加以下语句即可完成插件的嵌入。 
+
+```html
+<calendar />
+```
+
+5、说明：默认的用法，将具备以下样式特点：
+
+1. 显示当前月份的日历；
+2. 显示日历标题、显示上下月按钮；
+3. 显示周标题，周标题默认为 cn 类型，即中文简写；
+4. 显示日期下方的小圆点；
+
+| 属性名           | 类型       | 默认值         | 说明                                         |
+| :--------------- | :--------- | :------------- | :------------------------------------------- |
+| `curYear`        | `Number `  | 当前年份       | 年份                                         |
+| `curMonth`       | `Number `  | 当前月份       | 月份 (0 - 11)                                |
+| `day`            | `Number `  | 当前日期       | 日期 (1-31 若日期超过该月天数，月份自动增加) |
+| `header_show`    | `Boolean ` | `true`         | 主标题是否显示                               |
+| `next`           | `Boolean ` | `true`         | 是否显示下个月按钮                           |
+| `prev`           | `Boolean ` | `true`         | 是否显示下个月按钮                           |
+| `remark_show`    | `Boolean ` | `false`        | 备注是否显示                                 |
+| `remark_style`   | ` String ` | `headline`     | 备注类型                                     |
+| `count_num`      | `Number `  | 0              | 备注类型为date 备注信息1                     |
+| `count_ber`      | `Number `  | 0              | 备注类型为date 备注信息2                     |
+| `count_txt`      | ` String ` | 此处为备注信息 | 备注类型为headline 备注信息                  |
+| `weekTitle_show` | `Boolean ` | `true`         | 周标题是否显示                               |
+| `week_type`      | ` String ` | `cn`           | 周标题类型                                   |
+| `active_type`    | ` String ` | `circle`       | 选中日期样式                                 |
+| `circle_show`    | `Boolean ` | `true`         | 日期下方的点是否显示（每过一天添加一个）       |
+| `pitch_on`       | ` String ` | `circle`       | 日期下方的点样式                             |
+| `appear`         | `Boolean ` | `false`        | 样式线是否显示                               |
+| `mystatus`       | ` Array`   | [ ]            | 想要的对应日期的状态                         |
+
+```html
+<calendar 
+cur-year="{{curYear}}"
+cur-month="{{curMonth}}" 
+day="{{day}}" 
+header_show='{{header_show}}' 
+prev='{{prev}}' 
+next='{{next}}' 
+/>
+```
+
+```js
+data: {
+    curYear: new Date().getFullYear(), // 年份
+    curMonth: new Date().getMonth(),// 月份 0-11
+    day: new Date().getDate(), // 日期 1-31 若日期超过该月天数，月份自动增加
+    header_show: true, // 主标题是否显示
+    prev: true, // 上一个月按钮是否显示
+    next: true, // 下一个月按钮是否显示
+  },
+```
+
+
+
+#### remark_style 有效值
+
+| 值         | 说明     |
+| ---------- | -------- |
+| `headline` | 普通备注 |
+| `date`     | 出勤备注 |
+
+#### week_type 有效值
+
+| 值        | 说明                                      |
+| --------- | ----------------------------------------- |
+| `cn`      | 显示为：日, 一, 二, 三, 四, 五, 六        |
+| `en`      | 显示为：S, M, T, W, T, F, S               |
+| `full-en` | 显示为：Sun, Mon, Tue, Wed, Thu, Fri, Sat |
+
+#### active_type 有效值
+
+| 值        | 说明     |
+| --------- | -------- |
+| `circle`  | 圆形背景 |
+| `square` | 方形背景 |
+
+#### pitch_on 有效值
+
+| 值        | 说明     |
+| --------- | -------- |
+| `circle`  | 圆形背景 |
+| `square` | 方形背景 |
+
+
+
+####  事件
+
+注： 在js写方法 在html传入
+
+| 事件方法     | 说明       |
+| ------------ | ---------- |
+| `nextMonth`  | 点击下个月 |
+| `prevMonth`  | 点击上个月 |
+| `selectDate` | 点击日期   |
+
+```html
+<calendar bindselectDate='selectDate'  bindnextMonth='nextMonth' bindprevMonth='prevMonth'/>
+```
+
+```js
+
+  /**
+    * 点击上个月
+    */
+  nextMonth: function (e) {
+    console.log(e)
+    const currentYear = e.detail.currentYear;
+    const currentMonth = e.detail.currentMonth;
+    wx.showModal({
+      title: '当前日期',
+      content: '当前年份：' + currentYear + '年\n当前月份：' + currentMonth + '月'
+    });
+  },
+```
+
+样式 
+
+| 类名              | 说明                                                         |
+| ----------------- | ------------------------------------------------------------ |
+| `calendar-style`  | 日历整体样式                                                 |
+| `header-style`    | 主标题样式                                                   |
+| `weektitle-style` | 周标题面板样式                                               |
+| `datatitle-style` | 日期面板样式                                                 |
+| `dotcolor-o`      | 对应日期的状态为1 日期下方的点颜色变化 demo模拟的出勤情况 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息 |
+| `dotcolor-t`      | 对应日期的状态为其他 日期下方的点颜色变化 demo模拟的出勤情况 0:未出勤 1:正常出勤 2:事假 3:病假 9:休息 |
+| `headline-style`  | 备注类型为headline的备注信息样式                             |
+| `atefont-style`   | 日期字体样式                                                 |
+
+注： 在wxss自定义写样式 在html传入
+
+例：
+
+```css
+/* 主题面板样式  */
+.header-style{
+  background: #188be4 ;  
+  color: #fff;
+}
+```
+
+```HTML
+<calendar header-style='header-style' />
+```
+