src/components/fsdatepickercalendar/fsdatepickercalendar.component.ts
OnInit
OnChanges
DoCheck
OnDestroy
| host | { |
| providers |
{
: , :
}
|
| selector | fsDatePickerCalendar |
| styleUrls | fsdatepickercalendar.component.scss |
| templateUrl | ./fsdatepickercalendar.component.html |
constructor(element: ElementRef, fsDatePickerCommon: FsDatePickerCommon, fsDatePickerModel: FsDatePickerModel, _iterableDiffers: IterableDiffers)
|
||||||||||||||||||||
|
Parameters :
|
date
|
Default value: |
dateMode
|
Default value: |
disabledDays
|
Default value: |
drawMonth
|
Default value: |
highlightEndDate
|
Default value: |
highlightStartDate
|
Default value: |
hoverDay
|
$event type: EventEmitter
|
mouseLeaveCalendar
|
$event type: EventEmitter
|
onChange
|
$event type: EventEmitter
|
onDateModeChange
|
$event type: EventEmitter
|
onDrawMonth
|
$event type: EventEmitter
|
| calendarView |
calendarView()
|
|
Returns :
void
|
| createModel |
createModel()
|
|
Returns :
void
|
| dayClick | ||||||||||
dayClick(day: )
|
||||||||||
|
Parameters :
Returns :
void
|
| dayDateViewChange |
dayDateViewChange()
|
|
Returns :
void
|
| drawMonths | ||||||||||
drawMonths(date: )
|
||||||||||
|
Parameters :
Returns :
void
|
| isDayDisabled | ||||||||||
isDayDisabled(md: )
|
||||||||||
|
Parameters :
Returns :
boolean
|
| monthChange | ||||||||||
monthChange(month: )
|
||||||||||
|
Parameters :
Returns :
void
|
| monthClick | ||||||||||
monthClick(month: )
|
||||||||||
|
Parameters :
Returns :
void
|
| monthDateViewChange |
monthDateViewChange()
|
|
Returns :
void
|
| monthView | ||||||||||
monthView(month: )
|
||||||||||
|
Parameters :
Returns :
void
|
| monthViewChange | ||||||||||
monthViewChange(month: )
|
||||||||||
|
Parameters :
Returns :
void
|
| nextMonth | ||||||||||
nextMonth(month: )
|
||||||||||
|
Parameters :
Returns :
void
|
| ngDoCheck |
ngDoCheck()
|
|
Returns :
void
|
| ngOnChanges | ||||||||||
ngOnChanges(changes: )
|
||||||||||
|
Parameters :
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onMouseEnterDay | ||||||||||
onMouseEnterDay(day: )
|
||||||||||
|
Parameters :
Returns :
void
|
| onMouseLeaveCalendar |
onMouseLeaveCalendar()
|
|
Returns :
void
|
| onMouseWheel | ||||||||||
onMouseWheel($event: )
|
||||||||||
|
Parameters :
Returns :
void
|
| onTouchMove | ||||||||||
onTouchMove($event: )
|
||||||||||
|
Parameters :
Returns :
void
|
| previousMonth | ||||||||||
previousMonth(month: )
|
||||||||||
|
Parameters :
Returns :
void
|
| setDate | ||||||||||
setDate(date: )
|
||||||||||
|
Parameters :
Returns :
void
|
| setMonth | ||||||||||
setMonth(monthNumber: )
|
||||||||||
|
Parameters :
Returns :
void
|
| setYear | ||||||||||
setYear(yearNumber: )
|
||||||||||
|
Parameters :
Returns :
void
|
| swipe | ||||||||||
swipe(action: )
|
||||||||||
|
Parameters :
Returns :
void
|
| updateDate |
updateDate()
|
|
Returns :
void
|
| updateDateDays |
updateDateDays()
|
|
Returns :
{}
|
| updateDaysHighlighted |
updateDaysHighlighted()
|
|
Returns :
void
|
| yearChange | ||||||||||
yearChange(year: )
|
||||||||||
|
Parameters :
Returns :
void
|
| yearDateViewChange |
yearDateViewChange()
|
|
Returns :
void
|
| yearView | ||||||||||
yearView(year: )
|
||||||||||
|
Parameters :
Returns :
void
|
| yearViewChange | ||||||||||
yearViewChange(year: )
|
||||||||||
|
Parameters :
Returns :
void
|
| dateDays |
dateDays:
|
Type : []
|
Default value : []
|
| Public element |
element:
|
Type : ElementRef
|
| Public fsDatePickerModel |
fsDatePickerModel:
|
Type : FsDatePickerModel
|
| iscrollInstance |
iscrollInstance:
|
Type : null
|
Default value : null
|
| iscrollOptions |
iscrollOptions:
|
Type : null
|
Default value : null
|
| month |
month:
|
Type : null
|
Default value : null
|
| monthList |
monthList:
|
Type : []
|
Default value : [{ value: 1, name: 'January', abr: 'Jan' },
{ value: 2, name: 'February', abr: 'Feb' },
{ value: 3, name: 'March', abr: 'Mar' },
{ value: 4, name: 'April', abr: 'Apr' },
{ value: 5, name: 'May', abr: 'May' },
{ value: 6, name: 'June', abr: 'June' },
{ value: 7, name: 'July', abr: 'July' },
{ value: 8, name: 'August', abr: 'Aug' },
{ value: 9, name: 'September', abr: 'Sept' },
{ value: 10, name: 'October', abr: 'Oct' },
{ value: 11, name: 'November', abr: 'Nov' },
{ value: 12, name: 'December', abr: 'Dec' }]
|
| selected |
selected:
|
Type : object
|
Default value : {}
|
| today |
today:
|
Type : object
|
Default value : {
date: moment().format('YYYY-MM-DD'),
month: moment().format('M'),
year: parseInt(moment().format('YYYY'))
}
|
| years |
years:
|
Type : []
|
Default value : []
|
<div class="date" (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)" (mouseleave)="onMouseLeaveCalendar()">
<div class="months" *ngIf="dateMode == 'month'">
<div *ngFor="let month of monthList" (click)="monthViewChange(month.value)" class="month" [ngClass]="{ today: today.month == month.value, selected: selected.month == month.value }">{{ month.abr }}</div>
</div>
<div class="years" *ngIf="dateMode == 'year'" fsIscroll [fsOptions]="iscrollOptions" fsInstance="iscrollInstance">
<div class="iscroll-scroller">
<div *ngFor="let year of years" class="year data-year-{{ year }}" [ngClass]="{ today: today.year==year, row : ($index % 4 == 0), selected: selected.year==year }" (click)="yearViewChange(year)">
{{ year }}
</div>
<div class="clear"></div>
</div>
</div>
<div *ngIf="dateMode == 'date' && month" class="calendar">
<div class="month-year">
<a class="month-name" (click)="monthView(month)">{{month.name}}</a>
<a class="year-name" (click)="yearView(month.year)">{{month.year}}</a>
<!-- <a (click)="yearView(month.year)" class="more"><mat-icon>arrow_drop_down</mat-icon></a> -->
<div class="gap"></div>
<div class="actions">
<a (click)="previousMonth(month)"><mat-icon>navigate_before</mat-icon></a>
<a (click)="nextMonth(month)"><mat-icon>navigate_next</mat-icon></a>
</div>
</div>
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tues</th>
<th>Wed</th>
<th>Thurs</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody class="calendar calendar-{{ month.date }}">
<tr class="week" *ngFor="let week of month.weeks">
<td *ngFor="let day of week" class="day" [ngClass]="{
today: today.date==day.date,
mute: day.mute,
selected: (day.date==selected.date || highlightedRangeDays.data[day.date]) && !day.mute,
'min-date': day.date === highlightedRangeDays.min,
'max-date': day.date === highlightedRangeDays.max,
disabled: day.disabled }" (click)="dayClick(day)" (mouseenter)="onMouseEnterDay(day)">
<span>{{ day.number }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>