ngx-mat-tui-calendar 12.0.1 → 12.0.5
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 +80 -42
- package/bundles/ngx-mat-tui-calendar.umd.js +1 -1
- package/bundles/ngx-mat-tui-calendar.umd.js.map +1 -1
- package/esm2015/lib/ngx-mat-tui-calendar.component.js +2 -2
- package/fesm2015/ngx-mat-tui-calendar.js +1 -1
- package/fesm2015/ngx-mat-tui-calendar.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -20,13 +20,13 @@ This project is an [Angular](https://angular.io/), [Material Design](https://mat
|
|
|
20
20
|
* Responsive to mobile devices
|
|
21
21
|
* Dark mode in progress...
|
|
22
22
|
|
|
23
|
-
This
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
This repo contains two projects:
|
|
24
|
+
1. the npm library called `ngx-mat-tui-calendar`, located in `projects/ngx-mat-tui-calendar`
|
|
25
|
+
2. the demo app, located in `src`
|
|
28
26
|
|
|
27
|
+
The top-level `angular.json` and `package.json` files are used for building both projects.
|
|
29
28
|
|
|
29
|
+
This repo was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.3. Angular ^12.2 requires node ^v14.15 (npm ^v6.14).
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
# UI
|
|
@@ -50,35 +50,44 @@ Install via npm:
|
|
|
50
50
|
```bash
|
|
51
51
|
npm i --save ngx-mat-tui-calendar
|
|
52
52
|
```
|
|
53
|
+
which will add `ngx-mat-tui-calendar`, as well as all of its dependencies to your `package.json` file.
|
|
54
|
+
|
|
53
55
|
Next import the module into your app's ```app.module.ts```:
|
|
54
56
|
```typescript
|
|
55
57
|
import {NgxMatTuiCalendarModule} from 'ngx-mat-tui-calendar';
|
|
56
|
-
|
|
57
|
-
@NgModule({
|
|
58
|
-
imports: [NgxMatTuiCalendarModule]
|
|
59
|
-
})
|
|
60
|
-
|
|
61
58
|
```
|
|
59
|
+
Then add `NgxMatTuiCalendarModule` to your list of NgModule imports, in ```app.module.ts```
|
|
62
60
|
|
|
63
|
-
Insert the following HTML into
|
|
61
|
+
Insert the following HTML into your app's template file
|
|
64
62
|
```angular2html
|
|
65
63
|
<mat-tui-calendar></mat-tui-calendar>
|
|
66
64
|
```
|
|
65
|
+
Set up an [Angular theme](https://material.angular.io/guide/theming). For example add the following line to the top of your `src/styles.scss` file
|
|
66
|
+
```typescript
|
|
67
|
+
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Quickstart Project
|
|
71
|
+
|
|
72
|
+
A demonstration of the usage described above usage can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-quickstart
|
|
67
73
|
|
|
68
74
|
## Demo Project
|
|
69
75
|
|
|
70
|
-
|
|
76
|
+
A more extensive demonstration of usage can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-demo
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
### Stackblitz
|
|
80
|
+
*Coming soon*
|
|
71
81
|
|
|
72
82
|
# Documentation
|
|
73
83
|
|
|
74
84
|
## MatTuiCalendar
|
|
75
85
|
|
|
76
|
-
Directive responsible for managing the timepicker popup and setting value to input
|
|
77
86
|
|
|
78
|
-
Selector: `mat-tui-calendar`
|
|
87
|
+
Selector: `ngx-mat-tui-calendar`
|
|
79
88
|
|
|
80
89
|
```typescript
|
|
81
|
-
<mat-tui-calendar #tuiCalendar
|
|
90
|
+
<ngx-mat-tui-calendar #tuiCalendar
|
|
82
91
|
(userCreatedSchedule)="onUserCreatedSchedule($event)"
|
|
83
92
|
(userUpdatedSchedule)="onUserUpdatedSchedule($event)"
|
|
84
93
|
(userDeletedSchedule)="onUserDeletedSchedule($event)"
|
|
@@ -91,45 +100,74 @@ Selector: `mat-tui-calendar`
|
|
|
91
100
|
| Name | Description |
|
|
92
101
|
|------|-------------|
|
|
93
102
|
| @Input()
|
|
94
|
-
|
|
95
|
-
| @
|
|
96
|
-
|
|
97
|
-
| @
|
|
98
|
-
|
|
99
|
-
| @
|
|
100
|
-
|
|
101
|
-
| @Input()
|
|
102
|
-
format: number | `12` or `24` . 12h/24h view for hour selection clock . `12` (AM/PM) format by default. |
|
|
103
|
-
| @Input()
|
|
104
|
-
min: string or DateTime | Set min time for timepicker (`11:15 pm` ) |
|
|
105
|
-
| @Input()
|
|
106
|
-
max: string or DateTime | Set max time for timepicker (`11:15 pm` ) |
|
|
107
|
-
| @Input()
|
|
108
|
-
disableClick: boolean | Set `true` to disable opening timepicker by clicking on the input |
|
|
103
|
+
options: CalendarOptions | The options object for the calendar. |
|
|
104
|
+
| @Output()
|
|
105
|
+
userCreatedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user creates a new "schedule" (ie calendar task). |
|
|
106
|
+
| @Output()
|
|
107
|
+
userUpdatedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user updates a "schedule" (ie calendar task). |
|
|
108
|
+
| @Output()
|
|
109
|
+
userDeletedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user deletes a "schedule" (ie calendar task). |
|
|
109
110
|
|
|
110
111
|
|
|
111
112
|
# Development
|
|
112
113
|
|
|
113
|
-
##
|
|
114
|
+
## Getting started
|
|
115
|
+
|
|
116
|
+
```bash
|
|
117
|
+
git clone https://github.com/ron2015schmitt/ngx-mat-tui-calendar
|
|
118
|
+
cd ngx-mat-tui-calendar
|
|
119
|
+
npm install
|
|
120
|
+
ng build
|
|
121
|
+
ng serve
|
|
122
|
+
```
|
|
123
|
+
Point your browser to http://localhost:4200/
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
## library package for ngx-mat-tui-calendar
|
|
127
|
+
|
|
128
|
+
The code that makes up the npm package is located in folder ```projects/ngx-mat-tui-calendar```.
|
|
129
|
+
|
|
130
|
+
After making changes, increment the version in ```projects/ngx-mat-tui-calendar/package.json```. We use the convention that the major version number corresponds to the major version of Angular used. The minor and patch versions are specific to this package.
|
|
131
|
+
|
|
132
|
+
The top-level `angular.json` file defines the build process for the library. The top-level `package.json` must include all the peer dependencies in `projects/ngx-mat-tui-calendar/package.json`.
|
|
114
133
|
|
|
115
|
-
|
|
134
|
+
### API
|
|
116
135
|
|
|
117
|
-
|
|
136
|
+
The API is defined in ```projects/ngx-mat-tui-calendar/src/public-api.ts```.
|
|
118
137
|
|
|
119
|
-
|
|
138
|
+
### Build
|
|
120
139
|
|
|
121
|
-
|
|
140
|
+
Run `ng build` to build the library project. The build artifacts will be stored in the `dist/ngx-mat-tui-calendar` directory.
|
|
122
141
|
|
|
123
|
-
|
|
142
|
+
### README
|
|
124
143
|
|
|
125
|
-
|
|
144
|
+
The main README file (`README.md`) and the package README file (`projects/ngx-mat-tui-calendar/README.md`) must be manually kept in sync: if you change one, then copy the change to the other.
|
|
126
145
|
|
|
127
|
-
|
|
146
|
+
### Publish package to https://npmjs.com/
|
|
128
147
|
|
|
129
|
-
|
|
148
|
+
Change directories to the `dist/ngx-mat-tui-calendar` directory and run the following:
|
|
149
|
+
```bash
|
|
150
|
+
npm login
|
|
151
|
+
npm publish
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
### publish source to github
|
|
155
|
+
|
|
156
|
+
Commit your changes and push to github.com. Then create a tab and release on github that matches the npm version number.
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
## Demo App
|
|
160
|
+
### Development server
|
|
161
|
+
|
|
162
|
+
The demo app is defined by the top-level `package.json` file, the top-level `angular.json` file and the contents of the `src` folder.
|
|
163
|
+
|
|
164
|
+
Run `ng serve demo` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
|
|
165
|
+
|
|
166
|
+
However, if you change the library files, in directory `projects/ngx-mat-tui-calendar`, you need to
|
|
167
|
+
1. Rebuild the library using `ng build`
|
|
168
|
+
2. Kill the dev server by typing `Ctrl-C` in the terminal where you are running `ng serve demo`
|
|
169
|
+
3. Run `ng serve demo` to restart the dev server
|
|
130
170
|
|
|
131
|
-
|
|
171
|
+
*Step 2 is usually necessary! You will get spurious errors without killing and restarting the server.*
|
|
132
172
|
|
|
133
|
-
## Further help
|
|
134
173
|
|
|
135
|
-
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.
|
|
@@ -1136,7 +1136,7 @@
|
|
|
1136
1136
|
return NgxMatTuiCalendarComponent;
|
|
1137
1137
|
}());
|
|
1138
1138
|
NgxMatTuiCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1139
|
-
NgxMatTuiCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0__namespace, template: "<section class=\"content-container\">\r\n <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-
|
|
1139
|
+
NgxMatTuiCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0__namespace, template: "<section class=\"content-container\">\r\n <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n <!-- The outer div gives the default color for when user does not provide an Angular theme -->\r\n <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-highlight\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-accent\"></div></div>\r\n <div style=\"color: red;\"> <div id=\"theme-warn\"></div></div>\r\n <div style=\"color: rgba(0, 0, 255, 0.2);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n \r\n <div class=\"calendar-container\">\r\n <!-- calendar titlebar -->\r\n <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n <!-- <div style=\"align-self: center;display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\"> -->\r\n <div style=\"display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 100%; \">\r\n <div class=\"left-div\">\r\n <!-- LEFT -->\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongPrev()\">\r\n <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarPrev()\">\r\n <fa-icon [icon]=\"iconPrev\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;\" \r\n (click)=\"onCalendarToday()\">\r\n <fa-icon [icon]=\"iconToday\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarNext()\">\r\n <fa-icon [icon]=\"iconNext\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongNext()\">\r\n <fa-icon [icon]=\"iconLongNext\"></fa-icon>\r\n </button>\r\n </div>\r\n <div class=\"center-div\">\r\n <!-- CENTER -->\r\n <span class=\"event-calendar-title\">{{ getDate() }}</span>\r\n </div>\r\n <div class=\"right-div\">\r\n \r\n <!-- RIGHT -->\r\n <mat-button-toggle-group class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n layout_height=\"wrap_content\">\r\n <mat-button-toggle mat-button value=\"month\" class=\"view-button\" (click)=\"onMonthView()\">\r\n <fa-icon [icon]=\"iconByMonth\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle mat-button value=\"week\" class=\"view-button\" (click)=\"onWeekView()\">\r\n <fa-icon [icon]=\"iconByWeek\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle mat-button value=\"day\" class=\"view-button\" (click)=\"onDayView()\">\r\n <fa-icon [icon]=\"iconByDay\"></fa-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </mat-toolbar>\r\n <ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>\r\n </div>\r\n \r\n </section>\r\n", styles: [".calendar-container{transform-origin:top left}.menu-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem!important}.mat-button{font-size:1.1rem!important}.mat-button.navigation-button{padding:0;min-width:32px}.left-div{width:33%;float:left;display:flex;white-space:nowrap;vertical-align:middle}.center-div{width:33%;float:right;text-align:center;white-space:nowrap;vertical-align:middle}.event-calendar-title{font-size:2rem;vertical-align:middle}.right-div{width:33%;display:flex;white-space:nowrap;vertical-align:middle;flex-flow:row-reverse}@media screen and (max-width: 599px){.left-div{transform:scale(.75);transform-origin:center left}.center-div{transform:scale(.5)}.right-div{transform:scale(1);transform-origin:center right}.right-div .mat-button-toggle-group.view-button{font-size:1.1rem!important}.right-div ::ng-deep .mat-button-toggle-label-content{padding:0 8px!important}}.mat-button-toggle-group.view-button{height:36px;font-size:1.25rem!important}.view-button{align-items:center}::ng-deep .mat-button-toggle-label-content{padding:0 10px!important}\n"], components: [{ type: i2__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4__namespace$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
|
|
1140
1140
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, decorators: [{
|
|
1141
1141
|
type: i0.Component,
|
|
1142
1142
|
args: [{
|