### File

`src/components/fsdatepickercalendar/fsdatepickercalendar.component.ts`

### Implements

`OnInit` `OnChanges` `DoCheck` `OnDestroy`

### Metadata

host | `{ }`
providers | `{ : , : }`
selector | `fsDatePickerCalendar`
styleUrls | `fsdatepickercalendar.component.scss`
templateUrl | `./fsdatepickercalendar.component.html`

### Index

###### Properties
dateDays Public element Public fsDatePickerModel iscrollInstance iscrollOptions month monthList selected today years
###### Methods
calendarView createModel createMonth dayClick dayDateViewChange drawMonths isDayDisabled monthChange monthClick monthDateViewChange monthView monthViewChange nextMonth ngDoCheck ngOnChanges ngOnDestroy ngOnInit onMouseEnterDay onMouseLeaveCalendar onMouseWheel onTouchMove previousMonth setDate setMonth setYear swipe updateDate updateDateDays updateDaysHighlighted yearChange yearDateViewChange yearView yearViewChange
###### Inputs
date dateMode disabledDays drawMonth highlightEndDate highlightStartDate
###### Outputs
hoverDay mouseLeaveCalendar onChange onDateModeChange onDrawMonth

### Constructor

`constructor(element: ElementRef, fsDatePickerCommon: FsDatePickerCommon, fsDatePickerModel: FsDatePickerModel, _iterableDiffers: IterableDiffers)`
Parameters :
Name | Type | Optional | Description
element | `ElementRef` | no |
fsDatePickerCommon | `FsDatePickerCommon` | no |
fsDatePickerModel | `FsDatePickerModel` | no |
_iterableDiffers | `IterableDiffers` | no |

### Inputs

`date` | Default value: `null`

`dateMode` | Default value: `null`

`disabledDays` | Default value: `null`

`drawMonth` | Default value: `null`

`highlightEndDate` | Default value: `null`

`highlightStartDate` | Default value: `null`

### Outputs

`hoverDay` | `$event` type: `EventEmitter`

`mouseLeaveCalendar` | `$event` type: `EventEmitter`

`onChange` | `$event` type: `EventEmitter`

`onDateModeChange` | `$event` type: `EventEmitter`

`onDrawMonth` | `$event` type: `EventEmitter`

### Methods

calendarView
`calendarView()`
Returns : `void`

createModel
`createModel()`
Returns : `void`

createMonth
`createMonth(date: )`
Parameters :
Name | Type | Optional | Default value | Description
date |  | no | `` |
Returns : `{ name: any; number: any; year: any; moment: any; date: string; weeks: {}; months: {}; years: {}; }`

dayClick
`dayClick(day: )`
Parameters :
Name | Type | Optional | Default value | Description
day |  | no | `` |
Returns : `void`

dayDateViewChange
`dayDateViewChange()`
Returns : `void`

drawMonths
`drawMonths(date: )`
Parameters :
Name | Type | Optional | Default value | Description
date |  | no | `` |
Returns : `void`

isDayDisabled
`isDayDisabled(md: )`
Parameters :
Name | Type | Optional | Default value | Description
md |  | no | `` |
Returns : `boolean`

monthChange
`monthChange(month: )`
Parameters :
Name | Type | Optional | Default value | Description
month |  | no | `` |
Returns : `void`

monthClick
`monthClick(month: )`
Parameters :
Name | Type | Optional | Default value | Description
month |  | no | `` |
Returns : `void`

monthDateViewChange
`monthDateViewChange()`
Returns : `void`

monthView
`monthView(month: )`
Parameters :
Name | Type | Optional | Default value | Description
month |  | no | `` |
Returns : `void`

monthViewChange
`monthViewChange(month: )`
Parameters :
Name | Type | Optional | Default value | Description
month |  | no | `` |
Returns : `void`

nextMonth
`nextMonth(month: )`
Parameters :
Name | Type | Optional | Default value | Description
month |  | no | `` |
Returns : `void`

ngDoCheck
`ngDoCheck()`
Returns : `void`

ngOnChanges
`ngOnChanges(changes: )`
Parameters :
Name | Type | Optional | Default value | Description
changes |  | no | `` |
Returns : `void`

ngOnDestroy
`ngOnDestroy()`
Returns : `void`

ngOnInit
`ngOnInit()`
Returns : `void`

onMouseEnterDay
`onMouseEnterDay(day: )`
Parameters :
Name | Type | Optional | Default value | Description
day |  | no | `` |
Returns : `void`

onMouseLeaveCalendar
`onMouseLeaveCalendar()`
Returns : `void`

onMouseWheel
`onMouseWheel($event: )`
Parameters :
Name | Type | Optional | Default value | Description
$event |  | no | `` |
Returns : `void`

onTouchMove
`onTouchMove($event: )`
Parameters :
Name | Type | Optional | Default value | Description
$event |  | no | `` |
Returns : `void`

previousMonth
`previousMonth(month: )`
Parameters :
Name | Type | Optional | Default value | Description
month |  | no | `` |
Returns : `void`

setDate
`setDate(date: )`
Parameters :
Name | Type | Optional | Default value | Description
date |  | no | `` |
Returns : `void`

setMonth
`setMonth(monthNumber: )`
Parameters :
Name | Type | Optional | Default value | Description
monthNumber |  | no | `` |
Returns : `void`

setYear
`setYear(yearNumber: )`
Parameters :
Name | Type | Optional | Default value | Description
yearNumber |  | no | `` |
Returns : `void`

swipe
`swipe(action: )`
Parameters :
Name | Type | Optional | Default value | Description
action |  | no | `this.SWIPE_ACTION.RIGHT` |
Returns : `void`

updateDate
`updateDate()`
Returns : `void`

updateDateDays
`updateDateDays()`
Returns : `{}`

updateDaysHighlighted
`updateDaysHighlighted()`
Returns : `void`

yearChange
`yearChange(year: )`
Parameters :
Name | Type | Optional | Default value | Description
year |  | no | `` |
Returns : `void`

yearDateViewChange
`yearDateViewChange()`
Returns : `void`

yearView
`yearView(year: )`
Parameters :
Name | Type | Optional | Default value | Description
year |  | no | `` |
Returns : `void`

yearViewChange
`yearViewChange(year: )`
Parameters :
Name | Type | Optional | Default value | Description
year |  | no | `` |
Returns : `void`

### Properties

dateDays
`dateDays: `[]``
Type : `[]`
Default value : `[]`

Public element
`element: `ElementRef``
Type : `ElementRef`

Public fsDatePickerModel
`fsDatePickerModel: `FsDatePickerModel``
Type : `FsDatePickerModel`

iscrollInstance
`iscrollInstance: `null``
Type : `null`
Default value : `null`

iscrollOptions
`iscrollOptions: `null``
Type : `null`
Default value : `null`

month
`month: `null``
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: `object``
Type : `object`
Default value : `{}`

today
`today: `object``
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>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""