Calendar: add Calendar component (ElemeFE#14908)

components.json

@@ -72,5 +72,6 @@
   "timeline-item": "./packages/timeline-item/index.js",
   "link": "./packages/link/index.js",
   "divider": "./packages/divider/index.js",
-  "image": "./packages/image/index.js"
+  "image": "./packages/image/index.js",
+  "calendar": "./packages/calendar/index.js"
 }

examples/demo-styles/calendar.scss

@@ -0,0 +1,5 @@
+.demo-calendar.demo-block {
+  .is-selected {
+    color: #1989FA;
+  } 
+}

examples/demo-styles/index.scss

@@ -2,6 +2,7 @@
 @import "./badge.scss";
 @import "./border.scss";
 @import "./button.scss";
+@import "./calendar.scss";
 @import "./card.scss";
 @import "./carousel.scss";
 @import "./cascader.scss";

examples/docs/en-US/calendar.md

@@ -0,0 +1,65 @@
+## Calendar
+
+Display date.
+
+### Basic
+
+:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Custom Content
+
+:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
+```html
+<el-calendar>
+  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### Range
+
+:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| value / v-model | binding value | Date/string/number | —            | —        |
+| range           | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array     | —           | —      |
+
+### dateCell scoped slot 参数
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| date            | date the cell represents  | Date      | —                     | —        |
+| data            | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd    | Object      | —           | —      |

examples/docs/es/calendar.md

@@ -0,0 +1,65 @@
+## Calendar
+
+Display date.
+
+### Basic
+
+:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Custom Content
+
+:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
+```html
+<el-calendar>
+  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### Range
+
+:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| value / v-model | binding value | Date/string/number | —            | —        |
+| range           | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array     | —           | —      |
+
+### dateCell scoped slot 参数
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| date            | date the cell represents  | Date      | —                     | —        |
+| data            | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd    | Object      | —           | —      |

examples/docs/fr-FR/calendar.md

@@ -0,0 +1,65 @@
+## Calendar
+
+Display date.
+
+### Basic
+
+:::demo Set `value` to specify the currently displayed month. If `value` is not specified, current month is displayed. `value` supports two-way binding.
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### Custom Content
+
+:::demo Customize what is displayed in the calendar cell by setting `scoped-slot` named `dateCell`. In `scoped-slot` you can get the date (the date of the current cell), data (including the type, isSelected, day attribute). For details, please refer to the API documentation below.
+```html
+<el-calendar>
+  <!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### Range
+
+:::demo Set the `range` attribute to specify the display range of the calendar. Start time must be Monday, end time must be Sunday, and the time span cannot exceed two months.
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| value / v-model | binding value | Date/string/number | —            | —        |
+| range           | time range, including start time and end time. Start time must be Monday, end time must be Sunday, the time span cannot exceed two months | Array     | —           | —      |
+
+### dateCell scoped slot 参数
+| Attribute       | Description   | Type      | Accepted Values       | Default  |
+|-----------------|-------------- |---------- |---------------------- |--------- |
+| date            | date the cell represents  | Date      | —                     | —        |
+| data            | { type, isSelected, day}. `type` indicates which month the date belongs, optional values are prev-month, current-month, next-month; `isSelected` indicates whether the date is selected; `day` is the formatted date in the format yyyy-MM-dd    | Object      | —           | —      |

examples/docs/zh-CN/calendar.md

@@ -0,0 +1,65 @@
+## Calendar calendar
+
+显示日期
+
+### 基本
+
+:::demo 设置 `value` 来指定当前显示的月份。如果 `value` 未指定，则显示当月。`value` 支持 `v-model` 双向绑定。
+```html
+<el-calendar v-model="value">
+</el-calendar>
+
+<script>
+  export default {
+    data() {
+      return {
+        value: new Date()
+      }
+    }
+  }
+</script>
+```
+:::
+
+### 自定义内容
+
+:::demo 通过设置名为 `dateCell` 的 `scoped-slot` 来自定义日历单元格中显示的内容。在 `scoped-slot` 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。详情解释参考下方的 API 文档。
+```html
+<el-calendar>
+  <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
+  <template
+    slot="dateCell"
+    slot-scope="{date, data}">
+    <p :class="data.isSelected ? 'is-selected' : ''">
+      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
+    </p>
+  </template>
+</el-calendar>
+<style>
+  .is-selected {
+    color: #1989FA;
+  }
+</style>
+```
+:::
+
+### 自定义范围
+
+:::demo 设置 `range` 属性指定日历的显示范围。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。
+```html
+<el-calendar :range="['2019-03-04', '2019-03-24']">
+</el-calendar>
+```
+:::
+
+### Attributes
+| 参数             | 说明          | 类型      | 可选值        | 默认值  |
+|-----------------|-------------- |---------- |------------ |-------- |
+| value / v-model | 绑定值         | Date/string/number | —  | —      |
+| range           | 时间范围，包括开始时间与结束时间。开始时间必须是周一，结束时间必须是周日，且时间跨度不能超过两个月。 | Array     | —           | —      |
+
+### dateCell scoped slot 参数
+| 参数             | 说明          | 类型      | 可选值        | 默认值  |
+|-----------------|-------------- |---------- |------------ |-------- |
+| date            | 单元格代表的日期 | Date      | —           | —      |
+| data            | { type, isSelected, day}，`type` 表示该日期的所属月份，可选值有 prev-month，current-month，next-month；`isSelected` 标明该日期是否被选中；`day` 是格式化的日期，格式为 yyyy-MM-dd    | Object      | —           | —      |

examples/nav.config.json

@@ -260,6 +260,10 @@
               "path": "/divider",
               "title": "Divider 分割线"
             },
+            {
+              "path": "/calendar",
+              "title": "Calendar 日历"
+            },
             {
               "path": "/image",
               "title": "Image 图片"
@@ -530,6 +534,10 @@
               "path": "/divider",
               "title": "Divider"
             },
+            {
+              "path": "/calendar",
+              "title": "Calendar"
+            },
             {
               "path": "/image",
               "title": "Image"
@@ -800,6 +808,10 @@
               "path": "/divider",
               "title": "Divider"
             },
+            {
+              "path": "/calendar",
+              "title": "Calendar"
+            },
             {
               "path": "/image",
               "title": "Image"
@@ -1070,6 +1082,10 @@
               "path": "/divider",
               "title": "Divider"
             },
+            {
+              "path": "/calendar",
+              "title": "Calendar"
+            },
             {
               "path": "/image",
               "title": "Image"

packages/calendar/index.js

@@ -0,0 +1,8 @@
+import Calendar from './src/main';
+
+/* istanbul ignore next */
+Calendar.install = function(Vue) {
+  Vue.component(Calendar.name, Calendar);
+};
+
+export default Calendar;