baidu · 2betop · Dec 6, 2021 · Nov 18, 2021 · Nov 25, 2021 · Nov 25, 2021
diff --git a/docs/zh-CN/components/form/input-date.md b/docs/zh-CN/components/form/input-date.md
@@ -312,6 +312,185 @@ order: 13
 }
 ```
 
+## 日历日程
+
+```schema: scope="body"
+{
+    "type": "input-date",
+    "embed": true,
+    "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"
+      }
+    ]
+}
+```
+
+## 日历日程-自定义颜色
+
+```schema: scope="body"
+{
+    "type": "input-date",
+    "embed": true,
+    "schedules": [
+      {
+        "startTime": "2021-12-11 05:14:00",
+        "endTime": "2021-12-11 06:14:00",
+        "content": "这是一个日程1",
+        "className": "bg-success"
+      },
+      {
+        "startTime": "2021-12-21 05:14:00",
+        "endTime": "2021-12-22 05:14:00",
+        "content": "这是一个日程2",
+        "className": "bg-info"
+      }
+    ]
+}
+```
+
+```schema: scope="body"
+{
+    "type": "input-date",
+    "embed": true,
+    "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"
+      }
+    ]
+}
+```
+
+## 日历日程-自定义日程展示
+```schema: scope="body"
+{
+    "type": "input-date",
+    "embed": true,
+    "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"
+      }
+    ],
+    "scheduleAction": {
+      "actionType": "drawer",
+      "drawer": {
+        "title": "日程",
+        "body": {
+          "type": "table",
+          "columns": [
+            {
+              "name": "time",
+              "label": "时间"
+            },
+            {
+              "name": "content",
+              "label": "内容"
+            }
+          ],
+          "data": "${scheduleData}"
+        }
+      }
+    }
+}
+```
+
+## 日历日程-支持从数据源中获取日程
+```schema
+{
+    "type": "page",
+    "data": {
+      "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"
+        }
+      ]
+    },
+    "body": [
+      {
+        "type": "input-date",
+        "embed": true,
+        "schedules": "${schedules}"
+      }
+    ]
+}
+```
+
+## 放大模式
+
+```schema: scope="body"
+{
+    "type": "input-date",
+    "embed": true,
+    "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"
+      }
+    ]
+}
+```
+
 ## 原生日期组件
 
 原生数字日期将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。
@@ -348,3 +527,7 @@ order: 13
 | clearable       | `boolean` | `true`         | 是否可清除                                                                                                  |
 | embed           | `boolean` | `false`        | 是否内联模式                                                                                                |
 | timeConstraints | `object`  | `true`         | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime)                                   |
+| schedules       | `Array<{startTime: Date, endTime: Date, content: any, className?: string}> \| string`  |   | 日历中展示日程，可设置静态数据或从上下文中取数据，className参考[背景色](https://baidu.gitee.io/amis/zh-CN/style/background/background-color)   |
+| scheduleClassNames  | `Array<string>`  | `['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']`   | 日历中展示日程的颜色，参考[背景色](https://baidu.gitee.io/amis/zh-CN/style/background/background-color)   |
+| scheduleAction  | `SchemaNode`  |            | 自定义日程展示                    |
+| largeMode       | `boolean` | `false`        | 放大模式                         |
diff --git a/scss/components/_calendar.scss b/scss/components/_calendar.scss
@@ -0,0 +1,81 @@
+
+.#{$ns}ScheduleCalendar {
+  &-icon {
+    position: absolute;
+    bottom: var(--Calendar-icon-bottom);
+    left: 50%;
+    transform: translateX(-50%);
+    display: block;
+    width: var(--Calendar-icon-width);
+    height: var(--Calendar-icon-height);
+    border-radius: 50%;
+    z-index: 10;
+  }
+  &-action {
+    display: block;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: transparent;
+    color: inherit;
+    &:not(:disabled):not(.is-disabled):hover {
+      color: inherit;
+      background: transparent;
+      border-color: transparent;
+    }
+  }
+  .rdtDay {
+    position: relative;
+  }
+
+  &-text-overflow {
+    white-space:nowrap;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    position: absolute;
+    width: 100%;
+  }
+}
+
+.#{$ns}ScheduleCalendar-large {
+  width: 100%;
+
+  .rdtPicker {
+    width: 100%;
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+      td {
+        border: var(--Calendar-borderWidth) solid var(--borderColor);
+      }
+    }
+  }
+
+  .rdtDay {
+    height: var(--Calendar-rdt-day);
+    vertical-align: top;
+  }
+
+  .#{$ns}ScheduleCalendar-large-day-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    min-width: 100%;
+    height: 100%;
+    .#{$ns}ScheduleCalendar-large-schedule-content {
+      position: relative;
+      z-index: 10;
+      border-radius: var(--borderRadius);
+      text-align: left;
+      padding: var(--Calendar-schedule-content-padding);
+      height: var(--Calendar-schedule-content-height);
+      color: var(--Calendar-schedule-content-color);
+    }
+  }
+
+  .#{$ns}ScheduleCalendar-action {
+    z-index: 20;
+    position: relative;
+  }
+}
diff --git a/scss/themes/_common.scss b/scss/themes/_common.scss
@@ -37,6 +37,7 @@
 @import '../components/button-group';
 @import '../components/dropdown';
 @import '../components/each';
+@import '../components/calendar';
 @import '../components/collapse';
 @import '../components/collapse-group';
 @import '../components/color';

diff --git a/scss/themes/_cxd-variables.scss b/scss/themes/_cxd-variables.scss
@@ -221,6 +221,15 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
   --Switch-onDisabled-color: #{$G11};
   // --Switch-onDisabled-circle-BackgroundColor: #fff;
 
+  --Calendar-icon-bottom: #{px2rem(-4px)};
+  --Calendar-icon-width: #{px2rem(10px)};
+  --Calendar-icon-height: #{px2rem(10px)};
+  --Calendar-borderWidth: #{px2rem(1px)};
+  --Calendar-rdt-day: #{px2rem(100px)};
+  --Calendar-schedule-content-padding: 0 #{px2rem(4px)};
+  --Calendar-schedule-content-height: #{px2rem(20px)};
+  --Calendar-schedule-content-color: #{$white};
+
   --ColorPicker-borderWidth: #{px2rem(1px)};
   --ColorPicker-borderRadius: #{$R3};
   --ColorPicker-bg: var(--white);

diff --git a/src/components/DatePicker.tsx b/src/components/DatePicker.tsx
@@ -278,6 +278,15 @@ export interface DateProps extends LocaleProps, ThemeProps {
   borderMode?: 'full' | 'half' | 'none';
   // 是否为内嵌模式，如果开启就不是 picker 了，直接页面点选。
   embed?: boolean;
+  schedules?: Array<{
+    startTime: Date,
+    endTime: Date,
+    content: any,
+    className?: string
+  }>;
+  scheduleClassNames?: Array<string>;
+  largeMode?: boolean;
+  onScheduleClick?: (scheduleData: any) => void;
 
   // 下面那个千万不要写，写了就会导致 keyof DateProps 得到的结果是 string | number;
   // [propName: string]: any;
@@ -302,7 +311,8 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
     viewMode: 'days' as 'years' | 'months' | 'days' | 'time',
     shortcuts: '',
     closeOnSelect: true,
-    overlayPlacement: 'auto'
+    overlayPlacement: 'auto',
+    scheduleClassNames: ['bg-warning', 'bg-danger', 'bg-success', 'bg-info', 'bg-secondary']
   };
   state: DatePickerState = {
     isOpened: false,
@@ -546,20 +556,45 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
       format,
       borderMode,
       embed,
-      minDate
+      minDate,
+      schedules,
+      largeMode,
+      scheduleClassNames,
+      onScheduleClick
     } = this.props;
 
     const __ = this.props.translate;
     const isOpened = this.state.isOpened;
     let date: moment.Moment | undefined = this.state.value;
 
     if (embed) {
+      let schedulesData: DateProps['schedules'] = undefined;
+      if (schedules && Array.isArray(schedules)) {
+        // 设置日程颜色
+        let index = 0;
+        schedulesData = schedules.map((schedule: any) => {
+          let className = schedule.className;
+          if (!className && scheduleClassNames) {
+            className = scheduleClassNames[index];
+            index++;
+            if (index >= scheduleClassNames.length) {
+              index = 0;
+            }
+          }
+          return {
+            ...schedule,
+            className
+          };
+        });
+      }
       return (
         <div
           className={cx(
             `DateCalendar`,
             {
-              'is-disabled': disabled
+              'is-disabled': disabled,
+              'ScheduleCalendar': schedulesData,
+              'ScheduleCalendar-large': largeMode
             },
             className
           )}
@@ -578,6 +613,9 @@ export class DatePicker extends React.Component<DateProps, DatePickerState> {
             locale={locale}
             minDate={minDate}
             // utc={utc}
+            schedules={schedulesData}
+            largeMode={largeMode}
+            onScheduleClick={onScheduleClick}
           />
         </div>
       );