javascript - 如何使用 Angular 为 js-calendar-year 中的每个选定日期添加颜色。页面刷新后颜色应该是持久的

Question

我正在使用 js-year-calendar插件一次显示一年中的所有月份。但是，我一次只能选择一天，然后将日期存储在数据库中。请问，有没有办法选择多天，例如2020/08/04 - 2020-08-12 然后立即将该范围存储在数据库中。同时，我已经阅读了文档，但我不清楚。请我需要帮助来清楚地了解如何解决这个问题。谢谢
这是我的看法。我很抱歉代码太长，我真的很帮忙

HTML

<section id="filter" class="mb-3">
    <div class="card">
        <div class="col-sm-12">
      <div class="card-header mt-3">
        <div class="card-title-wrap bar-info">
          <h4 class="card-title  ml-4">{{'ALL_COMPANIES_HOLIDAY_CALENDER' | translate}}</h4>
        </div>
      </div>
        <div class="card-body">
            <div class="card-block">
      <div class="row">
        <div class="col-md-6 col-lg-6">
          <div class="row">
            <div class="col-md-4 col-lg-4 col-12 mt-1 ml-4">
              <div class="form-group row">
                <div class="col-md-12 searchcat">
                  <select class="form-control " [(ngModel)]="holidays.company_id" id="company" name="company"  (change)="getSelectedCompany(holidays.company_id)" required>
                    <option value="" disabled selected hidden>{{'SELECT_COMPANY' | translate}}</option>
                    <option *ngFor="let data of companyList; let i = index" [value]="data.id" >{{data.company_name}}</option> 
                  </select>                                                                                                     
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-5 ml-2">
        <div class="col-md-12 col-lg-12">
          <div id="calendar">
        </div>
        </div>
        
      </div>
      <div class="card-body">
        <div class="card-block">
          <div class="clearfix"></div>
          <ngx-datatable  #table class='bootstrap' [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50"
              [rowHeight]="'auto'" [limit]="50" [rows]='holidaysDataRows'>
              <ngx-datatable-column name="{{'COMPANY_NAME' | translate}}" prop="company_name"></ngx-datatable-column>
            <ngx-datatable-column name="{{'YEAR' | translate}}" prop="year"></ngx-datatable-column>
            <ngx-datatable-column name="{{'HOLIDAY' | translate}}" prop="holidays_date">
            </ngx-datatable-column>
            <ngx-datatable-column name="{{'DESCRIPTION' | translate}}" prop="description" > </ngx-datatable-column> 
            <ngx-datatable-column name="{{'ACTIONS' | translate}}" prop="status">
              <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row" 
              let-group="group" let-rowHeight="rowHeight"> 
              
                <button (click)="editHoliday(editModal,row)"  class="btn btn-raised mr-1 shadow-z-2 btn-info btn-sm ">{{'EDIT' | translate}}</button>
                <button  (click)="deleteModal(deleteholiday, row.holiday_id)" class="btn btn-raised mr-1 shadow-z-2 btn-danger btn-sm ">{{'DELETE' | translate}}</button>
                
              </ng-template>                
            </ngx-datatable-column>
          </ngx-datatable>
          <div class="loader-div" *ngIf="showLoader">
            <img src="assets/img/portrait/small/loader.gif" alt="spinner" class="loader">
          </div>
        </div>
      </div>
    
            </div>
        </div>
    </div>
</div>          

代码

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){
      }
 }

Answer 1

替换 new Calendar('#calendar')与 new Calendar('#calendar',{enableRangeSelection: true});那么你可以在这里得到它:

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

Year Calendar Documentaion
这是一个 Stackblitz