feat: add "is-start" and "is-end" to the first and last dates respectively

__tests__/Calendar.test.ts

@@ -70,6 +70,22 @@ describe('CalendarPanel', () => {
     expect(td.classes()).toContain('active');
   });
 
+  it('feat: is-start class', async () => {
+    wrapper = mount(Calendar);
+    const td = wrapper.find('.mx-table-date td:nth-child(6)');
+    expect(td.classes()).not.toContain('is-start');
+    await wrapper.setProps({ value: new Date(2019, 9, 4) });
+    expect(td.classes()).toContain('is-start');
+  });
+
+  it('feat: is-end class', async () => {
+    wrapper = mount(Calendar);
+    const td = wrapper.find('.mx-table-date td:nth-child(6)');
+    expect(td.classes()).not.toContain('is-end');
+    await wrapper.setProps({ value: new Date(2019, 9, 4) });
+    expect(td.classes()).toContain('is-end');
+  });
+
   it('prop: disabledDate', () => {
     const disabledDate = (date: Date) => {
       return date < new Date(2019, 9, 1) || date > new Date(2019, 9, 20);

lib/calendar/Calendar.tsx

@@ -136,6 +136,11 @@ function Calendar(originalProps: CalendarProps) {
     } else if (innerValue.value.some((v) => v.getTime() === cellDate.getTime())) {
       classes.push('active');
     }
+    const length = innerValue.value.length;
+    if (length) {
+      if (cellDate.getTime() == innerValue.value[0].getTime()) classes.push('is-start');
+      if (cellDate.getTime() == innerValue.value[length - 1].getTime()) classes.push('is-end');
+    }
     return classes.concat(props.getClasses(cellDate, innerValue.value, classes.join(' ')));
   };
 

lib/style/index.scss

@@ -202,6 +202,14 @@
       color: $calendar-active-color;
       background-color: $calendar-active-background-color;
     }
+    &.is-start {
+      border-top-left-radius: $calender-cell-border-radius;
+      border-bottom-left-radius: $calender-cell-border-radius;
+    }
+    &.is-end {
+      border-top-right-radius: $calender-cell-border-radius;
+      border-bottom-right-radius: $calender-cell-border-radius;
+    }
     &.in-range,
     &.hover-in-range {
       color: $calendar-in-range-color;

lib/style/var.scss

@@ -33,3 +33,5 @@ $time-hover-background-color: mix(#fff, $calendar-active-background-color, 95%)
 
 $input-border-radius: 4px !default;
 $sidebar-margin-left: 100px !default;
+
+$calender-cell-border-radius: 5px;