Как я могу добавить цвета к каждой выбранной дате в js -календарном году, используя Angular. Цвет должен оставаться неизменным после обновления страницы - PullRequest
Новая
       40

Как я могу добавить цвета к каждой выбранной дате в js -календарном году, используя Angular. Цвет должен оставаться неизменным после обновления страницы

2 голосов
/ 04 августа 2020

Я использую плагин js -year-calendar для одновременного отображения всех месяцев в году. Однако я могу выбрать только один день за раз, а затем сохранить дату в базе данных. Пожалуйста, есть ли способ выбрать несколько дней, например, 2020/08/04 - 2020-08-12, а затем сразу сохранить этот диапазон в базе данных. Между тем, я просмотрел документацию, но мне она была непонятна. Пожалуйста, мне нужна помощь, чтобы получить четкое представление о том, как go об этом. Спасибо

Это мое мнение. Прошу прощения за длинный код, я действительно помогаю enter image description here

HTML

 {{'ALL_COMPANIES_HOLIDAY_CALENDER' | translate}}    {{'SELECT_COMPANY' | translate}}  {{data.company_name}}             {{'EDIT' | translate}}  {{'УДАЛИТЬ' | translate}}
spinner

КОД 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){
      }
 }

1 Ответ

2 голосов
/ 04 августа 2020

Замените new Calendar('#calendar') на new Calendar('#calendar',{enableRangeSelection: true});

, тогда вы можете получить его здесь: 

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

Годовой календарь Documentaion

Вот a Stackblitz

...