I supouse it's only an execise, so only a few points
A calendar are only two *ngFor contatenates
<div class="week" *ngFor="let week of days">
<div class="day" [class.muted]="!day.isMonth" *ngFor="let day of week">
{{day.day}}
</div>
</div>
where days is an array [6][7]
the first index of the array go from 0 to 5 and the second from 0 to 6
You can use two auxiliar functions:
private getIncrement(year: number, month: number): number {
let date = new Date("" + year + "-" + month + "-1");
let increment = date.getDay() > 0 ? date.getDay() - 2 : 5;
return increment;
}
private getDate(
week: number,
dayWeek: number,
year: number,
month: number,
increment: number
) {
let date: any;
let day = week * 7 + dayWeek - increment;
if (day <= 0) {
let fechaAuxiliar = new Date("" + year + "-" + month + "-1");
date = new Date(
fechaAuxiliar.getTime() + (day - 1) * 24 * 60 * 60 * 1000
);
} else {
date = new Date("" + year + "-" + month + "-" + day);
if (isNaN(date.getTime())) {
let fechaAuxiliar = new Date("" + year + "-" + month + "-1");
date = new Date(
fechaAuxiliar.getTime() + (day -1) * 24 * 60 * 60 * 1000
);
}
}
return {
date:date,
day:date.getDate(),
isMonth:date.getMonth()==month-1
};
}
}
When you has a month and a year, calculate the increment, then create the formArray of days
private generateDays(year:number,month:number)
{
const increment=this.getIncrement(year,month)
const days=[];
[0,1,2,3,4,5].forEach((x,index)=>
{
days.push([])
for (let y=0;y<7;y++){
days[index].push(this.getDate(x,y,year,month,increment))
}
})
return days
}
Update: I attach a stackblitz
Update 23-april-2020:, corrected when change the month
NOTE: It's only how make a calendar, you need put in a div that becomes visible/invisible, mark the selected day in calendar...
