ngx-mat-tui-calendar 0.0.5 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +130 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
[](https://www.repostatus.org/#wip)
|
|
5
|
+
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://github.com/ron2015schmitt/ngx-mat-tui-calendar/stargazers)
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# ngx-mat-tui-calendar
|
|
15
|
+
|
|
16
|
+
 `Work In Progress`
|
|
17
|
+
This project is an Angular, Material Design wrapper for the [Toast UI Calendar](https://github.com/nhn/tui.calendar).
|
|
18
|
+
* Material Design theming
|
|
19
|
+
* Material Design buttons and dialog
|
|
20
|
+
* Responsive to mobile devices
|
|
21
|
+
* Dark mode in progress...
|
|
22
|
+
|
|
23
|
+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.3.
|
|
24
|
+
|
|
25
|
+
Using Angular 12 which requires node ^v14.15 (npm ^v6.14)
|
|
26
|
+
|
|
27
|
+
# UI
|
|
28
|
+
## Month View
|
|
29
|
+
|
|
30
|
+
<img src="https://user-images.githubusercontent.com/11559541/141834376-3f815d1e-7e2b-4f2e-8540-f45303292cfb.png" width="70%" height="70%">
|
|
31
|
+
|
|
32
|
+
## Week View
|
|
33
|
+
<img src="https://user-images.githubusercontent.com/11559541/141834444-89f511c0-8ada-4269-8490-c2864f481bc7.png" width="70%" height="70%">
|
|
34
|
+
|
|
35
|
+
## Day View
|
|
36
|
+
<img src="https://user-images.githubusercontent.com/11559541/141834457-ec741af5-df67-4029-8830-c5b4fd356fff.png" width="70%" height="70%">
|
|
37
|
+
|
|
38
|
+
## Event Editing Dialog
|
|
39
|
+
<img src="https://user-images.githubusercontent.com/11559541/141834468-3b3a81be-c4f5-4d76-8f29-88c193e1adba.JPG" width="70%" height="70%">
|
|
40
|
+
|
|
41
|
+
# Usage
|
|
42
|
+
## Getting started
|
|
43
|
+
|
|
44
|
+
Install via npm:
|
|
45
|
+
```bash
|
|
46
|
+
npm i --save ngx-mat-tui-calendar
|
|
47
|
+
```
|
|
48
|
+
Next import the module into your app's ```app.module.ts```:
|
|
49
|
+
```typescript
|
|
50
|
+
import {NgxMatTuiCalendarModule} from 'ngx-mat-tui-calendar';
|
|
51
|
+
|
|
52
|
+
@NgModule({
|
|
53
|
+
imports: [NgxMatTuiCalendarModule]
|
|
54
|
+
})
|
|
55
|
+
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Insert the following HTML into one of your app's template files
|
|
59
|
+
```angular2html
|
|
60
|
+
<mat-tui-calendar></mat-tui-calendar>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Demo Project
|
|
64
|
+
|
|
65
|
+
## Stackblitz
|
|
66
|
+
|
|
67
|
+
# Documentation
|
|
68
|
+
|
|
69
|
+
## MatTuiCalendar
|
|
70
|
+
|
|
71
|
+
Directive responsible for managing the timepicker popup and setting value to input
|
|
72
|
+
|
|
73
|
+
Selector: `mat-tui-calendar`
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
<mat-tui-calendar #tuiCalendar
|
|
77
|
+
(userCreatedSchedule)="onUserCreatedSchedule($event)"
|
|
78
|
+
(userUpdatedSchedule)="onUserUpdatedSchedule($event)"
|
|
79
|
+
(userDeletedSchedule)="onUserDeletedSchedule($event)"
|
|
80
|
+
[options]="options"
|
|
81
|
+
>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Properties
|
|
85
|
+
|
|
86
|
+
| Name | Description |
|
|
87
|
+
|------|-------------|
|
|
88
|
+
| @Input()
|
|
89
|
+
ngxMatTimepicker: NgxMatTimepickerComponent | The timepicker that this input is associated with. |
|
|
90
|
+
| @Input()
|
|
91
|
+
color: ThemePalette | The material palette to use. |
|
|
92
|
+
| @Input()
|
|
93
|
+
disabled: boolean | Weather the timepicker popup should be disabled. |
|
|
94
|
+
| @Input()
|
|
95
|
+
value: string | Set a default value and time for a timepicker. The format of the time is in 12 hours notation `11:00 PM` or in 24 hours notation `23:00`. A Date string won't work. |
|
|
96
|
+
| @Input()
|
|
97
|
+
format: number | `12` or `24` . 12h/24h view for hour selection clock . `12` (AM/PM) format by default. |
|
|
98
|
+
| @Input()
|
|
99
|
+
min: string or DateTime | Set min time for timepicker (`11:15 pm` ) |
|
|
100
|
+
| @Input()
|
|
101
|
+
max: string or DateTime | Set max time for timepicker (`11:15 pm` ) |
|
|
102
|
+
| @Input()
|
|
103
|
+
disableClick: boolean | Set `true` to disable opening timepicker by clicking on the input |
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
# Development
|
|
107
|
+
|
|
108
|
+
## Development server
|
|
109
|
+
|
|
110
|
+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
|
111
|
+
|
|
112
|
+
## Code scaffolding
|
|
113
|
+
|
|
114
|
+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
|
|
115
|
+
|
|
116
|
+
## Build
|
|
117
|
+
|
|
118
|
+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
|
|
119
|
+
|
|
120
|
+
## Running unit tests
|
|
121
|
+
|
|
122
|
+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
|
|
123
|
+
|
|
124
|
+
## Running end-to-end tests
|
|
125
|
+
|
|
126
|
+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
|
|
127
|
+
|
|
128
|
+
## Further help
|
|
129
|
+
|
|
130
|
+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
|