Calendar 日历日程

基本用法

设置 schedules 属性

```schema: scope=”body” { “type”: “calendar”, “value”: “1638288000”, “schedules”: [ { “startTime”: “2021-12-11 05:14:00”, “endTime”: “2021-12-11 06:14:00”, “content”: “这是一个日程1” }, { “startTime”: “2021-12-21 05:14:00”, “endTime”: “2021-12-22 05:14:00”, “content”: “这是一个日程2” } ] }

  2. ## 自定义颜色
  4. ```schema: scope="body"
  5. {
  6.     "type": "calendar",
  7.     "value": "1638288000",
  8.     "schedules": [
  9.       {
  10.         "startTime": "2021-12-11 05:14:00",
  11.         "endTime": "2021-12-11 06:14:00",
  12.         "content": "这是一个日程1",
  13.         "className": "bg-success"
  14.       },
  15.       {
  16.         "startTime": "2021-12-21 05:14:00",
  17.         "endTime": "2021-12-22 05:14:00",
  18.         "content": "这是一个日程2",
  19.         "className": "bg-info"
  20.       }
  21.     ]
  22. }

```schema: scope=”body” { “type”: “calendar”, “value”: “1638288000”, “scheduleClassNames”: [“bg-success”, “bg-info”], “schedules”: [ { “startTime”: “2021-12-11 05:14:00”, “endTime”: “2021-12-11 06:14:00”, “content”: “这是一个日程1” }, { “startTime”: “2021-12-21 05:14:00”, “endTime”: “2021-12-22 05:14:00”, “content”: “这是一个日程2” } ] }

  2. ## 自定义日程展示
  4. ```schema: scope="body"
  5. {
  6.     "type": "calendar",
  7.     "value": "1638288000",
  8.     "schedules": [
  9.       {
  10.         "startTime": "2021-12-11 05:14:00",
  11.         "endTime": "2021-12-11 06:14:00",
  12.         "content": "这是一个日程1"
  13.       },
  14.       {
  15.         "startTime": "2021-12-21 05:14:00",
  16.         "endTime": "2021-12-22 05:14:00",
  17.         "content": "这是一个日程2"
  18.       }
  19.     ],
  20.     "scheduleAction": {
  21.       "actionType": "drawer",
  22.       "drawer": {
  23.         "title": "日程",
  24.         "body": {
  25.           "type": "table",
  26.           "columns": [
  27.             {
  28.               "name": "time",
  29.               "label": "时间"
  30.             },
  31.             {
  32.               "name": "content",
  33.               "label": "内容"
  34.             }
  35.           ],
  36.           "data": "${scheduleData}"
  37.         }
  38.       }
  39.     }
  40. }

支持从数据源中获取日程

  1. {
  2.     "type": "page",
  3.     "data": {
  4.       "schedules": [
  5.         {
  6.           "startTime": "2021-12-11 05:14:00",
  7.           "endTime": "2021-12-11 06:14:00",
  8.           "content": "这是一个日程1"
  9.         },
  10.         {
  11.           "startTime": "2021-12-21 05:14:00",
  12.           "endTime": "2021-12-22 05:14:00",
  13.           "content": "这是一个日程2"
  14.         }
  15.       ]
  16.     },
  17.     "body": [
  18.       {
  19.         "type": "calendar",
  20.         "value": "1638288000",
  21.         "schedules": "${schedules}"
  22.       }
  23.     ]
  24. }

放大模式

schema: scope="body" { "type": "calendar", "value": "1638288000", "largeMode": true, "schedules": [ { "startTime": "2021-12-11 05:14:00", "endTime": "2021-12-11 06:14:00", "content": "这是一个日程1" }, { "startTime": "2021-12-12 02:14:00", "endTime": "2021-12-13 05:14:00", "content": "这是一个日程2" }, { "startTime": "2021-12-20 05:14:00", "endTime": "2021-12-21 05:14:00", "content": "这是一个日程3" }, { "startTime": "2021-12-21 05:14:00", "endTime": "2021-12-22 05:14:00", "content": "这是一个日程4" }, { "startTime": "2021-12-22 02:14:00", "endTime": "2021-12-23 05:14:00", "content": "这是一个日程5" }, { "startTime": "2021-12-22 02:14:00", "endTime": "2021-12-22 05:14:00", "content": "这是一个日程6" }, { "startTime": "2021-12-22 02:14:00", "endTime": "2021-12-22 05:14:00", "content": "这是一个日程7" } ] }

Calendar 属性表

属性名 类型 默认值 说明
type string "calendar" 指定为 calendar 渲染器
schedules `Array<{startTime: string, endTime: string, content: any, className?: string}> \ string` 日历中展示日程，可设置静态数据或从上下文中取数据，startTime 和 endTime 格式参考文档，className 参考背景色
scheduleClassNames Array<string> ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary'] 日历中展示日程的颜色，参考背景色
scheduleAction SchemaNode 自定义日程展示
largeMode boolean false 放大模式

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.value: string 时间值 时间值变化时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
clear - 清空
reset - 将值重置为resetValue，若没有配置resetValue，则清空
setValue value: string 更新的值 更新数据