Having trouble creating a custom calendar in my Angular 6 app after migrating code from JavaScript. Can't seem to resolve the run-time error that Angular is throwing.
Any help would be greatly appreciated!
Here is the StackBlitz link I am working on: StackBlitz!
showCalendar(month, year) {
const firstDay = (new Date(year, month)).getDay();
const daysInMonth = 32 - new Date(year, month, 32).getDate();
console.log('\n val \n' + new Date(year, month, 32).getDate());
const tbl = document.getElementById('calendar-body');
// clearing all previous cells
tbl.innerHTML = '';
// filing data about month and in the page via DOM.
this.monthAndYear.innerHTML = this.months[month] + ' ' + year;
// creating all cells
let date = 1;
for (let i = 0; i < 6; i++) {
const row = document.createElement('tr');
for (let j = 0; j < 7; j++) {
// let cell = document.createElement('td');
if (i === 0 && j < firstDay) {
const cell = document.createElement('td');
const cellText = document.createTextNode('');
cell.appendChild(cellText);
row.appendChild(cell);
} else if (date > daysInMonth) {
break;
} else {
const cell = document.createElement('td');
const cellText = document.createTextNode(date.toString());
if (date === this.today.getDate() && year === this.today.getFullYear() && month === this.today.getMonth()) {
// cell.classList.add("bg-info");
} // color todays date
date++;
}
}
tbl.appendChild(row); // appending each row into calendar body.
}
}
constructor() {
this.today = new Date();
this.currentMonth = this.today.getMonth();
this.currentYear = this.today.getFullYear();
this.monthAndYear = document.getElementById('monthAndYear');
}
ngOnInit() {
this.showCalendar(this.currentMonth, this.currentYear);
console.log('ngOnInit');
}
Expected result is It show a calendar.
But it is giving the error as:
ERROR TypeError: Cannot set property 'innerHTML' of null
at CustomCalendarComponent.push../src/app/components/custom-calendar/custom-calendar.component.ts.CustomCalendarComponent.showCalendar (custom-calendar.component.ts:67)