问题描述
picture of calendar我有一个问题，因为它在第1个日历中显示了当前月份的日历，但在第2个日历中却没有显示正确的日期，而只是显示了正确的月份名称，但没有显示正确的日期，它们在第一个日历上是相同的
<div >
<div class="row">
<div class="col-sm-6">
<table class="xunk-calendar">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<!-- Header for changing month -->
<tr *ngIf="showHeader">
<!-- PrevIoUs month button -->
<th>
<button mat-icon-button (click)="changeMonth(-1)">
<mat-icon></mat-icon>
</button>
</th>
<!-- Month label -->
<th colspan=5>{{monthNames[openPage.month]}} {{openPage.year}}</th>
<!-- Next month button -->
</tr>
<!-- Weekday headers -->
<tr class="weekday">
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
<!-- The real calendar -->
<tr *ngFor="let row of calendar">
<td *ngFor="let col of row" class="mycell {{getColorFor(col)}}" (click)="changeColor(col)">
<span class="cellspan" [attr.content]="col?.valeur"></span>
</td>
</tr>
</table>
</div>
<div class="col-sm-6">
<table class="xunk-calendar">
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<!-- Header for changing month -->
<tr *ngIf="showHeader">
<!-- Month label -->
<th colspan=5>{{monthNames[openPage.month ++1]}} {{openPage.year}}</th>
<!-- Next month button -->
<th>
<div class="toto">
<button mat-icon-button (click)="changeMonth(1)">
<mat-icon></mat-icon>
</button>
</div>
</th>
</tr>
<!-- Weekday headers -->
<tr class="weekday">
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
<th>S</th>
</tr>
<!-- The real calendar -->
<tr *ngFor="let row of calendar">
<td *ngFor="let col of row" class="mycell {{getColorFor(col)}}" (click)="changeColor(col)">
<span class="cellspan" [attr.content]="col?.valeur"></span>
</td>
</tr>
</table>
</div>
</div>
</div>xport interface XunkDate {
date: number;
month: any;
year: any;
}
@Component({
selector: 'app-calendar',templateUrl: './calendar.component.html',styleUrls: ['./calendar.component.css']
})
export class CalendarComponent implements OnInit {
/** Today */
@input() public today: XunkDate;
/** The page open with [xx,month,year] */
@input() public openPage: XunkDate;
/** Currently selected date */
@input() public selectedDate: XunkDate;
/** Array with all the calendar data */
@input() public calendar: Day[][] = [[]];
/** Heatmap data */
@input() public heatmap = {};
/** Set this to false to hide month changing header */
@input() public showHeader = true;
/** Emits the new date on change */
@Output() change: EventEmitter<XunkDate> = new EventEmitter();
/** Emits the new month with date as 1 on change */
@Output() monthChange: EventEmitter<XunkDate> = new EventEmitter();
/** Constants */
public readonly monthNames =
[
'January','February','march','April','May','June','July','August','September','October','November','December'
];
public readonly dayNames =
[
'Sunday','Monday','Tuesday','Wednesday','Thrusday','Friday','Saturday'
];
/* Get today's date */
public static getToday(): XunkDate {
const dateNow = new Date();
return {
date: dateNow.getDate(),month: dateNow.getMonth(),year: dateNow.getFullYear()
};
}
/** Pad number with zeros */
public static zeropad(num,padlen,padchar = '0'): string {
const pad_char = typeof padchar !== 'undefined' ? padchar : '0';
const pad = new Array(1 + padlen).join(pad_char);
return (pad + num).slice(-pad.length);
}
/** CalendarComponent */
constructor() {
/* Initialize */
this.calendar = [];
this.today = CalendarComponent.getToday();
this.openPage = {...this.today};
this.selectedDate = {...this.today};
}
ngOnInit() {
/* display initial */
this.displayCalendar();
}
/** Change the month +1 or -1 */
public changeMonth(diff: number) {
this.openPage.month += diff;
/* See if the year switches */
if (this.openPage.month >= 12) {
this.openPage.month = 0;
this.openPage.year++;
}
if (this.openPage.month < 0) {
this.openPage.month = 11;
this.openPage.year--;
}
/* Refresh */
this.displayCalendar();
/* Emit event */
this.monthChange.emit(this.openPage);
}
/** Compute the calendar */
public displayCalendar() {
/* Generate a new object */
const newCalendar = [[]];
const month = this.openPage.month;
const year = this.openPage.year;
/* Days in next month,and day of week */
let col = new Date(year,0).getDay();
let row = 0,counter = 1;
const numOfDays = Number(this.getDaysOfMonth(month,year));
/* Loop to build the calendar body */
while (counter <= numOfDays) {
/* When to start new line */
if (col > 6) {
col = 0;
newCalendar[++row] = [];
}
const d = new Day();
d.valeur = counter++;
d.status = 0;
/* Set the value and increment */
newCalendar[row][coL++] = d;
}
/* Set the calendar to the newly computed one */
this.calendar = newCalendar;
}
/** Gets the DaysPerMonth array */
protected getDaysOfMonth(month: number,year: number): number {
/* Check leap years if February */
if (month === 1 && this.leapYear(year)) {
return 29;
}
/** Return the number of days */
return [31,28,31,30,31][month];
}
/** Returns true if leap year */
protected leapYear(year: number): boolean {
return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0);
}我有一个问题，因为它在第一日历中显示了当月的日历，但是在第二日历中却没有显示正确的日期，它只是显示了正确的月份名称，但没有显示相同的正确日期在第一个日历上
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）