Change color for different ranges

[geethzz]

I need to add a date range picker with previous dates disabled and the first n number of days from begin date in different color. Which means, if I select 13-12-2012 as begin date and n is 10, then from 13-12-2012 to 22-12-2021 should be in green color, but must be active.
my code is
`

<input angular-mydatepicker [min]="minDateValue" style="display: none;" class="input-box" placeholder="Click to select a date" angular-mydatepicker name="mydate" (click)="dp.toggleCalendar()" [(ngModel)]="model" [options]="myDpOptions" #dp="angular-mydatepicker" (dateChanged)="onDateChanged($event)" (rangeDateSelection)="onRangeDateSelection($event)" />

`

component.ts
`onRangeDateSelection(event: IMyRangeDateSelection): void {
let { isBegin, date, jsDate } = event;
let options: IAngularMyDpOptions = this.getCopyOfOptions();
if (isBegin) {
this.ngxdp.writeValue({
isRange: true,
singleDate: null,
dateRange: {
beginDate: { year: 0, month: 0, day: 0 },
endDate: { year: 0, month: 0, day: 0 }
}
});
this.ngxdp.setHostValue('');
let d = new Date(jsDate.getTime());
let freeSlots = parseInt(this.freeSlotRange);
d.setDate(d.getDate() + parseInt(this.freeSlotRange));
options.disableDateRanges = [{ begin: { year: event.jsDate.getFullYear(), month: event.jsDate.getMonth() + 1, day: event.jsDate.getDate() },
end: { year: d.getFullYear(), month: d.getMonth() + 1, day: d.getDate() - 1 } }];
this.myDpOptions = options;
}
else {
// end date selection - remove disableSince option
options.disableSince = { year: 0, month: 0, day: 0 };
this.myDpOptions = options;
let d: Date = new Date();
let month: any = d.getMonth() + 1;
if (month < 10) {
month = '0' + month;
}
}

}`

`getCopyOfOptions(): IAngularMyDpOptions {
return JSON.parse(JSON.stringify(this.myDpOptions));
}

disableUntil() {
let d: Date = new Date();
d.setDate(d.getDate() - 1);
let copy: IAngularMyDpOptions = this.getCopyOfOptions();
copy.disableUntil = {
year: d.getFullYear(),
month: d.getMonth() + 1,
day: d.getDate()
};
this.myDpOptions = copy;
//this.disabledStyles('#fff', '#000');
}`

This will disable previous dates and also n number of days from begin date. But I don't want to disable the range dates, just need to change the background color. Also, now the previous dates and range dates are in same color, but I need to display both in different color.