File

src/directives/calendarPreviousView.directive.ts

Description

Change the view date to the previous view. For example:

<button
mwlCalendarPreviousView
[(viewDate)]="viewDate"
[view]="view">
Previous
</button>

Metadata

selector [mwlCalendarPreviousView]

Inputs

view

The current view

Type: string

viewDate

The current view date

Type: Date

Outputs

viewDateChange

Called when the view date is changed

$event type: any
import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
import subDays from 'date-fns/sub_days';
import subWeeks from 'date-fns/sub_weeks';
import subMonths from 'date-fns/sub_months';

/**
 * Change the view date to the previous view. For example:
 *
 * ```
 * &lt;button
 *  mwlCalendarPreviousView
 *  [(viewDate)]="viewDate"
 *  [view]="view"&gt;
 *  Previous
 * &lt;/button&gt;
 * ```
 */
@Directive({
  selector: '[mwlCalendarPreviousView]'
})
export class CalendarPreviousViewDirective {

  /**
   * The current view
   */
  @Input() view: string;

  /**
   * The current view date
   */
  @Input() viewDate: Date;

  /**
   * Called when the view date is changed
   */
  @Output() viewDateChange: EventEmitter<Date> = new EventEmitter();

  /**
   * @hidden
   */
  @HostListener('click')
  onClick(): void {

    const subFn: any = {
      day: subDays,
      week: subWeeks,
      month: subMonths
    }[this.view];

    this.viewDateChange.emit(subFn(this.viewDate, 1));

  }

}

results matching ""

    No results matching ""