如何使用 Angular 將 colors 添加到 js-calender-year 中的每個選定日期。 頁面刷新后顏色應保持不變

Question

我正在使用js-year-calendar插件來一次顯示一年中的所有月份。 但是，我可以一次僅一天 select 然后將日期存儲在數據庫中。 請，有沒有辦法 select 多天，例如 2020/08/04 - 2020-08-12，然后將此范圍立即存儲在數據庫中。 同時，我瀏覽了文檔，但對我來說並不清楚。 請我需要幫助才能清楚地了解如何了解 go。 謝謝

這是我的看法。 很抱歉代碼很長，我真的很幫助

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>          

TS 代碼

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

年歷文檔

這是一個Stackblitz