Javascript 如何使用Angular为js日历年中的每个选定日期添加颜色。页面刷新后，颜色应保持不变

我使用插件一次显示一年中的所有月份。但是，我可以一次只选择一天，然后将日期存储在数据库中。请问，是否有办法选择多个日期，例如2020/08/04-2020-08-12，然后立即将此范围存储在数据库中。同时，我已经阅读了文档，但不清楚。请告诉我，我需要帮助才能弄清楚该怎么做。谢谢

这是我的看法。很抱歉代码太长，我真的很想帮忙

HTML

将

new Calendar（'#Calendar'）

替换为

new Calendar（'#Calendar'，{enableRangeSelection:true}）

然后你可以在这里得到它：

document.querySelector('#calendar').addEventListener('selectRange', function(e) {
  console.log("Select the range: " + e.startDate + " - " + e.endDate);
})


这是一个
@M Fuat NUROĞLU，在将新日历（'#Calendar'）替换为“new Calendar（'#Calendar'，{enableRangeSelection:true}）；”之后，“但是我得到了这个错误”{enableRangeSelection:true；}类型的参数不能分配给“CalendarOptions”类型的参数。类型中缺少属性“loadingTemplate”{enableRangeSelection:true；}'但在类型“CalendarOptions”中是必需的请参考添加的Stackblitz@M Fuat NUROĞLU，谢谢您的帮助，它没有按要求工作，但我已经解决了。您的帮助帮助帮助了我。我需要添加loadingTemplate:True以使其工作。谢谢。同时，在选择并存储到数据库后，如何为所选日期添加颜色。
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';
  import { GlobalConstants } from 'app/shared/constants/global-constants';

@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 = []; 
    company_id: any = '';
  datas: any;
 dateFromModal : any;
 closeResult: any;
 currentHolidays: any = [];
 holidaysDataRows: [];
 HolidayDeleteData: any;
 showLoader: boolean;
 deleterowid: any;
 holidaysData : any = [];
 holidays: any = {
   description: '',
   date: '',
   company_id:'',
   hr_id: '',
   hols_id: '',
 }
 selectedDate:any; 
 hrID: any;
 eventDate: Date;
  eventText: string;
  myEvents: any[] = [];
  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) { 

 ngOnInit() {
  this.getDate();
 }
 getDate(){
   var modalService = this.modalService;
   var snotifyService = this.snotifyService;
   var openModal = this.OpenModalotdeletepos;
   var getDismiss = this.getDismissReason;
   new Calendar('#calendar');
   var holiday = this.holidays;
   var translate = this.translate;
   document.querySelector('#calendar').addEventListener('clickDay', 
   function(data) {
   var hols = moment(data['date']).format(GlobalConstants.DATE_FORMAT);;
    holiday.date = 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)}`;
    });
  }
})

 }

  getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
            return GlobalConstants.PRESS_ESC;
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
            return GlobalConstants.BACKDROP_CLICK;
    } else {
            return GlobalConstants.WITH + ` ${reason}`;
    }
}


 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.hrMasterService.createHolidays(this.holidays).subscribe(data =>{
     if(data.status_code = 200){                
     this.snotifyService.success(this.translate.instant('MESSAGE_HOLIDAY_CREATED'));
     this.modalService.dismissAll();
     setTimeout(() => {
       window.location.reload();
     }, 1000);                  
   } else {
     this.snotifyService.error(data.message);    
   }
  },error=>{

    });
 }

    onChangeDate(holiday){
    }
    getSelectedCompany(company_id: any){
      }
 }

document.querySelector('#calendar').addEventListener('selectRange', function(e) {
  console.log("Select the range: " + e.startDate + " - " + e.endDate);
})