ngx-mat-tui-calendar 1.0.0 → 12.0.3
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 +65 -43
- package/bundles/ngx-mat-tui-calendar.umd.js +46 -24
- package/bundles/ngx-mat-tui-calendar.umd.js.map +1 -1
- package/esm2015/lib/ngx-mat-tui-calendar.component.js +47 -25
- package/fesm2015/ngx-mat-tui-calendar.js +46 -24
- package/fesm2015/ngx-mat-tui-calendar.js.map +1 -1
- package/lib/ngx-mat-tui-calendar.component.d.ts +7 -4
- package/package.json +22 -8
- package/src/lib/ngx-mat-tui-calendar-wrapper/ngx-mat-tui-calendar-wrapper.component.theme.scss +0 -6
- package/src/lib/ngx-mat-tui-calendar.component.theme.scss +3 -0
package/README.md
CHANGED
@@ -1,28 +1,33 @@
|
|
1
1
|
|
2
2
|

|
3
3
|
|
4
|
-
[](https://www.repostatus.org/#wip)
|
5
|
-
|
6
4
|
[](https://opensource.org/licenses/MIT)
|
5
|
+
[](https://www.repostatus.org/#active)
|
7
6
|
[](https://github.com/ron2015schmitt/ngx-mat-tui-calendar/stargazers)
|
8
7
|

|
9
8
|

|
10
9
|
|
11
|
-

|
10
|
+
[](https://www.npmjs.com/package/ngx-mat-tui-calendar)
|
12
11
|

|
13
12
|
|
14
13
|
# ngx-mat-tui-calendar
|
15
14
|
|
16
|
-
|
17
|
-
|
15
|
+
This project is an [Angular](https://angular.io/), [Material Design](https://material.angular.io/) wrapper for the [Toast UI Calendar](https://github.com/nhn/tui.calendar), published via [
|
16
|
+
](https://www.npmjs.com/package/ngx-mat-tui-calendar).
|
17
|
+
|
18
18
|
* Material Design theming
|
19
19
|
* Material Design buttons and dialog
|
20
20
|
* Responsive to mobile devices
|
21
21
|
* Dark mode in progress...
|
22
22
|
|
23
|
-
This
|
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`
|
26
|
+
|
27
|
+
The top-level `angular.json` and `package.json` files are used for building both projects.
|
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).
|
24
30
|
|
25
|
-
Using Angular 12 which requires node ^v14.15 (npm ^v6.14)
|
26
31
|
|
27
32
|
# UI
|
28
33
|
## Month View
|
@@ -48,32 +53,32 @@ npm i --save ngx-mat-tui-calendar
|
|
48
53
|
Next import the module into your app's ```app.module.ts```:
|
49
54
|
```typescript
|
50
55
|
import {NgxMatTuiCalendarModule} from 'ngx-mat-tui-calendar';
|
51
|
-
|
52
|
-
@NgModule({
|
53
|
-
imports: [NgxMatTuiCalendarModule]
|
54
|
-
})
|
55
|
-
|
56
56
|
```
|
57
|
+
Then add `NgxMatTuiCalendarModule` to your list of NgModule imports, in ```app.module.ts```
|
57
58
|
|
58
59
|
Insert the following HTML into one of your app's template files
|
59
60
|
```angular2html
|
60
61
|
<mat-tui-calendar></mat-tui-calendar>
|
61
62
|
```
|
62
63
|
|
64
|
+
## Quickstart Project
|
65
|
+
*TODO*
|
66
|
+
|
63
67
|
## Demo Project
|
68
|
+
*TODO*
|
64
69
|
|
65
|
-
|
70
|
+
### Stackblitz
|
71
|
+
*TODO*
|
66
72
|
|
67
73
|
# Documentation
|
68
74
|
|
69
75
|
## MatTuiCalendar
|
70
76
|
|
71
|
-
Directive responsible for managing the timepicker popup and setting value to input
|
72
77
|
|
73
|
-
Selector: `mat-tui-calendar`
|
78
|
+
Selector: `ngx-mat-tui-calendar`
|
74
79
|
|
75
80
|
```typescript
|
76
|
-
<mat-tui-calendar #tuiCalendar
|
81
|
+
<ngx-mat-tui-calendar #tuiCalendar
|
77
82
|
(userCreatedSchedule)="onUserCreatedSchedule($event)"
|
78
83
|
(userUpdatedSchedule)="onUserUpdatedSchedule($event)"
|
79
84
|
(userDeletedSchedule)="onUserDeletedSchedule($event)"
|
@@ -86,45 +91,62 @@ Selector: `mat-tui-calendar`
|
|
86
91
|
| Name | Description |
|
87
92
|
|------|-------------|
|
88
93
|
| @Input()
|
89
|
-
|
90
|
-
| @
|
91
|
-
|
92
|
-
| @
|
93
|
-
|
94
|
-
| @
|
95
|
-
|
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 |
|
94
|
+
options: CalendarOptions | The options object for the calendar. |
|
95
|
+
| @Output()
|
96
|
+
userCreatedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user creates a new "schedule" (ie calendar task). |
|
97
|
+
| @Output()
|
98
|
+
userUpdatedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user updates a "schedule" (ie calendar task). |
|
99
|
+
| @Output()
|
100
|
+
userDeletedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user deletes a "schedule" (ie calendar task). |
|
104
101
|
|
105
102
|
|
106
103
|
# Development
|
107
104
|
|
108
|
-
##
|
105
|
+
## library package for ngx-mat-tui-calendar
|
106
|
+
|
107
|
+
The code that makes up the npm package is located in folder ```projects/ngx-mat-tui-calendar```.
|
108
|
+
|
109
|
+
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.
|
110
|
+
|
111
|
+
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`.
|
109
112
|
|
110
|
-
|
113
|
+
### API
|
111
114
|
|
112
|
-
|
115
|
+
The API is defined in ```projects/ngx-mat-tui-calendar/src/public-api.ts```.
|
113
116
|
|
114
|
-
|
117
|
+
### Build
|
115
118
|
|
116
|
-
|
119
|
+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/ngx-mat-tui-calendar` directory.
|
117
120
|
|
118
|
-
|
121
|
+
### README
|
119
122
|
|
120
|
-
|
123
|
+
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.
|
121
124
|
|
122
|
-
|
125
|
+
### Publish package to https://npmjs.com/
|
126
|
+
|
127
|
+
Change directories to the `dist/ngx-mat-tui-calendar` directory and run the following:
|
128
|
+
```bash
|
129
|
+
npm login
|
130
|
+
npm publish
|
131
|
+
```
|
123
132
|
|
124
|
-
|
133
|
+
### publish source to github
|
134
|
+
|
135
|
+
Commit your changes and push to github.com. Then create a tab and release on github that matches the npm version number.
|
136
|
+
|
137
|
+
|
138
|
+
## Demo App
|
139
|
+
### Development server
|
140
|
+
|
141
|
+
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.
|
142
|
+
|
143
|
+
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.
|
144
|
+
|
145
|
+
However, if you change the library files, in directory `projects/ngx-mat-tui-calendar`, you need to
|
146
|
+
1. Rebuild the library using `ng build`
|
147
|
+
2. Kill the dev server by typing `Ctrl-C` in the terminal where you are running `ng serve demo`
|
148
|
+
3. Run `ng serve demo` to restart the dev server
|
125
149
|
|
126
|
-
|
150
|
+
*Step 2 is usually necessary! You will get spurious errors without killing and restarting the server.*
|
127
151
|
|
128
|
-
## Further help
|
129
152
|
|
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.
|
@@ -651,9 +651,11 @@
|
|
651
651
|
this.colors = distinctColors__default["default"]({ lightMin: 70, count: 15 }).slice(1);
|
652
652
|
this.colorIndex = 0;
|
653
653
|
this.calendarId = uuid.v4();
|
654
|
+
this.appliedOptions = this.getDefaultOptions();
|
654
655
|
}
|
655
656
|
NgxMatTuiCalendarComponent.prototype.ngOnInit = function () {
|
656
|
-
|
657
|
+
console.warn("calendar.component.ts: ngOnit");
|
658
|
+
this.createTUICalendar();
|
657
659
|
this.bindCallbacks();
|
658
660
|
};
|
659
661
|
NgxMatTuiCalendarComponent.prototype.ngOnChanges = function (changes) {
|
@@ -662,13 +664,7 @@
|
|
662
664
|
if (changes.options) {
|
663
665
|
console.warn("change.option:", changes.options);
|
664
666
|
var options = changes.options.currentValue;
|
665
|
-
|
666
|
-
options.theme = this.getDefaultTheme();
|
667
|
-
}
|
668
|
-
console.warn("TUI theme:", options.theme);
|
669
|
-
this.calendar.setOptions(options.ioptions);
|
670
|
-
this.calendar.setTheme(options.theme);
|
671
|
-
this.calendar.render(true);
|
667
|
+
this.setOptions(options);
|
672
668
|
}
|
673
669
|
}
|
674
670
|
};
|
@@ -743,8 +739,11 @@
|
|
743
739
|
});
|
744
740
|
return str;
|
745
741
|
};
|
746
|
-
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function (
|
747
|
-
|
742
|
+
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function () {
|
743
|
+
var ioptions = this.preprocessIOptions(null);
|
744
|
+
console.warn("calendar.component.ts: createTUICalendar: ioptions:", ioptions);
|
745
|
+
this.calendar = new Calendar__default["default"]('#calendar', ioptions);
|
746
|
+
console.warn("calendar.component.ts: createTUICalendar: this.calendar:", this.calendar);
|
748
747
|
};
|
749
748
|
NgxMatTuiCalendarComponent.prototype.bindCallbacks = function () {
|
750
749
|
this.bindAfterRenderSchedule();
|
@@ -911,9 +910,11 @@
|
|
911
910
|
var _this = this;
|
912
911
|
// console.log('openPopupScheduleEditor: calevent:', schedule);
|
913
912
|
var dialogConfig = new i1.MatDialogConfig();
|
914
|
-
|
915
|
-
|
916
|
-
|
913
|
+
if (this.appliedOptions.themeClass) {
|
914
|
+
dialogConfig.panelClass = this.appliedOptions.themeClass;
|
915
|
+
}
|
916
|
+
console.warn("options: ", this.appliedOptions);
|
917
|
+
dialogConfig.data = { schedule: schedule, darkMode: this.appliedOptions.darkMode, themeClass: this.appliedOptions.themeClass };
|
917
918
|
dialogConfig.autoFocus = true;
|
918
919
|
var dialogRef = this.dialog.open(NgxMatTuiCalendarEditorDialogComponent, dialogConfig);
|
919
920
|
// const dialogRef = this.dialog.open(NgxMatTuiCalendarScheduleEditorDialogComponent, {
|
@@ -941,21 +942,42 @@
|
|
941
942
|
});
|
942
943
|
};
|
943
944
|
NgxMatTuiCalendarComponent.prototype.setOptions = function (options) {
|
944
|
-
this.calendar.setOptions(this.prerocessOptions(options));
|
945
|
-
};
|
946
|
-
NgxMatTuiCalendarComponent.prototype.prerocessOptions = function (options) {
|
947
|
-
var defs = this.getDefaultOptions();
|
948
945
|
if (options == null) {
|
949
|
-
options =
|
946
|
+
options = this.getDefaultOptions();
|
947
|
+
}
|
948
|
+
options.ioptions = this.setIOptions(options.ioptions);
|
949
|
+
this.appliedOptions = Object.assign({}, options);
|
950
|
+
};
|
951
|
+
NgxMatTuiCalendarComponent.prototype.setIOptions = function (ioptionsIn) {
|
952
|
+
var ioptions = this.preprocessIOptions(ioptionsIn);
|
953
|
+
this.calendar.setOptions(ioptions);
|
954
|
+
this.calendar.setTheme(ioptions.theme);
|
955
|
+
this.calendar.render(true);
|
956
|
+
return ioptions;
|
957
|
+
};
|
958
|
+
NgxMatTuiCalendarComponent.prototype.preprocessIOptions = function (ioptions) {
|
959
|
+
var defs = this.getDefaultIOptions();
|
960
|
+
if (ioptions == null) {
|
961
|
+
ioptions = defs;
|
950
962
|
}
|
951
963
|
else {
|
952
|
-
|
964
|
+
ioptions = Object.assign(Object.assign({}, defs), ioptions);
|
965
|
+
}
|
966
|
+
ioptions.useCreationPopup = false;
|
967
|
+
ioptions.useDetailPopup = false;
|
968
|
+
if (!ioptions.theme) {
|
969
|
+
ioptions.theme = this.getDefaultTheme();
|
953
970
|
}
|
954
|
-
|
955
|
-
options.useDetailPopup = false;
|
956
|
-
return options;
|
971
|
+
return ioptions;
|
957
972
|
};
|
958
973
|
NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
|
974
|
+
return {
|
975
|
+
darkMode: false,
|
976
|
+
themeClass: null,
|
977
|
+
ioptions: this.getDefaultIOptions(),
|
978
|
+
};
|
979
|
+
};
|
980
|
+
NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
|
959
981
|
return {
|
960
982
|
defaultView: 'month',
|
961
983
|
taskView: true,
|
@@ -983,7 +1005,7 @@
|
|
983
1005
|
var el = document.getElementById("theme-" + name);
|
984
1006
|
if (el) {
|
985
1007
|
var style = window.getComputedStyle(el, null);
|
986
|
-
console.warn("color:", style.color);
|
1008
|
+
console.warn("theme-" + name + " color:", style.color);
|
987
1009
|
return style.color;
|
988
1010
|
}
|
989
1011
|
return '';
|
@@ -1114,7 +1136,7 @@
|
|
1114
1136
|
return NgxMatTuiCalendarComponent;
|
1115
1137
|
}());
|
1116
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 });
|
1117
|
-
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: "<
|
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.308);\"> <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"] }] });
|
1118
1140
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, decorators: [{
|
1119
1141
|
type: i0.Component,
|
1120
1142
|
args: [{
|