ngx-mat-shift-selection
Version:
This is a simple date and time selection component design specificly for job shifts etc, with 24-hours available option.
32 lines (26 loc) • 2.43 kB
Markdown
# NgxMatShiftSelection
This is a simple date and time selection component design specificly for job shifts etc, with 24-hours available option.
## Installation:
1. Download from npm:
`npm install ngx-mat-shift-selection --save`
2. import the `NgxMatShiftSelectionModule` module:
`import { NgxMatShiftSelectionModule } from 'ngx-mat-shift-selection';`
3. Add `NgxMatShiftSelectionModule` to your module imports:
```ts
@NgModule({
...
imports: [
...
NgxMatShiftSelectionModule
]
})
```
## Usage
Put the <ngx-mat-shift-selection></ngx-mat-shift-selection> component selector wherever you need it.
### Attributes:
| Name | Type | Default | description |
|----------------------|:------------------:|:------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| selectedDates | `Input` -> `CalendarDate[]` | `[]` | This input `selectedDates` data that will be shown in the calendar when the component initiates. |
| calendarType | `Input` -> `String` | `"month"` | The input `calendarType` changes the view of the calendar, available options: `"month"` and `"week"`. |
| class | `Input` -> `String` | `""` | This is a simple class string that you wish to apply to the main div of the component e.g. `[class]="'mat-elevation-z4 p-4'"` etc |
| onSelectDate | `Input` -> `EventEmitter<CalendarDate[]>` | | This is the output event for the component that emit back selected values to it parent. |