ngx-mat-tui-calendar 12.0.2 → 12.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 +28 -8
- package/bundles/ngx-mat-tui-calendar.umd.js +3 -1
- package/bundles/ngx-mat-tui-calendar.umd.js.map +1 -1
- package/esm2015/lib/ngx-mat-tui-calendar.component.js +2 -2
- package/esm2015/lib/ngx-mat-tui-calendar.module.js +3 -1
- package/fesm2015/ngx-mat-tui-calendar.js +3 -1
- package/fesm2015/ngx-mat-tui-calendar.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -21,7 +21,7 @@ This project is an [Angular](https://angular.io/), [Material Design](https://mat
|
|
|
21
21
|
* Dark mode in progress...
|
|
22
22
|
|
|
23
23
|
This repo contains two projects:
|
|
24
|
-
1. the npm library
|
|
24
|
+
1. the source code for the npm library [`ngx-mat-tui-calendar`](https://www.npmjs.com/package/ngx-mat-tui-calendar), located in `projects/ngx-mat-tui-calendar`
|
|
25
25
|
2. the demo app, located in `src`
|
|
26
26
|
|
|
27
27
|
The top-level `angular.json` and `package.json` files are used for building both projects.
|
|
@@ -50,25 +50,33 @@ 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
58
|
```
|
|
57
59
|
Then add `NgxMatTuiCalendarModule` to your list of NgModule imports, in ```app.module.ts```
|
|
58
60
|
|
|
59
|
-
Insert the following HTML into
|
|
61
|
+
Insert the following HTML into your app's template file
|
|
60
62
|
```angular2html
|
|
61
63
|
<mat-tui-calendar></mat-tui-calendar>
|
|
62
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
|
+
```
|
|
63
69
|
|
|
64
|
-
|
|
65
|
-
*TODO*
|
|
70
|
+
### Quickstart Repo
|
|
66
71
|
|
|
67
|
-
|
|
68
|
-
|
|
72
|
+
A demonstration of the simple usage described above can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-quickstart
|
|
73
|
+
|
|
74
|
+
## Demo Repo
|
|
75
|
+
|
|
76
|
+
A more extensive demonstration of usage can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-demo
|
|
69
77
|
|
|
70
78
|
### Stackblitz
|
|
71
|
-
*
|
|
79
|
+
*Coming soon*
|
|
72
80
|
|
|
73
81
|
# Documentation
|
|
74
82
|
|
|
@@ -102,6 +110,18 @@ Selector: `ngx-mat-tui-calendar`
|
|
|
102
110
|
|
|
103
111
|
# Development
|
|
104
112
|
|
|
113
|
+
## Getting started
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
git clone https://github.com/ron2015schmitt/ngx-mat-tui-calendar
|
|
117
|
+
cd ngx-mat-tui-calendar
|
|
118
|
+
npm install
|
|
119
|
+
ng build
|
|
120
|
+
ng serve
|
|
121
|
+
```
|
|
122
|
+
Point your browser to http://localhost:4200/
|
|
123
|
+
|
|
124
|
+
|
|
105
125
|
## library package for ngx-mat-tui-calendar
|
|
106
126
|
|
|
107
127
|
The code that makes up the npm package is located in folder ```projects/ngx-mat-tui-calendar```.
|
|
@@ -116,7 +136,7 @@ The API is defined in ```projects/ngx-mat-tui-calendar/src/public-api.ts```.
|
|
|
116
136
|
|
|
117
137
|
### Build
|
|
118
138
|
|
|
119
|
-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/ngx-mat-tui-calendar` directory.
|
|
139
|
+
Run `ng build` to build the library project. The build artifacts will be stored in the `dist/ngx-mat-tui-calendar` directory.
|
|
120
140
|
|
|
121
141
|
### README
|
|
122
142
|
|
|
@@ -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: [{
|
|
@@ -1254,6 +1254,8 @@
|
|
|
1254
1254
|
],
|
|
1255
1255
|
entryComponents: [
|
|
1256
1256
|
NgxMatTuiCalendarComponent,
|
|
1257
|
+
NgxMatTuiCalendarWrapperComponent,
|
|
1258
|
+
NgxMatTuiCalendarEditorDialogComponent,
|
|
1257
1259
|
],
|
|
1258
1260
|
}]
|
|
1259
1261
|
}] });
|