angular-material-app documentation
  1. Components
  2. MonthComponent

File

src/app/component/date-picker/month/month.component.ts

Metadata

encapsulation ViewEncapsulation.None
selector stbui-calendar-month
styleUrls ./month.component.scss
templateUrl ./month.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor()
Defined in src/app/component/date-picker/month/month.component.ts:37

Inputs

displayDate
Defined in src/app/component/date-picker/month/month.component.ts:27

Outputs

selectValueChange
Type : EventEmitter<any>
Defined in src/app/component/date-picker/month/month.component.ts:24

Methods

coerceBooleanProperty
coerceBooleanProperty(value)
Defined in src/app/component/date-picker/month/month.component.ts:51
Parameters :
Name Optional
value No
Returns : boolean
isNow
isNow(date: Date)
Defined in src/app/component/date-picker/month/month.component.ts:41
Parameters :
Name Type Optional
date Date No
Returns : boolean
onSelectValueChange
onSelectValueChange(event)
Defined in src/app/component/date-picker/month/month.component.ts:55
Parameters :
Name Optional
event No
Returns : boolean

Properties

weeksArray
Defined in src/app/component/date-picker/month/month.component.ts:22

Accessors

displayDate
getdisplayDate()
Defined in src/app/component/date-picker/month/month.component.ts:35
setdisplayDate(val)
Defined in src/app/component/date-picker/month/month.component.ts:27
Parameters :
Name Optional
val No
Returns : void 
import {
  Component,
  Input,
  Output,
  EventEmitter,
  ViewEncapsulation
} from '@angular/core';
import { getWeekArray } from '../dateUtils';

@Component({
  selector: 'stbui-calendar-month',
  templateUrl: './month.component.html',
  styleUrls: ['./month.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class MonthComponent {
  weeksArray;

  @Output() selectValueChange: EventEmitter<any> = new EventEmitter<any>();

  @Input()
  set displayDate(val) {
    this.weeksArray = getWeekArray(val || new Date(), 1);
    this.weeksArray = this.weeksArray.map(weeks => {
      return weeks.map(day => {
        return { selected: false, day };
      });
    });
  }
  get displayDate() {
    return this.weeksArray;
  }

  constructor() {}

  isNow(date: Date): boolean {
    const now = new Date();
    return (
      date &&
      date.getFullYear() === now.getFullYear() &&
      date.getMonth() === now.getMonth() &&
      date.getDate() === now.getDate()
    );
  }

  coerceBooleanProperty(value): boolean {
    return value != null && `${value}` !== 'false';
  }

  onSelectValueChange(event) {
    if (!this.coerceBooleanProperty(event.day)) {
      return false;
    }
    for (let weeks of this.weeksArray) {
      for (let day of weeks) {
        day.selected = false;
      }
    }
    event.selected = true;
    this.selectValueChange.emit(event.day);
  }
}
Copy
<div class="stb-calendar-monthday-content">
  <div class="stb-calendar-monthday-row" *ngFor="let weeks of weeksArray">

    <ng-container *ngFor="let week of weeks">
      <button mat-mini-fab color="primary" *ngIf="isNow(week.day)">{{ week.day | datePicker: 'formatDay' }}</button>
      <button mat-mini-fab color="primary" *ngIf="!isNow(week.day) && week.selected" [class.selected]="week.selected" (click)="onSelectValueChange(week)">{{ week.day | datePicker: 'formatDay' }}</button>
      <button mat-ripple class="stb-day-button" *ngIf="!isNow(week.day) && !week.selected&&week.day" (click)="onSelectValueChange(week)">{{ week.day | datePicker: 'formatDay' }}</button>
      <button class="stb-day-button empty" *ngIf="!week.day">{{ week.day | datePicker: 'formatDay' }}</button>
    </ng-container>

  </div>
</div>
Copy

./month.component.scss 

.stb-calendar-monthday-content {
  position: relative;
  &-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 2px;
  }
}

.stb-day-button {
  display: inline-block;
  background: none;
  outline: none;
  font-weight: 400;
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 36px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  box-sizing: border-box;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  vertical-align: top;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  &.disabled {
    opacity: 0.4;
  }
  &.empty {
    cursor: default
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""