feat: update calendar

config/components.ts

@@ -74,6 +74,7 @@ export const components = {
   experimental: [
     '/guide/what-is-experimental',
     '/components/calendar',
+    '/components/calendar-view',
     '/components/dropdown',
     '/components/floating-bubble',
     '/components/image-uploader',

src/components/calendar-view/calendar-view.en.md

@@ -0,0 +1,63 @@
+# CalendarView <Experimental></Experimental>
+
+Used to select a date or date range.
+
+CalendarView is the content area of [Calendar](/components/calendar).
+
+## Demos
+
+Only the simplest content area is shown here, and other more usages can be consulted [Calendar](/zh/components/calendar)
+
+<code src="./demos/demo1.tsx"></code>
+
+## CalendarView
+
+### Props
+
+| Name | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| allowClear | Whether to allow clearing after another click. | `boolean` | `true` |
+| defaultValue | The default selected date or date range. | Same as `value` prop. | - |
+| max | Maximum value of a selectable range. | `Date` | - |
+| min | Minimum value of a selectable range. | `Date` | - | - |
+| onChange | Trigger when selected date changes. | `(val: Date \| null) => void` when selection mode is "single". `(val: [Date, Date] \| null) => void` when selection mode is "range". | - |
+| renderTop | The top information of date render function. | `(date: Date) => ReactNode \| null \| undefined` | - |
+| renderBottom | The bottom information of date render function. | `(date: Date) => ReactNode \| null \| undefined` | - |
+| selectionMode | The selection mode. Disable selection when this prop is not set. | `'single' \| 'range'` | - |
+| shouldDisableDate | Set whether the date is disable selection. The min and max Settings are ignored | `(date: Date) => boolean` | - |
+| title | The title of calendar | `React.ReactNode` | `Date selection` |
+| value | The selected date or date range. | `Date \| null` when selection mode is "single". `[Date, Date] \| null` when selection mode is "range" | - |
+| weekStartsOn | Week starts on which day. | `'Monday' \| 'Sunday'` | `'Sunday'` |
+| renderDate | Custom date rendering. | `(date: Date) => ReactNode` | - | 5.28.0 |
+
+### CSS Variables
+
+Not supported yet.
+
+### Ref
+
+| Name | Description | Type |
+| --- | --- | --- |
+| jumpTo | Jump to specified page | `(page: Page \| ((page: Page) => Page)) => void` |
+| jumpToToday | Jump to today's page | `() => void` |
+| getDateRange | get date | `[Date, Date]` |
+
+```ts
+type Page = { month: number; year: number }
+```
+
+You can manually control the page turning of the calendar through Ref, for example:
+
+```ts
+// Jump to today's page
+ref.current.jumpToToday()
+
+// Jump to the specified year and month
+ref.current.jumpTo({ year: 2021, month: 1 })
+
+// Jump to three years later
+ref.current.jumpTo(page => ({
+  year: page.year + 3,
+  month: page.month,
+}))
+```

src/components/calendar/calendar.less → src/components/calendar-view/calendar-view.less

@@ -1,72 +1,103 @@
-.adm-calendar {
+.adm-calendar,
+.adm-calendar-view,
+.adm-calendar-popup {
+  & &-title {
+    flex: auto;
+    font-size: var(--adm-font-size-10);
+  }
+
   & &-header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 4px;
-    a.adm-calendar-arrow-button {
-      padding: 4px 8px;
-      display: block;
-      flex: none;
-      svg {
-        height: 22px;
-      }
-      &.adm-calendar-arrow-button-right {
-        svg {
-          transform: rotate(180deg);
-        }
-      }
-    }
-    .adm-calendar-title {
-      font-size: var(--adm-font-size-10);
-      flex: auto;
+    padding: 12px;
+    border-bottom: 1px solid var(--adm-color-border);
+
+    .adm-calendar-view-title {
       text-align: center;
     }
   }
+
   & &-body {
-    display: flex;
-    flex-wrap: wrap;
+    height: 64vh;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .adm-calendar-view-title {
+      position: sticky;
+      top: 0;
+      padding: 8px 20px;
+      background-color: var(--adm-color-box);
+    }
+  }
+
+  & &-footer {
+    &-bottom {
+      padding: 0 20px 16px;
+    }
+
+    .adm-divider {
+      margin-top: 0;
+    }
+
+    .adm-button {
+      width: 100%;
+    }
   }
+
   &-cells {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
     align-items: stretch;
-    padding: 8px 8px 4px;
+    padding: 4px 8px;
   }
+
   &-cell {
     flex: none;
     box-sizing: border-box;
     width: calc(100% / 7);
-    height: 48px;
+    min-height: 55px;
     margin-bottom: 4px;
     padding: 2px;
     color: var(--adm-color-text);
     cursor: pointer;
+
     &&-today {
       color: var(--adm-color-primary);
     }
+
     &&-disabled {
       color: var(--adm-color-light);
-      .adm-calendar-cell-bottom {
+
+      .adm-calendar-view-cell-top,
+      .adm-calendar-view-cell-bottom {
         color: var(--adm-color-light);
       }
     }
+
     &&-selected {
       && {
-        background: var(--adm-color-primary);
-        color: var(--adm-color-white);
+        background: rgba(22, 119, 255, 10%);
+        color: var(--adm-color-text);
       }
-      & .adm-calendar-cell-bottom {
+
+      & .adm-calendar-view-cell-top,
+      & .adm-calendar-view-cell-bottom {
         color: var(--adm-color-white);
       }
+
       &&-begin {
+        background: var(--adm-color-primary);
+        color: var(--adm-color-white);
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
       }
+
       &&-end {
+        background: var(--adm-color-primary);
+        color: var(--adm-color-white);
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
       }
@@ -79,16 +110,20 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: flex-end;
-    & &-top {
+    justify-content: center;
+
+    & &-date {
       flex: none;
-      font-size: var(--adm-font-size-10);
+      line-height: 22px;
+      font-size: var(--adm-font-size-8);
     }
+
+    & &-top,
     & &-bottom {
       flex: none;
-      font-size: var(--adm-font-size-4);
-      height: 12px;
-      line-height: 12px;
+      font-size: var(--adm-font-size-1);
+      height: 14px;
+      line-height: 14px;
       color: var(--adm-color-weak);
     }
   }
@@ -101,8 +136,9 @@
     border-bottom: solid 1px var(--adm-color-border);
     height: 45px;
     box-sizing: border-box;
-    font-size: var(--adm-font-size-7);
+    font-size: var(--adm-font-size-6);
     padding: 0 8px;
+
     & &-cell {
       flex: 1;
       text-align: center;