NgScrollCalendar

NgScrollCalendar is a Angular Module that supports fullscreen and Lazyload on Pagescroll (Recommended for Mobile screens)

Installation

npm install ng-scroll-calendar --save

Usage

import the NgScrollCalendarModule to your module:

.
import { NgScrollCalendarModule } from 'ng-scroll-calendar';
.
.
 
@NgModule({
  imports: [
    NgScrollCalendarModule,
    .
    .
    ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}
 

Add the following changes to your Component

import { Component } from '@angular/core';
 
@Component({
  selector: 'app',
  template: `
    <input type="text" (focus)="showCalendar()">
    <ng-scroll-calendar [config]="config" (onSelect)="onDateChange($event)"></ng-scroll-calendar>
  `
})
 
export class AppComponent {
  config = {
    show: false,
    weekOffset: -2,
    selectedDate: new Date(),
    DisablePastDays:true
  };
 
  onDateChange(date) {
    console.log(date);
  }
 
  showCalendar() {
    this.config.show = true;
  }
}

Supported API

Properties

@Input()  config

Key	Type	Required	Default	Description
show	Boolean	Yes	false	Used for Calendar visibility
selectedDate	Date	Optional	Current Date	d-active class will be added to the selected date
weekOffset	Number	Optional	-2	Number of Weeks to be Skipped(eg. 2)/Added(eg: -2)
DisablePastDays	Boolean	Optional	false	Disable/Enable past Days

Events

@Output()	Type	Description
onSelect	EventEmitter	Returns the Selected date.

Style Guide

Class Name	Description
.date-item	will be added to all the date tiles
.disabled	will be added to the dates which are disabled
.d-active	will be added to the selected date
.today	will be added when date = today