thomascsd / ngx-dot-calendar

Calendar component for Angualr 14+

@thomascsd/ngx-dot-calendar

The project fork from az-idatepicker

Feature

• Supports Angular v14 and above
• Support RWD
• Display dots under the dates based on the provided data.
• Supports Ivy
• Supports Standalone mode

Install

1. install module:

npm install @thomascsd/ngx-dot-calendar

2. Install peer dependencies:

npm install date-fns

Usage

In app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxDotCalendarModule } from '@thomascsd/ngx-dot-calendar';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxDotCalendarModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<ngx-dot-calendar [dateContents]="dateContents" (onSelect)="setDate($event)"></ngx-dot-calendar>

API

Attributes

Parameter	Type	Is Required	Default Value	Description
dateContents	DateContent	yes	-	Content of the date
format	string	no	YYYY-MM-DD	The date format, default to 'YYYY-MM-DD'
idatePickerBinding	any	no	-	Binding for ngModel
sundayHighlight	boolean	no	false	If true then sunday will have red color
minYear	number	no	1970	Minimum year
maxYear	number	no	2020	Maximum year
disableDays	Array	no	[]	Disable dates that in the defined day. Day must defined in ordered index (0=sunday, 1=monday, 2=tuesday, 3=wednesday, 4=thursday, 5=friday, 6=saturday)

Callback Events

Name	Return Type	Description
getSelectedDate	string	Return selected date

License

• License: MIT

Author

• Author: thomascsd