Skip to content

Commit

Permalink
Fixed #9168 - Calendar misplaced layout if more than one month is shown
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Sep 1, 2020
1 parent c9be262 commit 937a128
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 49 deletions.
2 changes: 1 addition & 1 deletion src/app/components/calendar/calendar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
}

/* Multiple Month DatePicker */
.p-datepicker-multiple-month {
.p-datepicker-multiple-month .p-datepicker-group-container {
display: flex;
}

Expand Down
98 changes: 50 additions & 48 deletions src/app/components/calendar/calendar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,56 +46,58 @@ export interface LocaleSettings {
<ng-content select="p-header"></ng-content>
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
<ng-container *ngIf="!timeOnly">
<div class="p-datepicker-group" *ngFor="let month of months; let i = index;">
<div class="p-datepicker-header">
<button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" (keydown.enter)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-datepicker-title">
<span class="p-datepicker-month" *ngIf="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
<select tabindex="0" class="p-datepicker-month" *ngIf="monthNavigator && (view !== 'month') && numberOfMonths === 1" (change)="onMonthDropdownChange($event.target.value)">
<option [value]="i" *ngFor="let monthName of locale.monthNames;let i = index" [selected]="i === month.month">{{monthName}}</option>
</select>
<select tabindex="0" class="p-datepicker-year" *ngIf="yearNavigator && numberOfMonths === 1" (change)="onYearDropdownChange($event.target.value)">
<option [value]="year" *ngFor="let year of yearOptions" [selected]="year === currentYear">{{year}}</option>
</select>
<span class="p-datepicker-year" *ngIf="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
<div class="p-datepicker-group-container">
<div class="p-datepicker-group" *ngFor="let month of months; let i = index;">
<div class="p-datepicker-header">
<button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-prev p-link" (click)="onPrevButtonClick($event)" (keydown.enter)="onPrevButtonClick($event)" *ngIf="i === 0" type="button" pRipple>
<span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
</button>
<div class="p-datepicker-title">
<span class="p-datepicker-month" *ngIf="!monthNavigator && (view !== 'month')">{{locale.monthNames[month.month]}}</span>
<select tabindex="0" class="p-datepicker-month" *ngIf="monthNavigator && (view !== 'month') && numberOfMonths === 1" (change)="onMonthDropdownChange($event.target.value)">
<option [value]="i" *ngFor="let monthName of locale.monthNames;let i = index" [selected]="i === month.month">{{monthName}}</option>
</select>
<select tabindex="0" class="p-datepicker-year" *ngIf="yearNavigator && numberOfMonths === 1" (change)="onYearDropdownChange($event.target.value)">
<option [value]="year" *ngFor="let year of yearOptions" [selected]="year === currentYear">{{year}}</option>
</select>
<span class="p-datepicker-year" *ngIf="!yearNavigator">{{view === 'month' ? currentYear : month.year}}</span>
</div>
<button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" (keydown.enter)="onNextButtonClick($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)" type="button" pRipple>
<span class="p-datepicker-next-icon pi pi-chevron-right"></span>
</button>
</div>
<button (keydown)="onContainerButtonKeydown($event)" class="p-datepicker-next p-link" (click)="onNextButtonClick($event)" (keydown.enter)="onNextButtonClick($event)" *ngIf="numberOfMonths === 1 ? true : (i === numberOfMonths -1)" type="button" pRipple>
<span class="p-datepicker-next-icon pi pi-chevron-right"></span>
</button>
</div>
<div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
<table class="p-datepicker-calendar">
<thead>
<tr>
<th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
<span>{{locale['weekHeader']}}</span>
</th>
<th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
<span>{{weekDay}}</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let week of month.dates; let j = index;">
<td *ngIf="showWeek" class="p-datepicker-weeknumber">
<span>
{{month.weekNumbers[j]}}
</span>
</td>
<td *ngFor="let date of week" [ngClass]="{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}">
<ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
<span [ngClass]="{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}"
(click)="onDateSelect($event,date)" draggable="false" (keydown)="onDateCellKeydown($event,date,i)" pRipple>
<ng-container *ngIf="!dateTemplate">{{date.day}}</ng-container>
<ng-container *ngTemplateOutlet="dateTemplate; context: {$implicit: date}"></ng-container>
<div class="p-datepicker-calendar-container" *ngIf="view ==='date'">
<table class="p-datepicker-calendar">
<thead>
<tr>
<th *ngIf="showWeek" class="p-datepicker-weekheader p-disabled">
<span>{{locale['weekHeader']}}</span>
</th>
<th scope="col" *ngFor="let weekDay of weekDays;let begin = first; let end = last">
<span>{{weekDay}}</span>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let week of month.dates; let j = index;">
<td *ngIf="showWeek" class="p-datepicker-weeknumber">
<span>
{{month.weekNumbers[j]}}
</span>
</ng-container>
</td>
</tr>
</tbody>
</table>
</td>
<td *ngFor="let date of week" [ngClass]="{'p-datepicker-other-month': date.otherMonth,'p-datepicker-today':date.today}">
<ng-container *ngIf="date.otherMonth ? showOtherMonths : true">
<span [ngClass]="{'p-highlight':isSelected(date), 'p-disabled': !date.selectable}"
(click)="onDateSelect($event,date)" draggable="false" (keydown)="onDateCellKeydown($event,date,i)" pRipple>
<ng-container *ngIf="!dateTemplate">{{date.day}}</ng-container>
<ng-container *ngTemplateOutlet="dateTemplate; context: {$implicit: date}"></ng-container>
</span>
</ng-container>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="p-monthpicker" *ngIf="view === 'month'">
Expand Down

0 comments on commit 937a128

Please sign in to comment.