在选定日期为反应日期添加半径（airBnB）

Question

I'm using react-dates in order to achieve the following date range picker:

here is what I have done: https://codesandbox.io/s/ecstatic-almeida-3u72o?fontsize=14&hidenavigation=1&theme=dark but I still have a problem to apply the selected style out of border radius of the selected dates (i tried before and ofter also I tried to create a custom content cell in order to apply a background style but it doesn't work) Anyone can help me, please Here is a screenshot of the problem that i'm facing:

Answer 1

What are you having trouble with exactly?

Making the css rules apply or making the rules to be exactly like the screenshot design?

If it is the second one, I would just do something like:

.CalendarDay__selected {
  border: none;
}

.CalendarDay__selected_start,
.CalendarDay__selected_end {
    border-radius: 50%;
    position: relative;
    z-index: 0;
  
  &:before {
    display: block;
    position: absolute;
    content: '';
    left: 50%;
    right: 0;
    bottom: 0;
    top: 0;
    background: #66e2da;
    z-index: -1;
  }
  
  &:after {
    display: block;
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #00a699;
    z-index: -1;
    border-radius: 50%;
  }
}

.CalendarDay__selected_span {
  border: none;
}

.CalendarDay__selected_span:last-of-type {
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

.CalendarDay__selected_span:first-of-type {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
}