Repository: ant-design/ant-design-mobile
Pull request #5792 (2022-11-07 08:03:48)

enhance(Calendar): add className to the begin and end of each selected row

sdwfqin: 期望可以实现这种效果，但是我尝试覆盖css无法实现每行的开头与结尾
![image](https://user-images.githubusercontent.com/13191807/200257409-212b8edb-cebf-4834-bbe8-4414910652fb.png)

codecov[bot]: # [Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5792?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) Report
Base: **90.10**% // Head: **90.12**% // Increases project coverage by **`+0.01%`** :tada:
> Coverage data is based on head [(`5725fa7`)](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5792?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) compared to base [(`16b9251`)](https://codecov.io/gh/ant-design/ant-design-mobile/commit/16b9251e8bb147908c3211240d777c678640f6fd?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).
> Patch coverage: 94.11% of modified lines in pull request are covered.

<details><summary>Additional details and impacted files</summary>


```diff
@@            Coverage Diff             @@
##           master    #5792      +/-   ##
==========================================
+ Coverage   90.10%   90.12%   +0.01%     
==========================================
  Files         297      297              
  Lines        6387     6398      +11     
  Branches     1576     1583       +7     
==========================================
+ Hits         5755     5766      +11     
  Misses        580      580              
  Partials       52       52              
```


| [Impacted Files](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5792?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design) | Coverage Δ | |
|---|---|---|
| [src/components/calendar/calendar.tsx](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5792/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design#diff-c3JjL2NvbXBvbmVudHMvY2FsZW5kYXIvY2FsZW5kYXIudHN4) | `85.51% <94.11%> (+1.18%)` | :arrow_up: |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/ant-design/ant-design-mobile/pull/5792?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=ant-design).

github-actions[bot]: PR preview has been successfully built and deployed to https://antd-mobile-preview-pr-5792.surge.sh
miracles1919: 在你的基础上微微调整了下 demo 的 less（加了个 prefix）

Patch:
diff --git a/src/components/calendar/calendar.en.md b/src/components/calendar/calendar.en.md
index 9e9b639a2..9b14f0fd3 100644
--- a/src/components/calendar/calendar.en.md
+++ b/src/components/calendar/calendar.en.md
@@ -14,12 +14,14 @@ When the user needs to enter a date, he can select it in the pop-up date panel.
 
 <code src="./demos/demo3.tsx"></code>
 
+<code src="./demos/demo4.tsx"></code>
+
 ## Calendar
 
 ### Props
 
 | Name              | Description                                                                     | Type                                                                                                                                 | Default    |
-| ----------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- |
+| ----------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --- | --- |
 | 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`                                                                                                                               | -          |
diff --git a/src/components/calendar/calendar.tsx b/src/components/calendar/calendar.tsx
index 5963156e4..f9f361b11 100644
--- a/src/components/calendar/calendar.tsx
+++ b/src/components/calendar/calendar.tsx
@@ -216,6 +216,8 @@ export const Calendar = forwardRef<CalendarRef, CalendarProps>((p, ref) => {
       let isSelect = false
       let isBegin = false
       let isEnd = false
+      let isSelectRowBegin = false
+      let isSelectRowEnd = false
       if (dateRange) {
         const [begin, end] = dateRange
         isBegin = d.isSame(begin, 'day')
@@ -224,6 +226,14 @@ export const Calendar = forwardRef<CalendarRef, CalendarProps>((p, ref) => {
           isBegin ||
           isEnd ||
           (d.isAfter(begin, 'day') && d.isBefore(end, 'day'))
+        if (isSelect) {
+          isSelectRowBegin =
+            (cells.length % 7 === 0 || d.isSame(d.startOf('month'), 'day')) &&
+            !isBegin
+          isSelectRowEnd =
+            (cells.length % 7 === 6 || d.isSame(d.endOf('month'), 'day')) &&
+            !isEnd
+        }
       }
       const inThisMonth = d.month() === current.month()
       const disabled = props.shouldDisableDate
@@ -241,6 +251,8 @@ export const Calendar = forwardRef<CalendarRef, CalendarProps>((p, ref) => {
               [`${classPrefix}-cell-selected`]: isSelect,
               [`${classPrefix}-cell-selected-begin`]: isBegin,
               [`${classPrefix}-cell-selected-end`]: isEnd,
+              [`${classPrefix}-cell-selected-row-begin`]: isSelectRowBegin,
+              [`${classPrefix}-cell-selected-row-end`]: isSelectRowEnd,
             }
           )}
           onClick={() => {
diff --git a/src/components/calendar/calendar.zh.md b/src/components/calendar/calendar.zh.md
index abf74aaa9..523b7b505 100644
--- a/src/components/calendar/calendar.zh.md
+++ b/src/components/calendar/calendar.zh.md
@@ -11,6 +11,7 @@
 <code src="./demos/demo1.tsx"></code>
 <code src="./demos/demo2.tsx"></code>
 <code src="./demos/demo3.tsx"></code>
+<code src="./demos/demo4.tsx"></code>
 
 ## Calendar
 
diff --git a/src/components/calendar/demos/demo4.less b/src/components/calendar/demos/demo4.less
new file mode 100644
index 000000000..f0bc9bdd9
--- /dev/null
+++ b/src/components/calendar/demos/demo4.less
@@ -0,0 +1,86 @@
+@prefix: ~'adm-calendar';
+
+.calendar-custom {
+  .@{prefix}-cell {
+    justify-content: center;
+    height: 38px;
+
+    &-bottom {
+      display: none;
+    }
+
+    &.@{prefix}-cell-selected.@{prefix}-cell.@{prefix}-cell-selected {
+      background: rgba(229, 242, 250, 1);
+
+      .@{prefix}-cell-top {
+        height: 38px;
+        width: 38px;
+        border-radius: 99px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(229, 242, 250, 1);
+        color: var(--adm-color-primary);
+      }
+
+      &.@{prefix}-cell-selected-begin {
+        background: linear-gradient(
+          to right,
+          var(--adm-color-white) 50%,
+          #e5f2fa 51%,
+          #e5f2fa
+        );
+        .@{prefix}-cell-top {
+          height: 38px;
+          width: 38px;
+          border-radius: 99px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: var(--adm-color-primary);
+          color: var(--adm-color-white);
+        }
+
+        &.@{prefix}-cell-selected-row-end {
+          background: transparent;
+        }
+      }
+
+      &.@{prefix}-cell-selected-begin.@{prefix}-cell-selected-end {
+        background: var(--adm-color-white);
+      }
+
+      &.@{prefix}-cell-selected-end {
+        background: linear-gradient(
+          to right,
+          #e5f2fa 50%,
+          var(--adm-color-white) 51%,
+          var(--adm-color-white)
+        );
+        .@{prefix}-cell-top {
+          height: 38px;
+          width: 38px;
+          border-radius: 99px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: var(--adm-color-primary);
+          color: var(--adm-color-white);
+        }
+
+        &.@{prefix}-cell-selected-row-start {
+          background: transparent;
+        }
+      }
+
+      &.@{prefix}-cell-selected-row-begin {
+        border-top-left-radius: 99px;
+        border-bottom-left-radius: 99px;
+      }
+      &.@{prefix}-cell-selected-row-end {
+        border-top-right-radius: 99px;
+        border-bottom-right-radius: 99px;
+      }
+    }
+  }
+}
diff --git a/src/components/calendar/demos/demo4.tsx b/src/components/calendar/demos/demo4.tsx
new file mode 100644
index 000000000..93adfc363
--- /dev/null
+++ b/src/components/calendar/demos/demo4.tsx
@@ -0,0 +1,27 @@
+import dayjs from 'dayjs'
+import React, { useState } from 'react'
+import { Calendar } from 'antd-mobile'
+import { DemoBlock } from 'demos'
+import './demo4.less'
+
+export default () => {
+  const today = dayjs()
+  const [val, setVal] = useState<[Date, Date] | null>(() => [
+    today.subtract(2, 'day').toDate(),
+    today.add(2, 'day').toDate(),
+  ])
+  return (
+    <>
+      <DemoBlock title='自定义样式'>
+        <Calendar
+          className='calendar-custom'
+          selectionMode='range'
+          value={val}
+          onChange={val => {
+            setVal(val)
+          }}
+        />
+      </DemoBlock>
+    </>
+  )
+}


Test patch:
diff --git a/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap b/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap
index 9f74d9420..c33e4205d 100644
--- a/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap
+++ b/src/components/calendar/tests/__snapshots__/calendar.test.tsx.snap
@@ -375,7 +375,7 @@ exports[`Calendar controlled mode 1`] = `
         />
       </div>
       <div
-        class="adm-calendar-cell adm-calendar-cell-selected"
+        class="adm-calendar-cell adm-calendar-cell-selected adm-calendar-cell-selected-row-end"
       >
         <div
           class="adm-calendar-cell-top"
@@ -387,7 +387,7 @@ exports[`Calendar controlled mode 1`] = `
         />
       </div>
       <div
-        class="adm-calendar-cell adm-calendar-cell-selected"
+        class="adm-calendar-cell adm-calendar-cell-selected adm-calendar-cell-selected-row-begin"
       >
         <div
           class="adm-calendar-cell-top"
@@ -3321,7 +3321,7 @@ exports[`Calendar range mode 1`] = `
         />
       </div>
       <div
-        class="adm-calendar-cell adm-calendar-cell-selected"
+        class="adm-calendar-cell adm-calendar-cell-selected adm-calendar-cell-selected-row-end"
       >
         <div
           class="adm-calendar-cell-top"
@@ -3333,7 +3333,7 @@ exports[`Calendar range mode 1`] = `
         />
       </div>
       <div
-        class="adm-calendar-cell adm-calendar-cell-selected"
+        class="adm-calendar-cell adm-calendar-cell-selected adm-calendar-cell-selected-row-begin"
       >
         <div
           class="adm-calendar-cell-top"
@@ -3405,7 +3405,7 @@ exports[`Calendar range mode 1`] = `
         />
       </div>
       <div
-        class="adm-calendar-cell adm-calendar-cell-selected"
+        class="adm-calendar-cell adm-calendar-cell-selected adm-calendar-cell-selected-row-end"
       >
         <div
           class="adm-calendar-cell-top"
@@ -3417,7 +3417,7 @@ exports[`Calendar range mode 1`] = `
         />
       </div>
       <div
-        class="adm-calendar-cell adm-calendar-cell-selected"
+        class="adm-calendar-cell adm-calendar-cell-selected adm-calendar-cell-selected-row-begin"
       >
         <div
           class="adm-calendar-cell-top"