在启动日历中设置两个不同的日期范围

我在Angular project中实现素数日历。我需要将日期范围设置为绿色,另一个日期范围设置为蓝色。这是我的任务。

我有固定的免费预订天数。假设我有15个免费预订日,一个人选择第1天到第30天进行预订,那么前15天应该是一种颜色(绿色),其他15天应该是另一种颜色(蓝色)。

<p-calendar [(ngModel)]="date" [minDate]="minDateValue" [showOtherMonths]="false" (onSelect)="dateClicked()" [inline]="true" [showWeek]="false" rangeSeparator="greenColor" selectionMode="range" styleClass="greenColor">
               
 </p-calendar>

组成部分ts

dateClicked() {
   // Getting Start date
   let startDate = this.datePipe.transform(this.date[0], 'yyyy-MM-dd');

   // Getting End date
   let endDate = this.date[1] ? this.datePipe.transform(this.date[1], 'yyyy-MM-dd') : null;
   this.setStartAndEndDate(startDate, endDate);
   this.getSlotsAndDates();
}

// Setting data to the data handler home page selection
setStartAndEndDate(startDate, endDate) {
  // Setting the start date
  this.setSelectedDataToSubject(SelectedItemTypes.DATE_FROM, startDate);

  // Settinf the End date
  this.setSelectedDataToSubject(SelectedItemTypes.DATE_TO, endDate);
}

getSlotsAndDates() {

  if ((!this.dataHandleService.getSelectedData().hasOwnProperty(SelectedItemTypes.DATE_FROM) || !this.dataHandleService.getSelectedData().dateFrom) ||
  (!this.dataHandleService.getSelectedData().hasOwnProperty(SelectedItemTypes.DATE_TO) || !this.dataHandleService.getSelectedData().dateTo)) 
  {
     return;
  }
  const data = {
    dealer_id: this.dataHandleService.getUserConfigData().get_dealer.id,
    delivery_date: this.dataHandleService.getSelectedData().dateFrom,
    pickup_date: this.dataHandleService.getSelectedData().dateTo
  };

  this.apiService.getTimeSlots(data).subscribe((timeSlots: TimeZoneHttpModel) => {
    this.deliveryTimeList = timeSlots.data.delivery_slot[0];
    this.pickUpTimeList = timeSlots.data.pickup_slot[0];

    this.setTimeSlots();
  })
}