feat: split calendar view

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,4 +1,5 @@
 .adm-calendar,
+.adm-calendar-view,
 .adm-calendar-popup {
   & &-title {
     flex: auto;
@@ -9,7 +10,7 @@
     padding: 12px;
     border-bottom: 1px solid var(--adm-color-border);
 
-    .adm-calendar-title {
+    .adm-calendar-view-title {
       text-align: center;
     }
   }
@@ -22,7 +23,7 @@
       display: none;
     }
 
-    .adm-calendar-title {
+    .adm-calendar-view-title {
       position: sticky;
       top: 0;
       padding: 8px 20px;
@@ -70,8 +71,8 @@
     &&-disabled {
       color: var(--adm-color-light);
 
-      .adm-calendar-cell-top,
-      .adm-calendar-cell-bottom {
+      .adm-calendar-view-cell-top,
+      .adm-calendar-view-cell-bottom {
         color: var(--adm-color-light);
       }
     }
@@ -82,8 +83,8 @@
         color: var(--adm-color-text);
       }
 
-      & .adm-calendar-cell-top,
-      & .adm-calendar-cell-bottom {
+      & .adm-calendar-view-cell-top,
+      & .adm-calendar-view-cell-bottom {
         color: var(--adm-color-white);
       }