Summary Table
Categories |
Total Count |
PII |
0 |
URL |
0 |
DNS |
0 |
EKL |
0 |
IP |
0 |
PORT |
0 |
VsID |
0 |
CF |
0 |
AI |
0 |
VPD |
0 |
PL |
0 |
Other |
0 |
File Content
import { Component, OnInit, Input, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { CalendarService } from './calendar.service';
@Component({
selector: 'app-calendar',
templateUrl: './calendar.component.html',
styleUrls: ['./calendar.component.scss']
})
export class CalendarComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() parentFormGroup: FormGroup;
@Input() parentControlName: string = null;
@Input() calendarId: string = null; // use calendarId to give the input box an id for selenium testing.
@Input() monthId = 'SPN_currentMonth_1';
@Input() calendarTabIndex = 0;
@Input() label = 'Calendar label';
@Input() dateRangeError = false;
@Input() required = false;
displayCalendar = false;
formData = '';
calendar = [];
date: Date = new Date();
currentMonth: Date = new Date();
today: number;
isCurrentMonth: boolean;
monthName: string;
constructor(private calendarService: CalendarService, private changeDetectorRef: ChangeDetectorRef) { }
ngOnInit() {
this.calendarInit(this.date);
}
ngAfterViewInit() {
// service method to register all calendar instances on the page.
this.calendarService.registerCalendar(this);
}
calendarInit(date) {
this.date = date;
// let currentDate: number = this.date.getDate();
const month = this.date.getMonth();
const year = this.date.getFullYear();
const monthNames: string[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const dayName: string[] = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
const firstDate = `${monthNames[month]} 1 ${year}`;
const tmp = new Date(firstDate).toDateString();
const firstDay = tmp.substring(0, 3);
const dayNumber = dayName.indexOf(firstDay);
const totalDays = new Date(year, month + 1, 0).getDate();
this.monthName = `${monthNames[month]} ${year}`;
this.getDate(dayNumber, totalDays);
this.isCurrentMonth = (
this.date.getMonth() === this.currentMonth.getMonth() &&
this.date.getFullYear() === this.currentMonth.getFullYear());
if (this.isCurrentMonth) {
this.today = this.currentMonth.getDate(); // currentDate;
} else {
this.today = null;
}
}
getDate(dayNumber: number, totalDays: number) {
const secondRow = [];
const thirdRow = [];
const forthRow = [];
const fithRow = [];
const lastRow = [];
// for (let i = 0; i < 7; i++){
// firstRow.push('SMTWTFS'[i]);
// }
let iterator = 0;
for (iterator; iterator < 7; iterator++) {
if (iterator === dayNumber) {
break;
}
secondRow.push('');
}
let count = 1;
for (; iterator < 7; iterator++) {
secondRow.push(count);
count++;
}
let rowCount = 1;
for (let i = 3; i < 7; i++) {
for (let j = 0; j < 7; j++) {
if (count > totalDays) {
const lastRowLength = lastRow.length;
const dif = 7 - lastRowLength;
if (lastRowLength < 7) {
for (let k = 0; k < dif; k++) {
lastRow.push('');
}
}
break;
}
if (rowCount === 1) {
thirdRow.push(count);
}
if (rowCount === 2) {
forthRow.push(count);
}
if (rowCount === 3) {
fithRow.push(count);
}
if (rowCount === 4) {
lastRow.push(count);
}
if (j === 6) {
rowCount++;
}
count++;
}
}
this.calendar = [secondRow, thirdRow, forthRow, fithRow, lastRow];
}
selectedDate(day: number) {
this.parentFormGroup.controls[this.parentControlName].markAsTouched();
this.parentFormGroup.controls[this.parentControlName].updateValueAndValidity();
if (typeof day === 'number') {
const month = this.date.getMonth() + 1;
let formattedDay;
let formattedMonth;
if (day.toString().length < 2) {
formattedDay = '0' + day;
} else {
formattedDay = day.toString();
}
if (month.toString().length < 2) {
formattedMonth = '0' + month;
} else {
formattedMonth = month;
}
const formattedDate = `${formattedMonth}/${formattedDay}/${this.date.getFullYear()}`;
// console.log(formattedDate);
this.formData = formattedDate;
this.displayCalendar = false;
}
this.changeDetectorRef.detectChanges();
}
// method to display previous month
onPreviousMonth() {
const currentMonth = this.date.getMonth();
const currentYear = this.date.getFullYear();
this.date = new Date(currentYear, currentMonth, 0);
this.calendarInit(this.date);
}
// method to display next month
onNextMonth() {
const currentMonth = this.date.getMonth();
const currentYear = this.date.getFullYear();
this.date = new Date(currentYear, currentMonth + 2, 0);
this.calendarInit(this.date);
}
onToday() {
this.date = new Date();
this.calendarInit(this.date);
}
onClear() {
this.formData = '';
this.today = null;
this.onToday();
}
onDismiss() {
this.displayCalendar = false;
}
// method to close the calendar on either shift + tab || Esc
onCalendarKeyPress(event) {
if (event.key === 'Enter') {
event.preventDefault();
}
if (event.keyCode === 27 || event.keyCode === 9 && event.shiftKey) {
this.onDismiss();
}
}
onDisplayCalendar() {
const dateValidator = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
if (this.formData && dateValidator.test(this.formData)) {
this.calendarService.onCalendarShow(this.parentControlName);
this.date = new Date(this.formData);
this.calendarInit(this.date);
this.today = this.date.getDate();
} else {
this.calendarService.onCalendarShow(this.parentControlName);
}
// this.changeDetectorRef.detectChanges();
this.displayCalendar = true;
}
ngOnDestroy() {
this.calendarService.unRegisterCalendars();
}
}