ngx-mat-tui-calendar 12.0.10 → 12.1.1
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/bundles/ngx-mat-tui-calendar.umd.js +57 -37
- package/bundles/ngx-mat-tui-calendar.umd.js.map +1 -1
- package/esm2015/lib/calendar-options.js +1 -1
- package/esm2015/lib/local-date.js +3 -2
- package/esm2015/lib/ngx-mat-tui-calendar.component.js +57 -37
- package/fesm2015/ngx-mat-tui-calendar.js +57 -37
- package/fesm2015/ngx-mat-tui-calendar.js.map +1 -1
- package/lib/calendar-options.d.ts +10 -0
- package/lib/ngx-mat-tui-calendar.component.d.ts +4 -4
- package/package.json +2 -4
@@ -405,8 +405,9 @@
|
|
405
405
|
LocalDate.convertNumbersToDate = function (_a) {
|
406
406
|
var year = _a.year, month = _a.month, day = _a.day, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, milliseconds = _a.milliseconds;
|
407
407
|
// month = 1 to 12
|
408
|
-
// start with today's *local* date. this
|
408
|
+
// start with today's *local* date. this is really important
|
409
409
|
var date = new Date();
|
410
|
+
date.setDate(1); // very important
|
410
411
|
date.setFullYear(year);
|
411
412
|
date.setMonth((month == null) ? 0 : month - 1);
|
412
413
|
date.setDate((day == null) ? 1 : day);
|
@@ -636,23 +637,22 @@
|
|
636
637
|
// we slice off the first color since it is gray
|
637
638
|
this.colors = distinctColors__default["default"]({ lightMin: 70, count: 15 }).slice(1);
|
638
639
|
this.colorIndex = 0;
|
639
|
-
this.
|
640
|
-
this.appliedOptions = this.getDefaultOptions();
|
640
|
+
this.calendarIdDefault = "main";
|
641
641
|
}
|
642
642
|
NgxMatTuiCalendarComponent.prototype.ngOnInit = function () {
|
643
643
|
// console.warn(`calendar.component.ts: ngOnit`)
|
644
|
-
this.
|
644
|
+
this.setOptions(this.options);
|
645
|
+
this.createTUICalendar(this.appliedOptions.ioptions);
|
645
646
|
this.bindCallbacks();
|
647
|
+
this.calendar.toggleScheduleView(true);
|
648
|
+
this.calendar.render(true);
|
649
|
+
this.calendar.toggleScheduleView(true);
|
646
650
|
};
|
647
651
|
NgxMatTuiCalendarComponent.prototype.ngOnChanges = function (changes) {
|
648
|
-
// console.warn(changes);
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
var options = changes.options.currentValue;
|
653
|
-
this.setOptions(options);
|
654
|
-
}
|
655
|
-
}
|
652
|
+
// console.warn(`ngOnChanges: `, changes);
|
653
|
+
// console.warn(`change.option:`, changes.options);
|
654
|
+
var options = changes.options.currentValue;
|
655
|
+
this.setOptions(options);
|
656
656
|
};
|
657
657
|
NgxMatTuiCalendarComponent.prototype.ngOnDestroy = function () {
|
658
658
|
this.calendar.destroy();
|
@@ -715,14 +715,16 @@
|
|
715
715
|
};
|
716
716
|
NgxMatTuiCalendarComponent.prototype.onMonthView = function () {
|
717
717
|
this.calendar.changeView('month');
|
718
|
+
this.calendar.render(true); // <-- so that selection is cleared
|
718
719
|
};
|
719
720
|
NgxMatTuiCalendarComponent.prototype.onWeekView = function () {
|
720
|
-
console.log(
|
721
|
+
// console.log(`onWeekView`)
|
721
722
|
this.calendar.changeView('week');
|
722
723
|
this.calendar.render(true); // <-- so that selection is cleared
|
723
724
|
};
|
724
725
|
NgxMatTuiCalendarComponent.prototype.onDayView = function () {
|
725
726
|
this.calendar.changeView('day');
|
727
|
+
this.calendar.render(true); // <-- so that selection is cleared
|
726
728
|
};
|
727
729
|
NgxMatTuiCalendarComponent.prototype.getDate = function () {
|
728
730
|
var date = this.calendar.getDate();
|
@@ -732,11 +734,12 @@
|
|
732
734
|
});
|
733
735
|
return str;
|
734
736
|
};
|
735
|
-
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function () {
|
736
|
-
var ioptions = this.preprocessIOptions(
|
737
|
+
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function (iopts) {
|
738
|
+
var ioptions = this.preprocessIOptions(iopts);
|
737
739
|
// console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
|
738
740
|
this.calendar = new Calendar__default["default"]('#calendar', ioptions);
|
739
741
|
// console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
|
742
|
+
this.calendar.toggleScheduleView(true);
|
740
743
|
};
|
741
744
|
NgxMatTuiCalendarComponent.prototype.bindCallbacks = function () {
|
742
745
|
this.bindAfterRenderSchedule();
|
@@ -857,7 +860,7 @@
|
|
857
860
|
var end = LocalDate.convertToJsDate(args.end);
|
858
861
|
var schedule = {
|
859
862
|
id: id,
|
860
|
-
calendarId: (args.calendarId == null) ? this.
|
863
|
+
calendarId: (args.calendarId == null) ? this.calendarIdDefault : args.calendarId,
|
861
864
|
title: args.title,
|
862
865
|
start: start,
|
863
866
|
end: end,
|
@@ -877,23 +880,23 @@
|
|
877
880
|
};
|
878
881
|
NgxMatTuiCalendarComponent.prototype.updateSchedule = function (schedule) {
|
879
882
|
// console.log(`event-calendar.component.ts: updateSchedule:`, schedule);
|
880
|
-
var calendarId = (schedule.calendarId == null) ? this.
|
883
|
+
var calendarId = (schedule.calendarId == null) ? this.calendarIdDefault : schedule.calendarId;
|
881
884
|
this.calendar.updateSchedule(schedule.id, calendarId, schedule, false);
|
882
885
|
return this.calendar.getSchedule(schedule.id, calendarId);
|
883
886
|
};
|
884
887
|
NgxMatTuiCalendarComponent.prototype.getSchedule = function (args) {
|
885
888
|
// console.log(`event-calendar.component.ts: getSchedule:`, schedule);
|
886
|
-
var calendarId = (args.calendarId == null) ? this.
|
889
|
+
var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
|
887
890
|
return this.calendar.getSchedule(args.id, calendarId);
|
888
891
|
};
|
889
892
|
NgxMatTuiCalendarComponent.prototype.deleteScheduleAndNotifyParent = function (args) {
|
890
893
|
this.deleteSchedule(args);
|
891
|
-
var calendarId = (args.calendarId == null) ? this.
|
894
|
+
var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
|
892
895
|
this.userDeletedSchedule.emit({ id: args.id, calendarId: calendarId });
|
893
896
|
};
|
894
897
|
NgxMatTuiCalendarComponent.prototype.deleteSchedule = function (args) {
|
895
898
|
// console.log(`event-calendar.component.ts: deleteSchedule:`, schedule);
|
896
|
-
var calendarId = (args.calendarId == null) ? this.
|
899
|
+
var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
|
897
900
|
this.calendar.deleteSchedule(args.id, calendarId, false);
|
898
901
|
};
|
899
902
|
NgxMatTuiCalendarComponent.prototype.deleteAllSchedules = function () {
|
@@ -934,18 +937,42 @@
|
|
934
937
|
}
|
935
938
|
});
|
936
939
|
};
|
937
|
-
NgxMatTuiCalendarComponent.prototype.
|
938
|
-
|
939
|
-
|
940
|
-
|
941
|
-
|
942
|
-
|
940
|
+
NgxMatTuiCalendarComponent.prototype.setDefaultOptions = function () {
|
941
|
+
this.setOptions();
|
942
|
+
};
|
943
|
+
NgxMatTuiCalendarComponent.prototype.setOptions = function (o) {
|
944
|
+
var get = function (object, path, defaultValue) {
|
945
|
+
var value = path
|
946
|
+
.split('.')
|
947
|
+
.reduce(function (o, p) { return o === undefined ? undefined : o[p]; }, object);
|
948
|
+
return (value !== undefined) ? value : defaultValue;
|
949
|
+
};
|
950
|
+
var options = {
|
951
|
+
darkMode: get(o, "darkMode", false),
|
952
|
+
themeClass: get(o, "themeClass", null),
|
953
|
+
ioptions: (o && o.ioptions) ? this.setIOptions(o.ioptions) : this.getDefaultIOptions(),
|
954
|
+
buttons: {
|
955
|
+
previous: get(o, "buttons.previous", true),
|
956
|
+
next: get(o, "buttons.next", true),
|
957
|
+
today: get(o, "buttons.today", true),
|
958
|
+
longPrevious: get(o, "buttons.longPrevious", true),
|
959
|
+
longNext: get(o, "buttons.longNext", true),
|
960
|
+
month: get(o, "buttons.month", true),
|
961
|
+
week: get(o, "buttons.week", true),
|
962
|
+
day: get(o, "buttons.day", true),
|
963
|
+
}
|
964
|
+
};
|
965
|
+
this.appliedOptions = options;
|
966
|
+
// console.warn(`setOptions: `, this.appliedOptions);
|
943
967
|
};
|
944
968
|
NgxMatTuiCalendarComponent.prototype.setIOptions = function (ioptionsIn) {
|
945
969
|
var ioptions = this.preprocessIOptions(ioptionsIn);
|
946
|
-
this.calendar
|
947
|
-
|
948
|
-
|
970
|
+
if (this.calendar) {
|
971
|
+
this.calendar.setOptions(ioptions);
|
972
|
+
this.calendar.setTheme(ioptions.theme);
|
973
|
+
this.calendar.render(true);
|
974
|
+
this.calendar.toggleScheduleView(true);
|
975
|
+
}
|
949
976
|
return ioptions;
|
950
977
|
};
|
951
978
|
NgxMatTuiCalendarComponent.prototype.preprocessIOptions = function (ioptions) {
|
@@ -963,13 +990,6 @@
|
|
963
990
|
}
|
964
991
|
return ioptions;
|
965
992
|
};
|
966
|
-
NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
|
967
|
-
return {
|
968
|
-
darkMode: false,
|
969
|
-
themeClass: null,
|
970
|
-
ioptions: this.getDefaultIOptions(),
|
971
|
-
};
|
972
|
-
};
|
973
993
|
NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
|
974
994
|
return {
|
975
995
|
defaultView: 'month',
|
@@ -1129,7 +1149,7 @@
|
|
1129
1149
|
return NgxMatTuiCalendarComponent;
|
1130
1150
|
}());
|
1131
1151
|
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 });
|
1132
|
-
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
|
1152
|
+
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 *ngIf=\"appliedOptions.buttons.longPrevious\"\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 *ngIf=\"appliedOptions.buttons.previous\"\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 *ngIf=\"appliedOptions.buttons.today\"\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 *ngIf=\"appliedOptions.buttons.next\"\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 *ngIf=\"appliedOptions.buttons.longNext\"\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 [hidden]=\"!appliedOptions.buttons.month && !appliedOptions.buttons.week && !appliedOptions.buttons.day\"\r\n class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n layout_height=\"wrap_content\">\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.month\" 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 *ngIf=\"appliedOptions.buttons.week\" 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 *ngIf=\"appliedOptions.buttons.day\" 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: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
|
1133
1153
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, decorators: [{
|
1134
1154
|
type: i0.Component,
|
1135
1155
|
args: [{
|