- A simple calendar
component
to be used with Angular component. - This component enhances the funtionality of Angular attendance calendar component and is recommended that it is used with angular 6+ apps.
- It is developed using
Angular >=8.0.0
and its newly introducedng g library
schematics. - This library is generated with Angular CLI version 8.0.0.
- Library location:
projects/ngx-attendace-library
directory of this repository.
npm i ngx-attendance-library --save
import { NgxAttendanceLibraryModule } from 'ngx-attendance-library''
selector: Ngx-AttendanceCalendar
Input | Type | Required | Description |
---|---|---|---|
monthData | string | YES | selected month |
yearData | string | YES | selected year |
attendanceData | object | YES | attendance data like below |
[
{
"year": "2020",
"month": "apr",
"data": [
{
"date": 1,
"status": "present"
},
{
"date": 2,
"status": "abscent"
},
{
"date": 3,
"status": "present"
},
{
"date": 4,
"status": "woff"
},
{
"date": 5,
"status": "woff"
},
{
"date": 6,
"status": "present"
},
{
"date": 7,
"status": "present"
},
{
"date": 8,
"status": "present"
},
{
"date": 9,
"status": "present"
},
{
"date": 10,
"status": "present"
},
{
"date": 11,
"status": "woff"
},
{
"date": 12,
"status": "woff"
},
{
"date": 13,
"status": "req"
}
]
}
]
- Register the
NgxAttendanceLibraryModule
in your app module.
import { NgxAttendanceLibraryModule } from 'ngx-attendance-library'
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { NgxAttendanceLibraryModule } from 'ngx-attendance-library';
@NgModule({
declarations: [...],
imports: [
BrowserModule,
CommonModule,
NgxAttendanceLibraryModule,
],
providers: [],
bootstrap: [...]
})
export class AppModule {}
- go to your component.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'mat-ta-root',
template: `
<Ngx-AttendanceCalendar [monthData]="selectedMonth" [yearData]="selectedyear" [attendanceData]="myAttData"></Ngx-AttendanceCalendar>
`,
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
// Paramteres for the input type are defined below. The url is generated using `json-server`.
// Please run your own instance of the json-server to use the the below url.
selectedMonth:string = "apr"
selectedyear:string = "2020"
myAttData = [
{
"year": "2020",
"month": "apr",
"data": [
{
"date": 1,
"status": "present"
},
{
"date": 2,
"status": "abscent"
},
{
"date": 3,
"status": "present"
},
{
"date": 4,
"status": "woff"
},
{
"date": 5,
"status": "woff"
},
{
"date": 6,
"status": "present"
},
{
"date": 7,
"status": "present"
},
{
"date": 8,
"status": "present"
},
{
"date": 9,
"status": "present"
},
{
"date": 10,
"status": "present"
},
{
"date": 11,
"status": "woff"
},
{
"date": 12,
"status": "woff"
},
{
"date": 13,
"status": "req"
}
]
}
];
constructor() {}
ngOnInit() {
}
}
npm i
- Run
ng serve
for a dev server and running the demo app. Navigate tohttp://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng build NgxAttendanceLibrary
to build the library. The build artifacts will be stored in the dist/ngx-attendance-library
directory. Use the --prod
flag for a production build.
Run ng test NgxAttendanceLibrary
to execute the unit tests via Karma.
This project is based on Ngx-Attendance-Calendar. I want to thank entire Angular team for creating this awesome framework.