Js цвет границы календарного года в источнике данных исчезает после обновления страницы sh в Angular

Question

Я написал этот код в angular, чтобы получить дату с js -календаром. Но цвет границы пропадает после обновления страницы sh. Я храню даты в базе данных. Как сделать цвет границы постоянным после обновления страницы sh. Это моя страница

введите описание изображения здесь

Как я могу сохранить цвет после обновления страницы sh, например, когда я загружаю страницу после выбора даты, я хочу, чтобы цвет отображался на каждой дате даже после обновления страницы sh

КОМПОНЕНТ.ТС

import { Component, OnInit, ViewChild } from '@angular/core';
import { SnotifyService } from 'ng-snotify';
import { Router, ActivatedRoute } from "@angular/router";
import { NgbModal, ModalDismissReasons, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { HumanResourceService } from 'app/services/human-resource/human-resource.service';
import { TranslateService } from '@ngx-translate/core';
import { AuthenticationService } from 'app/services/authentication/authentication.service';
import { HumanResourceMasterService } from '../../../services/human-resource-master/human-resource-master.service';
 import Calendar from 'js-year-calendar';
 import * as moment from 'moment';
  @Component({
  selector: 'app-all-company-holiday-calender',
  templateUrl: './all-company-holiday-calender.component.html',
  styleUrls: ['./all-company-holiday-calender.component.scss']
})
export class AllCompanyHolidayCalenderComponent implements OnInit {
@ViewChild('openModal') OpenModalotdeletepos;
  companyList: any = []; // stores unique company name with corresponding ID
   company_id: any = '';
 datas: any;
  dateFromModal : any;
 closeResult: any;
 currentHolidays: any = [];
 holidaysDataRows: [];
 HolidayDeleteData: any;
 showLoader: boolean;
deleterowid: any;
holidaysData : any ;
getHols: any;
getHolidayDate: any =[];
holiday_date: any = [];
 allHolidays:any = [] 
 holidays: any = {
  description: '',
  dateSelected:'',
  startDate: '',
  endDate:'',
  company_id:'',
  hr_id: '',
  hols_id: '',
  dataSource:[]
 }
  selectedDate:any; 
 hrID: any;
 eventDate: Date;

  constructor(private snotifyService: SnotifyService,private spinner: FullLayoutComponent, private 
route: ActivatedRoute, private modalService: NgbModal, private loginService: LoginService,private 
hrMasterService: HumanResourceMasterService, private hrService: HumanResourceService, public 
authService: AuthenticationService,public translate: TranslateService) { 

    this.getCompaniesList();
    this.getHolidayData();
   }

  ngOnInit() {
  this.getRangeDate();
  }

  getRangeDate(){
    var holidays = this.holidays 
    let calender = new Calendar('#calendar',{
      enableRangeSelection: true,
      dataSource: holidays,
      style: 'border',
      loadingTemplate: '',
  });
   holidays.dataSource = [
    {
      startDate: holidays.startDate,
      endDate : holidays.endDate,
      color: "yellow"
    }

  ]
  var modalService = this.modalService;
  var snotifyService = this.snotifyService;
  var openModal = this.OpenModalotdeletepos;
  var translate = this.translate;
  var getDismiss = this.getDismissReason;

  var holiday = this.holidays;
    document.querySelector('#calendar').addEventListener('selectRange', function(data) {
     var hols = moment(data['startDate']).format(GlobalConstants.DATE_FORMAT) + "/" + moment( 
    data['endDate']).format(GlobalConstants.DATE_FORMAT);
      this.allHolidays = hols.split("/");
      holiday.startDate = this.allHolidays[0];
     holiday.endDate = this.allHolidays[1];
     holidays.dataSource.push({
       startDate: data['startDate'],
       endDate: data['endDate'],
       color: "green"
     })
     holiday.color = 'red';
     if(holiday.startDate === holiday.endDate){
       holiday.dateSelected = holiday.startDate
     } else{
       holiday.dateSelected = hols;
    }
     if(!holiday.company_id){
       snotifyService.error(translate.instant('MESSAGE_PLEASE_SELECT_COMPANY'));
      }
      else{
      modalService.open(openModal).result.then((result) => {
       this.closeResult = GlobalConstants.CLOSE + `${result}`;
       }, (reason) => {
       this.closeResult =  GlobalConstants.DISMISSED + `${getDismiss(reason)}`;
     });
     }
     calender['options']['dataSource'] = holiday;
      calender.setDataSource(holidays.dataSource);
     // console.log('calender', a);
   })
   console.log('holidayssss', this.holidays);
   console.log('calender',calender);
 }

getHolidayData(){
this.showLoader = true;
this.hrMasterService.getHolidayData({}).subscribe(data => {
        if(data.status_code = 200){
            this.showLoader = false;
            this.holidaysData = data.data;
    this.holidaysDataRows = this.holidaysData;
        }
        else {
            this.showLoader = false;
            this.snotifyService.error(data.message);
        }
    })

}

  saveHolidays(){
    this.holidays.hr_id = this.hrID.id;
    this.getHolidayDate = this.holidays.dateSelected.split("/");
    this.holidays.startDate = this.getHolidayDate[0];
    this.holidays.endDate = this.getHolidayDate[1];
    this.getHols = this.holidaysData;
    this.holiday_date = [];
    this.getHols.forEach((element,key) => {
     if(element.startDate){
        this.holiday_date.push({startDate : element.startDate, endDate : element.startDate, 
company_id : 
 element.company_id})
     }
   });
   var getElement = [];
   let getStartDate = this.holiday_date.map(element => {
      getElement.push(element.startDate, element.company_id);
      return getElement;
   });

 for(var i = 0; i < getStartDate.length; i++){
   var isStartDatePresent = getStartDate[i].includes(this.holidays.startDate);
   var isCompanyIdPresent = getStartDate[i].includes(+this.holidays.company_id);
 }
 if(isStartDatePresent == true && isCompanyIdPresent == true ){
   this.snotifyService.error('Holiday Already Exist');    
 }else{
   this.hrMasterService.createHolidays(this.holidays).subscribe(data =>{
     if(data.status_code = 200){                
     this.snotifyService.success(this.translate.instant('MESSAGE_HOLIDAY_CREATED'));
     this.modalService.dismissAll();                    
   } else {
  // this.spinner.hide();
     this.snotifyService.error(data.message);    
   }
  },error=>{
   this.spinner.hide();
   this.snotifyService.error(this.translate.instant('ERROR_UNABLE_TO_LOAD_DATA'));    
  });
 }
 }

}