@zeedhi/zd-calendar-vue 1.6.0 → 1.7.0
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 +1 -1
- package/dist/calendar-vue.esm.js +220 -89
- package/dist/calendar-vue.umd.js +220 -89
- package/package.json +2 -2
- package/types/Calendar.d.ts +10 -2
package/README.md
CHANGED
package/dist/calendar-vue.esm.js
CHANGED
|
@@ -35,7 +35,7 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
35
35
|
this.instanceType = Calendar;
|
|
36
36
|
this.selectedOpen = false;
|
|
37
37
|
this.selectedElement = null;
|
|
38
|
-
this.selectedEvent =
|
|
38
|
+
this.selectedEvent = null;
|
|
39
39
|
this.showDatePicker = false;
|
|
40
40
|
}
|
|
41
41
|
onChangePicker() {
|
|
@@ -83,6 +83,9 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
83
83
|
this.instance.value = date;
|
|
84
84
|
this.instance.type = 'day';
|
|
85
85
|
}
|
|
86
|
+
callDayStyle(date) {
|
|
87
|
+
return (this.instance.dayStyle && typeof this.instance.dayStyle === 'function') ? this.instance.dayStyle(date) : '';
|
|
88
|
+
}
|
|
86
89
|
showEvent({ nativeEvent, event }) {
|
|
87
90
|
const open = () => {
|
|
88
91
|
this.selectedEvent = event;
|
|
@@ -91,6 +94,7 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
91
94
|
};
|
|
92
95
|
if (this.selectedOpen) {
|
|
93
96
|
this.selectedOpen = false;
|
|
97
|
+
this.selectedEvent = null;
|
|
94
98
|
requestAnimationFrame(() => requestAnimationFrame(() => open()));
|
|
95
99
|
}
|
|
96
100
|
else {
|
|
@@ -111,9 +115,15 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
111
115
|
}
|
|
112
116
|
}
|
|
113
117
|
clickEvent({ nativeEvent, event }) {
|
|
114
|
-
this.instance.clickEvent(this.$el, nativeEvent);
|
|
118
|
+
this.instance.clickEvent(event, this.$el, nativeEvent);
|
|
115
119
|
this.showEvent({ nativeEvent, event });
|
|
116
120
|
}
|
|
121
|
+
clickEditEvent(selectedEvent, nativeEvent) {
|
|
122
|
+
this.instance.clickEditEvent(selectedEvent, this.$el, nativeEvent);
|
|
123
|
+
}
|
|
124
|
+
clickDeleteEvent(selectedEvent, nativeEvent) {
|
|
125
|
+
this.instance.clickDeleteEvent(selectedEvent, this.$el, nativeEvent);
|
|
126
|
+
}
|
|
117
127
|
clickDay(event) {
|
|
118
128
|
this.instance.clickDay(this.$el, event);
|
|
119
129
|
}
|
|
@@ -132,6 +142,16 @@ let ZdCalendar = class ZdCalendar extends ZdComponentRender {
|
|
|
132
142
|
moved(event) {
|
|
133
143
|
this.instance.moved(this.$el, event);
|
|
134
144
|
}
|
|
145
|
+
callCanEditEvent(event) {
|
|
146
|
+
return typeof this.instance.canEditEvent === 'function' && event
|
|
147
|
+
? this.instance.canEditEvent(event)
|
|
148
|
+
: this.instance.canEditEvent;
|
|
149
|
+
}
|
|
150
|
+
callCanDeleteEvent(event) {
|
|
151
|
+
return typeof this.instance.canDeleteEvent === 'function' && event
|
|
152
|
+
? this.instance.canDeleteEvent(event)
|
|
153
|
+
: this.instance.canDeleteEvent;
|
|
154
|
+
}
|
|
135
155
|
};
|
|
136
156
|
__decorate([
|
|
137
157
|
Prop({ type: [String, Array], default: undefined }),
|
|
@@ -277,6 +297,18 @@ __decorate([
|
|
|
277
297
|
Prop({ type: Function, default: null }),
|
|
278
298
|
__metadata("design:type", Object)
|
|
279
299
|
], ZdCalendar.prototype, "intervalStyle", void 0);
|
|
300
|
+
__decorate([
|
|
301
|
+
Prop({ type: [Function, String], default: null }),
|
|
302
|
+
__metadata("design:type", Object)
|
|
303
|
+
], ZdCalendar.prototype, "dayStyle", void 0);
|
|
304
|
+
__decorate([
|
|
305
|
+
PropWatch({ type: [Function, Boolean, String], default: true }),
|
|
306
|
+
__metadata("design:type", Object)
|
|
307
|
+
], ZdCalendar.prototype, "canDeleteEvent", void 0);
|
|
308
|
+
__decorate([
|
|
309
|
+
PropWatch({ type: [Function, Boolean, String], default: true }),
|
|
310
|
+
__metadata("design:type", Object)
|
|
311
|
+
], ZdCalendar.prototype, "canEditEvent", void 0);
|
|
280
312
|
__decorate([
|
|
281
313
|
PropWatch({ type: [String, Number], default: 60 }),
|
|
282
314
|
__metadata("design:type", Object)
|
|
@@ -512,12 +544,7 @@ var __vue_render__ = function () {
|
|
|
512
544
|
expression: "instance.showHeader",
|
|
513
545
|
},
|
|
514
546
|
],
|
|
515
|
-
class: [
|
|
516
|
-
"zd-toolbar-calendar",
|
|
517
|
-
"row",
|
|
518
|
-
{ "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
|
|
519
|
-
{ "theme--light": _vm.instance.light || !_vm.$vuetify.theme.dark },
|
|
520
|
-
],
|
|
547
|
+
class: ["zd-toolbar-calendar", "row", _vm.theme],
|
|
521
548
|
attrs: {
|
|
522
549
|
name: "toolbar_" + _vm.instance.name,
|
|
523
550
|
height: "64",
|
|
@@ -764,7 +791,7 @@ var __vue_render__ = function () {
|
|
|
764
791
|
"interval-width": _vm.instance.intervalWidth,
|
|
765
792
|
events: _vm.instance.calendarEvents,
|
|
766
793
|
"first-interval": _vm.instance.firstInterval,
|
|
767
|
-
"
|
|
794
|
+
"interval-style": _vm.instance.intervalStyle,
|
|
768
795
|
"first-time": _vm.instance.firstTime,
|
|
769
796
|
light: _vm.instance.light,
|
|
770
797
|
id: _vm.instance.name,
|
|
@@ -805,6 +832,31 @@ var __vue_render__ = function () {
|
|
|
805
832
|
"click:time-category": _vm.clickTimeCategory,
|
|
806
833
|
moved: _vm.moved,
|
|
807
834
|
},
|
|
835
|
+
scopedSlots: _vm._u([
|
|
836
|
+
{
|
|
837
|
+
key: "day",
|
|
838
|
+
fn: function (ref) {
|
|
839
|
+
var date = ref.date;
|
|
840
|
+
return [
|
|
841
|
+
_c(
|
|
842
|
+
"div",
|
|
843
|
+
{
|
|
844
|
+
staticStyle: {
|
|
845
|
+
position: "absolute",
|
|
846
|
+
top: "0",
|
|
847
|
+
left: "0",
|
|
848
|
+
right: "0",
|
|
849
|
+
bottom: "0",
|
|
850
|
+
opacity: "0.5",
|
|
851
|
+
},
|
|
852
|
+
style: _vm.callDayStyle(date),
|
|
853
|
+
},
|
|
854
|
+
[_vm._v("\n \n ")]
|
|
855
|
+
),
|
|
856
|
+
]
|
|
857
|
+
},
|
|
858
|
+
},
|
|
859
|
+
]),
|
|
808
860
|
model: {
|
|
809
861
|
value: _vm.instance.value,
|
|
810
862
|
callback: function ($$v) {
|
|
@@ -814,108 +866,187 @@ var __vue_render__ = function () {
|
|
|
814
866
|
},
|
|
815
867
|
}),
|
|
816
868
|
_vm._v(" "),
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
attrs: {
|
|
821
|
-
"close-on-content-click": false,
|
|
822
|
-
activator: _vm.selectedElement,
|
|
823
|
-
"offset-x": "",
|
|
824
|
-
},
|
|
825
|
-
model: {
|
|
826
|
-
value: _vm.selectedOpen,
|
|
827
|
-
callback: function ($$v) {
|
|
828
|
-
_vm.selectedOpen = $$v;
|
|
829
|
-
},
|
|
830
|
-
expression: "selectedOpen",
|
|
831
|
-
},
|
|
832
|
-
},
|
|
833
|
-
[
|
|
834
|
-
_c(
|
|
835
|
-
"zd-card",
|
|
869
|
+
_vm.selectedOpen
|
|
870
|
+
? _c(
|
|
871
|
+
"v-menu",
|
|
836
872
|
{
|
|
837
873
|
attrs: {
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
874
|
+
"close-on-content-click": false,
|
|
875
|
+
activator: _vm.selectedElement,
|
|
876
|
+
"offset-x": "",
|
|
877
|
+
},
|
|
878
|
+
model: {
|
|
879
|
+
value: _vm.selectedOpen,
|
|
880
|
+
callback: function ($$v) {
|
|
881
|
+
_vm.selectedOpen = $$v;
|
|
882
|
+
},
|
|
883
|
+
expression: "selectedOpen",
|
|
842
884
|
},
|
|
843
885
|
},
|
|
844
886
|
[
|
|
845
887
|
_c(
|
|
846
|
-
"
|
|
888
|
+
"zd-card",
|
|
847
889
|
{
|
|
848
890
|
attrs: {
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
dark:
|
|
891
|
+
name: "card_" + _vm.instance.name,
|
|
892
|
+
cssClass: "zd-pa-0",
|
|
893
|
+
dark: _vm.instance.dark,
|
|
894
|
+
light: _vm.instance.light,
|
|
852
895
|
},
|
|
853
896
|
},
|
|
854
897
|
[
|
|
855
898
|
_c(
|
|
856
|
-
"
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
tag: "h5",
|
|
899
|
+
"v-toolbar",
|
|
900
|
+
{
|
|
901
|
+
attrs: {
|
|
902
|
+
color: _vm.selectedEvent.color,
|
|
903
|
+
elevation: "0",
|
|
904
|
+
dark: "",
|
|
863
905
|
},
|
|
864
|
-
|
|
865
|
-
|
|
906
|
+
},
|
|
907
|
+
[
|
|
908
|
+
_c(
|
|
909
|
+
"zd-text",
|
|
910
|
+
_vm._b(
|
|
911
|
+
{
|
|
912
|
+
staticClass: "mx-2",
|
|
913
|
+
attrs: {
|
|
914
|
+
name: "title_" + _vm.instance.name,
|
|
915
|
+
},
|
|
916
|
+
},
|
|
917
|
+
"zd-text",
|
|
918
|
+
{
|
|
919
|
+
text: _vm.selectedEvent.name,
|
|
920
|
+
tag: "h5",
|
|
921
|
+
},
|
|
922
|
+
false
|
|
923
|
+
)
|
|
924
|
+
),
|
|
925
|
+
_vm._v(" "),
|
|
926
|
+
_c("v-spacer"),
|
|
927
|
+
_vm._v(" "),
|
|
928
|
+
_c(
|
|
929
|
+
"span",
|
|
930
|
+
[
|
|
931
|
+
_vm.callCanEditEvent(_vm.selectedEvent)
|
|
932
|
+
? _c(
|
|
933
|
+
"v-btn",
|
|
934
|
+
{
|
|
935
|
+
attrs: { icon: "" },
|
|
936
|
+
on: {
|
|
937
|
+
click: function ($event) {
|
|
938
|
+
return _vm.clickEditEvent(
|
|
939
|
+
_vm.selectedEvent,
|
|
940
|
+
$event
|
|
941
|
+
)
|
|
942
|
+
},
|
|
943
|
+
},
|
|
944
|
+
},
|
|
945
|
+
[
|
|
946
|
+
_c(
|
|
947
|
+
"v-icon",
|
|
948
|
+
{
|
|
949
|
+
on: {
|
|
950
|
+
click: function ($event) {},
|
|
951
|
+
},
|
|
952
|
+
},
|
|
953
|
+
[
|
|
954
|
+
_vm._v(
|
|
955
|
+
"\n " +
|
|
956
|
+
_vm._s(
|
|
957
|
+
_vm.$getIcon("pencil")
|
|
958
|
+
) +
|
|
959
|
+
"\n "
|
|
960
|
+
),
|
|
961
|
+
]
|
|
962
|
+
),
|
|
963
|
+
],
|
|
964
|
+
1
|
|
965
|
+
)
|
|
966
|
+
: _vm._e(),
|
|
967
|
+
_vm._v(" "),
|
|
968
|
+
_vm.callCanDeleteEvent(_vm.selectedEvent)
|
|
969
|
+
? _c(
|
|
970
|
+
"v-btn",
|
|
971
|
+
{
|
|
972
|
+
attrs: { icon: "" },
|
|
973
|
+
on: {
|
|
974
|
+
click: function ($event) {
|
|
975
|
+
return _vm.clickDeleteEvent(
|
|
976
|
+
_vm.selectedEvent,
|
|
977
|
+
$event
|
|
978
|
+
)
|
|
979
|
+
},
|
|
980
|
+
},
|
|
981
|
+
},
|
|
982
|
+
[
|
|
983
|
+
_c("v-icon", [
|
|
984
|
+
_vm._v(
|
|
985
|
+
"\n " +
|
|
986
|
+
_vm._s(_vm.$getIcon("trash")) +
|
|
987
|
+
"\n "
|
|
988
|
+
),
|
|
989
|
+
]),
|
|
990
|
+
],
|
|
991
|
+
1
|
|
992
|
+
)
|
|
993
|
+
: _vm._e(),
|
|
994
|
+
],
|
|
995
|
+
1
|
|
996
|
+
),
|
|
997
|
+
],
|
|
998
|
+
1
|
|
866
999
|
),
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
1000
|
+
_vm._v(" "),
|
|
1001
|
+
_c(
|
|
1002
|
+
"v-card-text",
|
|
1003
|
+
[
|
|
1004
|
+
_c(
|
|
1005
|
+
"zd-text",
|
|
1006
|
+
_vm._b(
|
|
1007
|
+
{
|
|
1008
|
+
attrs: {
|
|
1009
|
+
name: "description_" + _vm.instance.name,
|
|
1010
|
+
},
|
|
1011
|
+
},
|
|
1012
|
+
"zd-text",
|
|
1013
|
+
{
|
|
1014
|
+
text: _vm.selectedEvent.description,
|
|
1015
|
+
tag: "p",
|
|
1016
|
+
},
|
|
1017
|
+
false
|
|
1018
|
+
)
|
|
1019
|
+
),
|
|
1020
|
+
],
|
|
1021
|
+
1
|
|
1022
|
+
),
|
|
1023
|
+
_vm._v(" "),
|
|
874
1024
|
_c(
|
|
875
|
-
"
|
|
876
|
-
|
|
877
|
-
{
|
|
1025
|
+
"v-card-actions",
|
|
1026
|
+
[
|
|
1027
|
+
_c("zd-button", {
|
|
878
1028
|
attrs: {
|
|
879
|
-
name: "
|
|
1029
|
+
name: "buttonClose_" + _vm.instance.name,
|
|
1030
|
+
flat: "",
|
|
1031
|
+
color: "secondary",
|
|
1032
|
+
label: "$t(CALENDAR_CLOSE)",
|
|
880
1033
|
},
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
},
|
|
887
|
-
|
|
888
|
-
|
|
1034
|
+
on: {
|
|
1035
|
+
click: function ($event) {
|
|
1036
|
+
_vm.selectedOpen = !_vm.selectedOpen;
|
|
1037
|
+
},
|
|
1038
|
+
},
|
|
1039
|
+
}),
|
|
1040
|
+
],
|
|
1041
|
+
1
|
|
889
1042
|
),
|
|
890
1043
|
],
|
|
891
1044
|
1
|
|
892
1045
|
),
|
|
893
|
-
_vm._v(" "),
|
|
894
|
-
_c(
|
|
895
|
-
"v-card-actions",
|
|
896
|
-
[
|
|
897
|
-
_c("zd-button", {
|
|
898
|
-
attrs: {
|
|
899
|
-
name: "buttonClose_" + _vm.instance.name,
|
|
900
|
-
flat: "",
|
|
901
|
-
color: "secondary",
|
|
902
|
-
label: "$t(CALENDAR_CLOSE)",
|
|
903
|
-
},
|
|
904
|
-
on: {
|
|
905
|
-
click: function ($event) {
|
|
906
|
-
_vm.selectedOpen = !_vm.selectedOpen;
|
|
907
|
-
},
|
|
908
|
-
},
|
|
909
|
-
}),
|
|
910
|
-
],
|
|
911
|
-
1
|
|
912
|
-
),
|
|
913
1046
|
],
|
|
914
1047
|
1
|
|
915
|
-
)
|
|
916
|
-
|
|
917
|
-
1
|
|
918
|
-
),
|
|
1048
|
+
)
|
|
1049
|
+
: _vm._e(),
|
|
919
1050
|
],
|
|
920
1051
|
1
|
|
921
1052
|
),
|
|
@@ -931,7 +1062,7 @@ __vue_render__._withStripped = true;
|
|
|
931
1062
|
/* style */
|
|
932
1063
|
const __vue_inject_styles__ = function (inject) {
|
|
933
1064
|
if (!inject) return
|
|
934
|
-
inject("data-v-
|
|
1065
|
+
inject("data-v-25f678fe_0", { source: ".zd-calendar {\n display: flex;\n flex-direction: column;\n}\n.zd-calendar .v-btn--fab {\n z-index: 2;\n}\n.zd-calendar-content {\n display: flex;\n overflow: auto;\n height: 100%;\n}\n.zd-calendar .zd-toolbar-calendar {\n display: flex;\n flex: 0 1 auto;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n margin: 0;\n}\n.zd-calendar .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n@media screen and (max-width: 376px) {\n.zd-calendar .zd-toolbar-calendar {\n flex-direction: column;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-nav-title,\n .zd-calendar .zd-toolbar-calendar .zd-calendar-button-today {\n max-width: 100%;\n flex: 1;\n align-items: center;\n justify-content: space-between !important;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-button-today button {\n width: 100%;\n margin-right: 0px !important;\n}\n}\n.zd-calendar .zd-calendar-content-title .zd-calendar-title {\n display: flex;\n flex-direction: column;\n width: 154px;\n}", map: undefined, media: undefined });
|
|
935
1066
|
|
|
936
1067
|
};
|
|
937
1068
|
/* scoped */
|
package/dist/calendar-vue.umd.js
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
this.instanceType = zdCalendarCommon.Calendar;
|
|
37
37
|
this.selectedOpen = false;
|
|
38
38
|
this.selectedElement = null;
|
|
39
|
-
this.selectedEvent =
|
|
39
|
+
this.selectedEvent = null;
|
|
40
40
|
this.showDatePicker = false;
|
|
41
41
|
}
|
|
42
42
|
onChangePicker() {
|
|
@@ -84,6 +84,9 @@
|
|
|
84
84
|
this.instance.value = date;
|
|
85
85
|
this.instance.type = 'day';
|
|
86
86
|
}
|
|
87
|
+
callDayStyle(date) {
|
|
88
|
+
return (this.instance.dayStyle && typeof this.instance.dayStyle === 'function') ? this.instance.dayStyle(date) : '';
|
|
89
|
+
}
|
|
87
90
|
showEvent({ nativeEvent, event }) {
|
|
88
91
|
const open = () => {
|
|
89
92
|
this.selectedEvent = event;
|
|
@@ -92,6 +95,7 @@
|
|
|
92
95
|
};
|
|
93
96
|
if (this.selectedOpen) {
|
|
94
97
|
this.selectedOpen = false;
|
|
98
|
+
this.selectedEvent = null;
|
|
95
99
|
requestAnimationFrame(() => requestAnimationFrame(() => open()));
|
|
96
100
|
}
|
|
97
101
|
else {
|
|
@@ -112,9 +116,15 @@
|
|
|
112
116
|
}
|
|
113
117
|
}
|
|
114
118
|
clickEvent({ nativeEvent, event }) {
|
|
115
|
-
this.instance.clickEvent(this.$el, nativeEvent);
|
|
119
|
+
this.instance.clickEvent(event, this.$el, nativeEvent);
|
|
116
120
|
this.showEvent({ nativeEvent, event });
|
|
117
121
|
}
|
|
122
|
+
clickEditEvent(selectedEvent, nativeEvent) {
|
|
123
|
+
this.instance.clickEditEvent(selectedEvent, this.$el, nativeEvent);
|
|
124
|
+
}
|
|
125
|
+
clickDeleteEvent(selectedEvent, nativeEvent) {
|
|
126
|
+
this.instance.clickDeleteEvent(selectedEvent, this.$el, nativeEvent);
|
|
127
|
+
}
|
|
118
128
|
clickDay(event) {
|
|
119
129
|
this.instance.clickDay(this.$el, event);
|
|
120
130
|
}
|
|
@@ -133,6 +143,16 @@
|
|
|
133
143
|
moved(event) {
|
|
134
144
|
this.instance.moved(this.$el, event);
|
|
135
145
|
}
|
|
146
|
+
callCanEditEvent(event) {
|
|
147
|
+
return typeof this.instance.canEditEvent === 'function' && event
|
|
148
|
+
? this.instance.canEditEvent(event)
|
|
149
|
+
: this.instance.canEditEvent;
|
|
150
|
+
}
|
|
151
|
+
callCanDeleteEvent(event) {
|
|
152
|
+
return typeof this.instance.canDeleteEvent === 'function' && event
|
|
153
|
+
? this.instance.canDeleteEvent(event)
|
|
154
|
+
: this.instance.canDeleteEvent;
|
|
155
|
+
}
|
|
136
156
|
};
|
|
137
157
|
__decorate([
|
|
138
158
|
vuePropertyDecorator.Prop({ type: [String, Array], default: undefined }),
|
|
@@ -278,6 +298,18 @@
|
|
|
278
298
|
vuePropertyDecorator.Prop({ type: Function, default: null }),
|
|
279
299
|
__metadata("design:type", Object)
|
|
280
300
|
], ZdCalendar.prototype, "intervalStyle", void 0);
|
|
301
|
+
__decorate([
|
|
302
|
+
vuePropertyDecorator.Prop({ type: [Function, String], default: null }),
|
|
303
|
+
__metadata("design:type", Object)
|
|
304
|
+
], ZdCalendar.prototype, "dayStyle", void 0);
|
|
305
|
+
__decorate([
|
|
306
|
+
vuetify.PropWatch({ type: [Function, Boolean, String], default: true }),
|
|
307
|
+
__metadata("design:type", Object)
|
|
308
|
+
], ZdCalendar.prototype, "canDeleteEvent", void 0);
|
|
309
|
+
__decorate([
|
|
310
|
+
vuetify.PropWatch({ type: [Function, Boolean, String], default: true }),
|
|
311
|
+
__metadata("design:type", Object)
|
|
312
|
+
], ZdCalendar.prototype, "canEditEvent", void 0);
|
|
281
313
|
__decorate([
|
|
282
314
|
vuetify.PropWatch({ type: [String, Number], default: 60 }),
|
|
283
315
|
__metadata("design:type", Object)
|
|
@@ -513,12 +545,7 @@
|
|
|
513
545
|
expression: "instance.showHeader",
|
|
514
546
|
},
|
|
515
547
|
],
|
|
516
|
-
class: [
|
|
517
|
-
"zd-toolbar-calendar",
|
|
518
|
-
"row",
|
|
519
|
-
{ "theme--dark": _vm.instance.dark || _vm.$vuetify.theme.dark },
|
|
520
|
-
{ "theme--light": _vm.instance.light || !_vm.$vuetify.theme.dark },
|
|
521
|
-
],
|
|
548
|
+
class: ["zd-toolbar-calendar", "row", _vm.theme],
|
|
522
549
|
attrs: {
|
|
523
550
|
name: "toolbar_" + _vm.instance.name,
|
|
524
551
|
height: "64",
|
|
@@ -765,7 +792,7 @@
|
|
|
765
792
|
"interval-width": _vm.instance.intervalWidth,
|
|
766
793
|
events: _vm.instance.calendarEvents,
|
|
767
794
|
"first-interval": _vm.instance.firstInterval,
|
|
768
|
-
"
|
|
795
|
+
"interval-style": _vm.instance.intervalStyle,
|
|
769
796
|
"first-time": _vm.instance.firstTime,
|
|
770
797
|
light: _vm.instance.light,
|
|
771
798
|
id: _vm.instance.name,
|
|
@@ -806,6 +833,31 @@
|
|
|
806
833
|
"click:time-category": _vm.clickTimeCategory,
|
|
807
834
|
moved: _vm.moved,
|
|
808
835
|
},
|
|
836
|
+
scopedSlots: _vm._u([
|
|
837
|
+
{
|
|
838
|
+
key: "day",
|
|
839
|
+
fn: function (ref) {
|
|
840
|
+
var date = ref.date;
|
|
841
|
+
return [
|
|
842
|
+
_c(
|
|
843
|
+
"div",
|
|
844
|
+
{
|
|
845
|
+
staticStyle: {
|
|
846
|
+
position: "absolute",
|
|
847
|
+
top: "0",
|
|
848
|
+
left: "0",
|
|
849
|
+
right: "0",
|
|
850
|
+
bottom: "0",
|
|
851
|
+
opacity: "0.5",
|
|
852
|
+
},
|
|
853
|
+
style: _vm.callDayStyle(date),
|
|
854
|
+
},
|
|
855
|
+
[_vm._v("\n \n ")]
|
|
856
|
+
),
|
|
857
|
+
]
|
|
858
|
+
},
|
|
859
|
+
},
|
|
860
|
+
]),
|
|
809
861
|
model: {
|
|
810
862
|
value: _vm.instance.value,
|
|
811
863
|
callback: function ($$v) {
|
|
@@ -815,108 +867,187 @@
|
|
|
815
867
|
},
|
|
816
868
|
}),
|
|
817
869
|
_vm._v(" "),
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
attrs: {
|
|
822
|
-
"close-on-content-click": false,
|
|
823
|
-
activator: _vm.selectedElement,
|
|
824
|
-
"offset-x": "",
|
|
825
|
-
},
|
|
826
|
-
model: {
|
|
827
|
-
value: _vm.selectedOpen,
|
|
828
|
-
callback: function ($$v) {
|
|
829
|
-
_vm.selectedOpen = $$v;
|
|
830
|
-
},
|
|
831
|
-
expression: "selectedOpen",
|
|
832
|
-
},
|
|
833
|
-
},
|
|
834
|
-
[
|
|
835
|
-
_c(
|
|
836
|
-
"zd-card",
|
|
870
|
+
_vm.selectedOpen
|
|
871
|
+
? _c(
|
|
872
|
+
"v-menu",
|
|
837
873
|
{
|
|
838
874
|
attrs: {
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
875
|
+
"close-on-content-click": false,
|
|
876
|
+
activator: _vm.selectedElement,
|
|
877
|
+
"offset-x": "",
|
|
878
|
+
},
|
|
879
|
+
model: {
|
|
880
|
+
value: _vm.selectedOpen,
|
|
881
|
+
callback: function ($$v) {
|
|
882
|
+
_vm.selectedOpen = $$v;
|
|
883
|
+
},
|
|
884
|
+
expression: "selectedOpen",
|
|
843
885
|
},
|
|
844
886
|
},
|
|
845
887
|
[
|
|
846
888
|
_c(
|
|
847
|
-
"
|
|
889
|
+
"zd-card",
|
|
848
890
|
{
|
|
849
891
|
attrs: {
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
dark:
|
|
892
|
+
name: "card_" + _vm.instance.name,
|
|
893
|
+
cssClass: "zd-pa-0",
|
|
894
|
+
dark: _vm.instance.dark,
|
|
895
|
+
light: _vm.instance.light,
|
|
853
896
|
},
|
|
854
897
|
},
|
|
855
898
|
[
|
|
856
899
|
_c(
|
|
857
|
-
"
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
tag: "h5",
|
|
900
|
+
"v-toolbar",
|
|
901
|
+
{
|
|
902
|
+
attrs: {
|
|
903
|
+
color: _vm.selectedEvent.color,
|
|
904
|
+
elevation: "0",
|
|
905
|
+
dark: "",
|
|
864
906
|
},
|
|
865
|
-
|
|
866
|
-
|
|
907
|
+
},
|
|
908
|
+
[
|
|
909
|
+
_c(
|
|
910
|
+
"zd-text",
|
|
911
|
+
_vm._b(
|
|
912
|
+
{
|
|
913
|
+
staticClass: "mx-2",
|
|
914
|
+
attrs: {
|
|
915
|
+
name: "title_" + _vm.instance.name,
|
|
916
|
+
},
|
|
917
|
+
},
|
|
918
|
+
"zd-text",
|
|
919
|
+
{
|
|
920
|
+
text: _vm.selectedEvent.name,
|
|
921
|
+
tag: "h5",
|
|
922
|
+
},
|
|
923
|
+
false
|
|
924
|
+
)
|
|
925
|
+
),
|
|
926
|
+
_vm._v(" "),
|
|
927
|
+
_c("v-spacer"),
|
|
928
|
+
_vm._v(" "),
|
|
929
|
+
_c(
|
|
930
|
+
"span",
|
|
931
|
+
[
|
|
932
|
+
_vm.callCanEditEvent(_vm.selectedEvent)
|
|
933
|
+
? _c(
|
|
934
|
+
"v-btn",
|
|
935
|
+
{
|
|
936
|
+
attrs: { icon: "" },
|
|
937
|
+
on: {
|
|
938
|
+
click: function ($event) {
|
|
939
|
+
return _vm.clickEditEvent(
|
|
940
|
+
_vm.selectedEvent,
|
|
941
|
+
$event
|
|
942
|
+
)
|
|
943
|
+
},
|
|
944
|
+
},
|
|
945
|
+
},
|
|
946
|
+
[
|
|
947
|
+
_c(
|
|
948
|
+
"v-icon",
|
|
949
|
+
{
|
|
950
|
+
on: {
|
|
951
|
+
click: function ($event) {},
|
|
952
|
+
},
|
|
953
|
+
},
|
|
954
|
+
[
|
|
955
|
+
_vm._v(
|
|
956
|
+
"\n " +
|
|
957
|
+
_vm._s(
|
|
958
|
+
_vm.$getIcon("pencil")
|
|
959
|
+
) +
|
|
960
|
+
"\n "
|
|
961
|
+
),
|
|
962
|
+
]
|
|
963
|
+
),
|
|
964
|
+
],
|
|
965
|
+
1
|
|
966
|
+
)
|
|
967
|
+
: _vm._e(),
|
|
968
|
+
_vm._v(" "),
|
|
969
|
+
_vm.callCanDeleteEvent(_vm.selectedEvent)
|
|
970
|
+
? _c(
|
|
971
|
+
"v-btn",
|
|
972
|
+
{
|
|
973
|
+
attrs: { icon: "" },
|
|
974
|
+
on: {
|
|
975
|
+
click: function ($event) {
|
|
976
|
+
return _vm.clickDeleteEvent(
|
|
977
|
+
_vm.selectedEvent,
|
|
978
|
+
$event
|
|
979
|
+
)
|
|
980
|
+
},
|
|
981
|
+
},
|
|
982
|
+
},
|
|
983
|
+
[
|
|
984
|
+
_c("v-icon", [
|
|
985
|
+
_vm._v(
|
|
986
|
+
"\n " +
|
|
987
|
+
_vm._s(_vm.$getIcon("trash")) +
|
|
988
|
+
"\n "
|
|
989
|
+
),
|
|
990
|
+
]),
|
|
991
|
+
],
|
|
992
|
+
1
|
|
993
|
+
)
|
|
994
|
+
: _vm._e(),
|
|
995
|
+
],
|
|
996
|
+
1
|
|
997
|
+
),
|
|
998
|
+
],
|
|
999
|
+
1
|
|
867
1000
|
),
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
1001
|
+
_vm._v(" "),
|
|
1002
|
+
_c(
|
|
1003
|
+
"v-card-text",
|
|
1004
|
+
[
|
|
1005
|
+
_c(
|
|
1006
|
+
"zd-text",
|
|
1007
|
+
_vm._b(
|
|
1008
|
+
{
|
|
1009
|
+
attrs: {
|
|
1010
|
+
name: "description_" + _vm.instance.name,
|
|
1011
|
+
},
|
|
1012
|
+
},
|
|
1013
|
+
"zd-text",
|
|
1014
|
+
{
|
|
1015
|
+
text: _vm.selectedEvent.description,
|
|
1016
|
+
tag: "p",
|
|
1017
|
+
},
|
|
1018
|
+
false
|
|
1019
|
+
)
|
|
1020
|
+
),
|
|
1021
|
+
],
|
|
1022
|
+
1
|
|
1023
|
+
),
|
|
1024
|
+
_vm._v(" "),
|
|
875
1025
|
_c(
|
|
876
|
-
"
|
|
877
|
-
|
|
878
|
-
{
|
|
1026
|
+
"v-card-actions",
|
|
1027
|
+
[
|
|
1028
|
+
_c("zd-button", {
|
|
879
1029
|
attrs: {
|
|
880
|
-
name: "
|
|
1030
|
+
name: "buttonClose_" + _vm.instance.name,
|
|
1031
|
+
flat: "",
|
|
1032
|
+
color: "secondary",
|
|
1033
|
+
label: "$t(CALENDAR_CLOSE)",
|
|
881
1034
|
},
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
},
|
|
888
|
-
|
|
889
|
-
|
|
1035
|
+
on: {
|
|
1036
|
+
click: function ($event) {
|
|
1037
|
+
_vm.selectedOpen = !_vm.selectedOpen;
|
|
1038
|
+
},
|
|
1039
|
+
},
|
|
1040
|
+
}),
|
|
1041
|
+
],
|
|
1042
|
+
1
|
|
890
1043
|
),
|
|
891
1044
|
],
|
|
892
1045
|
1
|
|
893
1046
|
),
|
|
894
|
-
_vm._v(" "),
|
|
895
|
-
_c(
|
|
896
|
-
"v-card-actions",
|
|
897
|
-
[
|
|
898
|
-
_c("zd-button", {
|
|
899
|
-
attrs: {
|
|
900
|
-
name: "buttonClose_" + _vm.instance.name,
|
|
901
|
-
flat: "",
|
|
902
|
-
color: "secondary",
|
|
903
|
-
label: "$t(CALENDAR_CLOSE)",
|
|
904
|
-
},
|
|
905
|
-
on: {
|
|
906
|
-
click: function ($event) {
|
|
907
|
-
_vm.selectedOpen = !_vm.selectedOpen;
|
|
908
|
-
},
|
|
909
|
-
},
|
|
910
|
-
}),
|
|
911
|
-
],
|
|
912
|
-
1
|
|
913
|
-
),
|
|
914
1047
|
],
|
|
915
1048
|
1
|
|
916
|
-
)
|
|
917
|
-
|
|
918
|
-
1
|
|
919
|
-
),
|
|
1049
|
+
)
|
|
1050
|
+
: _vm._e(),
|
|
920
1051
|
],
|
|
921
1052
|
1
|
|
922
1053
|
),
|
|
@@ -932,7 +1063,7 @@
|
|
|
932
1063
|
/* style */
|
|
933
1064
|
const __vue_inject_styles__ = function (inject) {
|
|
934
1065
|
if (!inject) return
|
|
935
|
-
inject("data-v-
|
|
1066
|
+
inject("data-v-25f678fe_0", { source: ".zd-calendar {\n display: flex;\n flex-direction: column;\n}\n.zd-calendar .v-btn--fab {\n z-index: 2;\n}\n.zd-calendar-content {\n display: flex;\n overflow: auto;\n height: 100%;\n}\n.zd-calendar .zd-toolbar-calendar {\n display: flex;\n flex: 0 1 auto;\n justify-items: center;\n justify-content: space-between;\n background-color: #fff;\n padding: 0.75rem 0.5rem;\n margin: 0;\n}\n.zd-calendar .zd-toolbar-calendar.theme--dark {\n background-color: #1e1e1e;\n}\n.zd-calendar .zd-toolbar-calendar div {\n align-items: center;\n display: flex;\n}\n@media screen and (max-width: 376px) {\n.zd-calendar .zd-toolbar-calendar {\n flex-direction: column;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-nav-title,\n .zd-calendar .zd-toolbar-calendar .zd-calendar-button-today {\n max-width: 100%;\n flex: 1;\n align-items: center;\n justify-content: space-between !important;\n}\n.zd-calendar .zd-toolbar-calendar .zd-calendar-button-today button {\n width: 100%;\n margin-right: 0px !important;\n}\n}\n.zd-calendar .zd-calendar-content-title .zd-calendar-title {\n display: flex;\n flex-direction: column;\n width: 154px;\n}", map: undefined, media: undefined });
|
|
936
1067
|
|
|
937
1068
|
};
|
|
938
1069
|
/* scoped */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zeedhi/zd-calendar-vue",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.0",
|
|
4
4
|
"description": "Powered by Zeedhi",
|
|
5
5
|
"main": "dist/calendar-vue.umd.js",
|
|
6
6
|
"module": "dist/calendar-vue.esm.js",
|
|
@@ -20,5 +20,5 @@
|
|
|
20
20
|
"vue-class-component": "7.2.*",
|
|
21
21
|
"vue-property-decorator": "9.1.*"
|
|
22
22
|
},
|
|
23
|
-
"gitHead": "
|
|
23
|
+
"gitHead": "26b12f1ca3ad6e8900a8207633f56b3e2d85923d"
|
|
24
24
|
}
|
package/types/Calendar.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ZdComponentRender } from '@zeedhi/vuetify';
|
|
2
|
-
import { Calendar } from '@zeedhi/zd-calendar-common';
|
|
2
|
+
import { Calendar, CalendarEvents } from '@zeedhi/zd-calendar-common';
|
|
3
3
|
export default class ZdCalendar extends ZdComponentRender {
|
|
4
4
|
categories: string | [];
|
|
5
5
|
categoryDays: number | string;
|
|
@@ -37,6 +37,9 @@ export default class ZdCalendar extends ZdComponentRender {
|
|
|
37
37
|
intervalHeight: number | string;
|
|
38
38
|
intervalMinutes: number | string;
|
|
39
39
|
intervalStyle: Function | null;
|
|
40
|
+
dayStyle: Function | null | string;
|
|
41
|
+
canDeleteEvent: Function | boolean | string;
|
|
42
|
+
canEditEvent: Function | boolean | string;
|
|
40
43
|
intervalWidth: number | string;
|
|
41
44
|
locale: string;
|
|
42
45
|
localeFirstDayOfYear: number | string;
|
|
@@ -60,7 +63,7 @@ export default class ZdCalendar extends ZdComponentRender {
|
|
|
60
63
|
instanceType: typeof Calendar;
|
|
61
64
|
selectedOpen: boolean;
|
|
62
65
|
selectedElement: null;
|
|
63
|
-
selectedEvent
|
|
66
|
+
selectedEvent?: object | null;
|
|
64
67
|
showDatePicker: boolean;
|
|
65
68
|
onChangePicker(): void;
|
|
66
69
|
get titleLabel(): string;
|
|
@@ -69,14 +72,19 @@ export default class ZdCalendar extends ZdComponentRender {
|
|
|
69
72
|
next(event: Event): void;
|
|
70
73
|
setType(select: any): void;
|
|
71
74
|
viewDay(date: string): void;
|
|
75
|
+
callDayStyle(date: string): string | object;
|
|
72
76
|
showEvent({ nativeEvent, event }: any): void;
|
|
73
77
|
clickDate(event: Event): void;
|
|
74
78
|
clickMore(event: Event): void;
|
|
75
79
|
clickEvent({ nativeEvent, event }: any): void;
|
|
80
|
+
clickEditEvent(selectedEvent: CalendarEvents, nativeEvent: Event): void;
|
|
81
|
+
clickDeleteEvent(selectedEvent: CalendarEvents, nativeEvent: Event): void;
|
|
76
82
|
clickDay(event: Event): void;
|
|
77
83
|
clickDayCategory(event: Event): void;
|
|
78
84
|
clickInterval(event: Event): void;
|
|
79
85
|
clickTime(event: Event): void;
|
|
80
86
|
clickTimeCategory(event: Event): void;
|
|
81
87
|
moved(event: Event): void;
|
|
88
|
+
callCanEditEvent(event: CalendarEvents): boolean | ((event: CalendarEvents) => boolean) | undefined;
|
|
89
|
+
callCanDeleteEvent(event: CalendarEvents): boolean | ((event: CalendarEvents) => boolean) | undefined;
|
|
82
90
|
}
|