Angular Material Inline MatCalender/DatePicker

Introduction:

In this article, we’ll go through the steps of using the Calendar inline in component, including the many choices available, such as:

• Max Date
• Min Date
• Filter some of dates like disable Sunday & Saturday in inline MatCalender.
• Control trigger event on date selection

let’s do coding. First of all create new project & install Angular Material.

Create New Project

By using the following command in the CLI, we can create a new Angular project.

ng new matcalender

It will ask you if you want Routing in the project when you run the command above. as well as the CSS style types you’d want to use for the project.

Install Angular Material

Run the following npm CLI command to install Material, CDK, and Animation packages in your Angular project.

npm install –save @angular/material @angular/cdk @angular/animations

Add Material Theme

The project’s components are styled with CSS from the material CSS theme file, so simply include the following link in styles.css at the project’s root.

@import “~@angular/material/prebuilt-themes/deeppurple-amber.css”;

Add Inline Material DatePicker Calendar

Inline datepicker requires the MatDatepickerModule and MatNativeDateModule modules.

The app.module.ts file will look like this after importing these modules:

Now we will use the mat-calendar component with the following option values to display an inline Datepicker calendar.

There are two properties for Datepicker:

1. Input Properties
2. Output Properties

1) Input Properties:

selected :

Set selected date in calendar datepicker.

startAt :

The date on which the calendar view will start.

minDate :

Set Minimum date in calendar datepicker.

maxDate :

Set Maximum date in calendar datepicker.

dateFilter :

Filter method used to enable or disable dates.

2)Output Properties:

selectedChanges:

This event is triggered when any date selected by user.

monthSelected:

This event occurs when the user changes the month that is presently shown, as the name implies.

let’s go through coding!

app.component.html

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
  <div fxFlex="20%" *ngFor="let i of [1,2,3,4]">
    <mat-card>
      <mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>
    </mat-card>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  selectedDate: any;
  name = 'Angular 6';

  onSelect(event){
    console.log(event);
    this.selectedDate= event;
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import { LayoutModule } from '@angular/cdk/layout';
import { FormsModule } from '@angular/forms';
import {
    MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule,
    MatListModule, MatSelectModule, MatRadioModule, MatGridListModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,MatCardModule
} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [         NoopAnimationsModule,
        LayoutModule,
        MatToolbarModule,
        MatButtonModule,
        MatSidenavModule,
        MatIconModule,
        MatListModule,
        MatSelectModule,
        MatRadioModule,
        MatGridListModule,
        MatInputModule,
        ReactiveFormsModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatCardModule,
        FlexLayoutModule,
        BrowserAnimationsModule,
        BrowserModule 
         ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Well, there’s still a lot more we can do with this component. For example, the calendar header might have a totally customizable appearance.