@eff-custom-plugins/timesheet
TypeScript icon, indicating that this package has built-in type declarations

3.0.0 • Public • Published

Timesheet

Timesheet is a week schedule component using Angular v14.0.5.

Installation

NPM

npm i @eff-custom-plugins/timesheet

Usage

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
    ..
  ]
})
  1. 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>
  1. 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;
}
  1. You done. Run your app. cheers!

Readme

Keywords

none

Package Sidebar

Install

npm i @eff-custom-plugins/timesheet

Weekly Downloads

1

Version

3.0.0

License

none

Unpacked Size

175 kB

Total Files

16

Last publish

Collaborators

  • red_sweater