3.0.0 • Published 2 years ago
@eff-custom-plugins/timesheet v3.0.0
Timesheet
Timesheet is a week schedule component using Angular v14.0.5.
Installation
NPM
npm i @eff-custom-plugins/timesheetUsage
Html
<timesheet tableName="Date/Time" [selectedSchedules]="{"0": ["05:00"], "1": ["03:00","05:00"], "5": ["05:00","08:00","09:00"]}" [columnNames]="['00:00', '01:00', '02:00', '03:00']" (scheduleChangeEvent)="changeSchedule($event)"></timesheet>Attributes
| Attributes | Description |
|---|---|
| @Input() tableName: string | The name of the table (top left column). Default value: Date/Time |
| @Input() selectedSchedules: {key: string: string[]} | Default selected items |
| @Input() columnNames: IColumns[] | Columns names. Default value: {"value":"00:00"},{"value":"01:00"},{"value":"02:00"},{"value":"03:00"},{"value":"04:00"},{"value":"05:00"},{"value":"06:00"},{"value":"07:00"},{"value":"08:00"},{"value":"09:00"},{"value":"10:00"},{"value":"11:00"},{"value":"12:00"},{"value":"13:00"},{"value":"14:00"},{"value":"15:00"},{"value":"16:00"},{"value":"17:00"},{"value":"18:00"},{"value":"19:00"},{"value":"20:00"},{"value":"21:00"},{"value":"22:00"},{"value":"23:00"} |
| @Output() scheduleChangeEvent: EventEmitter<{key: string: string[]}>() | The event will be fired on change of selected schedule values. Returns: Selected schedule of values as an {key: string: string[]}.1 = Monday,2 = Tuesday,3 = Wednesday,4 = Thursday,5 = Friday,6 = Saturday,0 = Sunday |
Example and Sample Code
1) Import 'TimesheetModule' in your app module
import { TimesheetModule } from "@eff-custom-plugins/timesheet";
@NgModule({
imports:[
..
TimesheetModule
..
]
})2) Add 'timesheet' in your component html
<timesheet tableName="Date/Time" [selectedSchedules]="{"0": ["05:00"], "1": ["03:00","05:00"], "5": ["05:00","08:00","09:00"]}" [columnNames]="['00:00', '01:00', '02:00', '03:00']" (scheduleChangeEvent)="changeSchedule($event)"></timesheet>3) Add a method in your component class to listen for onChange event from timesheet
/*Method to listen for onChange event from timesheet*/
scheduleChangeEvent(selectedValues: {[key: string]: string[]}) {
this._currentValues = selectedValues;
}4) You done. Run your app. cheers!