Adding a triangular arrow to beginning and end dates within a date range made with ngb-datepicker

Question

I have an ngb-datepicker date range/calendar element that allows for the selection of a date range.

The "from" and "to" dates have dark blue backgrounds, using this CSS selector: .custom-day.range. I'd love to have the "from" date have a triangular arrow pointing forward (right) and the "to" date with a triangular arrow pointing backwards (left). Ideally the two arrows would be attached to the respective sides of the selected boxes and overlap the dates they're next to (but not overlap the white text).

Here's a little mock up of what I'm looking to do (apologies for my terrible art skills):

Here's all of my code in Stackblitz (I've added the two arrow elements below the actual calendar, maybe this would be helpful): https://stackblitz.com/edit/angular-vypphf-goekc2

I've tried using ::after to add a triangular element with no luck.

If it wasn't Angular, I'd simply add a child element to the two dates with the triangle... but I'm not so well-versed with the framework--I'm still learning.

Template:

    <ng-template #t let-date let-focused="focused">
      <span class="custom-day"
      [class.checkDay]="isCheckDate(date)"
      [class.focused]="focused"
      [class.range]="isRange(date)"
      [class.faded]="isHovered(date) || isInside(date)"
      (mouseenter)="hoveredDate = date"
      (mouseleave)="hoveredDate = null">
        {{ date.day }}
      </span>
    </ng-template>

    <div class="arrow-right"></div>
    <div class="arrow-left"></div>

Applicable CSS:

    /* HERE IS WHERE I WOULD LIKE TO HAVE ARROW */
    .custom-day.range, .custom-day:hover {
      background-color: rgb(2, 117, 216);
      color: white; 
    }

    .arrow-right {
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid rgb(2, 117, 216);
    }

    .arrow-left {
      width: 0; 
      height: 0; 
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-right: 10px solid rgb(2, 117, 216);
    }

So I'm thinking that maybe this can be done using CSS, or maybe it could be done by attaching divs with .arrow-right and .arrow-left to the start date and end date elements dynamically... but I tried and failed to do that, but again I'm a beginner when it comes to Angular.

Any help would be so very much appreciated! Thanks.

Answer 1

I do not know much about how you want to apply the css to the elements but you can certaily do something like this

  [class.firstDate]="isInsideFirst(date)"
  [class.lastDate]="isInsideLast(date)"

Create 2 functions that will apply the css to first and last element

  isInsideFirst(date: NgbDate) {
    return date.equals(this.fromDate) ;

  }

  isInsideLast(date: NgbDate) {
    return date.equals(this.toDate);
  }

Now, you have your first and last element classes applied so you can use the css to draw an arrow.

something like this

.firstDate::after{
     content: '\25ba';
    padding-left: -0.5em;
    background-color: rgb(2, 117, 216);       
    padding: 0.1rem 0.25rem;
    position: absolute;
}


.lastDate::before{
     content: '\25c4';        
    background-color: rgb(2, 117, 216);        
    padding: 0.185rem 0.25rem;
    position: absolute;
}

Demo