funda-ui 1.1.138 → 1.1.140

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.
Files changed (27) hide show
  1. package/EventCalendar/index.css +90 -88
  2. package/EventCalendar/index.d.ts +3 -1
  3. package/EventCalendar/index.js +60 -29
  4. package/EventCalendarTimeline/index.css +580 -0
  5. package/EventCalendarTimeline/index.d.ts +58 -0
  6. package/EventCalendarTimeline/index.js +2355 -0
  7. package/README.md +1 -1
  8. package/Tooltip/index.js +12 -9
  9. package/all.d.ts +2 -0
  10. package/all.js +2 -0
  11. package/lib/cjs/EventCalendar/index.d.ts +3 -1
  12. package/lib/cjs/EventCalendar/index.js +60 -29
  13. package/lib/cjs/EventCalendarTimeline/index.d.ts +58 -0
  14. package/lib/cjs/EventCalendarTimeline/index.js +2355 -0
  15. package/lib/cjs/Tooltip/index.js +12 -9
  16. package/lib/cjs/index.d.ts +2 -0
  17. package/lib/cjs/index.js +2 -0
  18. package/lib/css/EventCalendar/index.css +90 -88
  19. package/lib/css/EventCalendarTimeline/index.css +580 -0
  20. package/lib/esm/EventCalendar/index.scss +70 -68
  21. package/lib/esm/EventCalendar/index.tsx +68 -30
  22. package/lib/esm/EventCalendarTimeline/index.scss +756 -0
  23. package/lib/esm/EventCalendarTimeline/index.tsx +1568 -0
  24. package/lib/esm/EventCalendarTimeline/utils/get-element-property.js +153 -0
  25. package/lib/esm/Tooltip/index.tsx +21 -16
  26. package/lib/esm/index.js +2 -0
  27. package/package.json +1 -1
package/EventCalendar/index.css CHANGED
@@ -1,70 +1,72 @@
1
1
  /* ======================================================
2
2
  <!-- Event Calendar -->
3
3
  /* ====================================================== */
4
- .custom-event-cal__wrapper {
5
- --custom-event-cal-wrapper-min-width: 400px;
6
- --custom-event-cal-border-color: #ddd;
7
- --custom-event-cal-border-color-hover: #333;
8
- --custom-event-cal-header-fs: 1.125rem;
9
- --custom-event-cal-default-border-color: #eee;
10
- --custom-event-cal-day-border-color: #ddd;
11
- --custom-event-cal-day-hover-bg: #f6f6f6;
12
- --custom-event-cal-dayselected-bg: #0b5ed7;
13
- --custom-event-cal-dayselected-text-color: #fff;
14
- --custom-event-cal-year-month-btn-border-color: #ddd;
15
- --custom-event-cal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
16
- --custom-event-cal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
17
- --custom-event-cal-year-month-btn-selected-color: #fff;
18
- --custom-event-cal-month-wrapper-w: 18.75rem;
19
- --custom-event-cal-year-wrapper-w: 18.75rem;
20
- --custom-event-cal-header-arrow-bg: #000;
21
- --custom-event-cal-header-text-color: #000;
22
- --custom-event-cal-header-prevnext-btn-bg: transparent;
23
- --custom-event-cal-header-prevnext-btn-color: #000;
24
- --custom-event-cal-header-prevnext-btn-radius: 0.25rem;
25
- --custom-event-cal-delete-btn-color: #ee4949;
26
- --custom-event-cal-footer-today-btn-bg: rgba(0, 58, 166, 1);
27
- --custom-event-cal-footer-today-btn-color: #fff;
28
- --custom-event-cal-event-bg: rgb(255, 240, 227);
4
+ .e-cal__wrapper {
5
+ --e-cal-wrapper-min-width: 400px;
6
+ --e-cal-body-bg: #fff;
7
+ --e-cal-border-color: #ddd;
8
+ --e-cal-border-color-hover: #333;
9
+ --e-cal-header-fs: 1.125rem;
10
+ --e-cal-default-border-color: #eee;
11
+ --e-cal-day-border-color: #ddd;
12
+ --e-cal-day-hover-bg: #f6f6f6;
13
+ --e-cal-dayselected-bg: #0b5ed7;
14
+ --e-cal-dayselected-text-color: #fff;
15
+ --e-cal-year-month-btn-border-color: #ddd;
16
+ --e-cal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
17
+ --e-cal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
18
+ --e-cal-year-month-btn-selected-color: #fff;
19
+ --e-cal-month-wrapper-w: 18.75rem;
20
+ --e-cal-year-wrapper-w: 18.75rem;
21
+ --e-cal-header-arrow-bg: #000;
22
+ --e-cal-header-text-color: #000;
23
+ --e-cal-header-prevnext-btn-bg: transparent;
24
+ --e-cal-header-prevnext-btn-color: #000;
25
+ --e-cal-header-prevnext-btn-radius: 0.25rem;
26
+ --e-cal-delete-btn-color: #ee4949;
27
+ --e-cal-footer-today-btn-bg: rgba(0, 58, 166, 1);
28
+ --e-cal-footer-today-btn-color: #fff;
29
+ --e-cal-event-bg: rgb(255, 240, 227);
29
30
  position: relative;
30
- min-width: var(--custom-event-cal-wrapper-min-width);
31
- border: 1px solid var(--custom-event-cal-border-color);
31
+ min-width: var(--e-cal-wrapper-min-width);
32
+ border: 1px solid var(--e-cal-border-color);
32
33
  /* --HEADER --*/
33
34
  /*-- BODY --*/
34
35
  /*-- CELL --*/
35
36
  /*-- SELECTION --*/
36
37
  /* --BUTTON --*/
37
38
  }
38
- .custom-event-cal__wrapper .custom-event-cal__header {
39
- font-size: var(--custom-event-cal-header-fs);
39
+ .e-cal__wrapper .e-cal__header {
40
+ font-size: var(--e-cal-header-fs);
40
41
  font-weight: bold;
41
42
  padding: 10px 10px 5px 10px;
42
43
  display: flex;
43
44
  justify-content: space-between;
44
45
  }
45
- .custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn {
46
+ .e-cal__wrapper .e-cal__header .e-cal__header__btns .e-cal__btn {
46
47
  margin-right: 1rem;
47
- color: var(--custom-event-cal-header-text-color);
48
+ color: var(--e-cal-header-text-color);
48
49
  }
49
- .custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn svg {
50
+ .e-cal__wrapper .e-cal__header .e-cal__header__btns .e-cal__btn svg {
50
51
  margin-left: 0.3rem;
51
52
  }
52
- .custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn svg path {
53
- fill: var(--custom-event-cal-header-arrow-bg);
53
+ .e-cal__wrapper .e-cal__header .e-cal__header__btns .e-cal__btn svg path {
54
+ fill: var(--e-cal-header-arrow-bg);
54
55
  }
55
- .custom-event-cal__wrapper .custom-event-cal__header .custom-event-cal__header__btns .custom-event-cal__btn.active svg {
56
+ .e-cal__wrapper .e-cal__header .e-cal__header__btns .e-cal__btn.active svg {
56
57
  transform: rotate(180deg);
57
58
  }
58
- .custom-event-cal__wrapper .custom-event-cal__body {
59
+ .e-cal__wrapper .e-cal__body {
60
+ background: var(--e-cal-body-bg);
59
61
  width: 100%;
60
62
  display: flex;
61
63
  flex-wrap: wrap;
62
64
  }
63
- .custom-event-cal__wrapper .custom-event-cal__row {
65
+ .e-cal__wrapper .e-cal__row {
64
66
  display: flex;
65
67
  width: 100%;
66
68
  }
67
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell {
69
+ .e-cal__wrapper .e-cal__row .e-cal__cell {
68
70
  flex: 1;
69
71
  position: relative;
70
72
  height: auto;
@@ -75,24 +77,24 @@
75
77
  flex-direction: column;
76
78
  text-align: center;
77
79
  border-width: 0;
78
- border-color: var(--custom-event-cal-default-border-color);
80
+ border-color: var(--e-cal-default-border-color);
79
81
  border-style: solid;
80
82
  border-top-width: 1px;
81
83
  border-right-width: 1px;
82
84
  }
83
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.last-cell {
85
+ .e-cal__wrapper .e-cal__row .e-cal__cell.last-cell {
84
86
  border-right-width: 0;
85
87
  }
86
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.last-row {
88
+ .e-cal__wrapper .e-cal__row .e-cal__cell.last-row {
87
89
  border-bottom-width: 1px;
88
90
  }
89
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.custom-event-cal__day--week {
91
+ .e-cal__wrapper .e-cal__row .e-cal__cell.e-cal__day--week {
90
92
  min-height: 2.75em;
91
93
  align-items: end;
92
94
  padding-inline-end: 0.75rem;
93
95
  }
94
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell .custom-event-cal__day__event {
95
- background-color: var(--custom-event-cal-event-bg);
96
+ .e-cal__wrapper .e-cal__row .e-cal__cell .e-cal__day__event {
97
+ background-color: var(--e-cal-event-bg);
96
98
  width: 100%;
97
99
  padding: 0.1rem 0.5rem;
98
100
  margin: 0.5rem;
@@ -101,18 +103,18 @@
101
103
  text-align: left;
102
104
  font-size: 0.75rem;
103
105
  }
104
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell .custom-event-cal__day__eventdel {
106
+ .e-cal__wrapper .e-cal__row .e-cal__cell .e-cal__day__eventdel {
105
107
  position: absolute;
106
108
  z-index: 1;
107
109
  left: 0;
108
110
  top: 0;
109
111
  display: none;
110
- color: var(--custom-event-cal-delete-btn-color);
112
+ color: var(--e-cal-delete-btn-color);
111
113
  }
112
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell .custom-event-cal__day__eventdel svg path {
113
- fill: var(--custom-event-cal-delete-btn-color);
114
+ .e-cal__wrapper .e-cal__row .e-cal__cell .e-cal__day__eventdel svg path {
115
+ fill: var(--e-cal-delete-btn-color);
114
116
  }
115
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell > span {
117
+ .e-cal__wrapper .e-cal__row .e-cal__cell > span {
116
118
  position: absolute;
117
119
  right: 0.25rem;
118
120
  top: 0.25rem;
@@ -124,25 +126,25 @@
124
126
  line-height: 1.5;
125
127
  margin: 0.5rem 0;
126
128
  }
127
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell > span.disabled {
129
+ .e-cal__wrapper .e-cal__row .e-cal__cell > span.disabled {
128
130
  opacity: 0.2;
129
131
  }
130
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell:not(.empty) {
132
+ .e-cal__wrapper .e-cal__row .e-cal__cell:not(.empty) {
131
133
  cursor: pointer;
132
134
  }
133
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell.selected > span {
134
- color: var(--custom-event-cal-dayselected-text-color);
135
- background-color: var(--custom-event-cal-dayselected-bg);
135
+ .e-cal__wrapper .e-cal__row .e-cal__cell.selected > span {
136
+ color: var(--e-cal-dayselected-text-color);
137
+ background-color: var(--e-cal-dayselected-bg);
136
138
  }
137
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell:not(.empty):hover {
138
- background-color: var(--custom-event-cal-day-hover-bg);
139
+ .e-cal__wrapper .e-cal__row .e-cal__cell:not(.empty):hover {
140
+ background-color: var(--e-cal-day-hover-bg);
139
141
  }
140
- .custom-event-cal__wrapper .custom-event-cal__row .custom-event-cal__cell:not(.empty):hover .custom-event-cal__day__eventdel {
142
+ .e-cal__wrapper .e-cal__row .e-cal__cell:not(.empty):hover .e-cal__day__eventdel {
141
143
  display: block;
142
144
  }
143
- .custom-event-cal__wrapper .custom-event-cal__month-wrapper {
145
+ .e-cal__wrapper .e-cal__month-wrapper {
144
146
  position: absolute;
145
- width: var(--custom-event-cal-month-wrapper-w);
147
+ width: var(--e-cal-month-wrapper-w);
146
148
  height: auto;
147
149
  z-index: 1;
148
150
  top: calc(1rem + 22px);
@@ -150,18 +152,18 @@
150
152
  transform: translateX(-50%);
151
153
  display: none;
152
154
  }
153
- .custom-event-cal__wrapper .custom-event-cal__month-wrapper.active {
155
+ .e-cal__wrapper .e-cal__month-wrapper.active {
154
156
  display: block;
155
157
  }
156
- .custom-event-cal__wrapper .custom-event-cal__month-wrapper .custom-event-cal__month-container {
158
+ .e-cal__wrapper .e-cal__month-wrapper .e-cal__month-container {
157
159
  display: grid;
158
160
  grid-template-columns: repeat(3, 1fr);
159
161
  grid-template-rows: repeat(4, 2.5em);
160
162
  grid-gap: 10px;
161
163
  }
162
- .custom-event-cal__wrapper .custom-event-cal__year-wrapper {
164
+ .e-cal__wrapper .e-cal__year-wrapper {
163
165
  position: absolute;
164
- width: var(--custom-event-cal-year-wrapper-w);
166
+ width: var(--e-cal-year-wrapper-w);
165
167
  height: auto;
166
168
  z-index: 1;
167
169
  top: calc(1rem + 22px);
@@ -169,36 +171,36 @@
169
171
  transform: translateX(-50%);
170
172
  display: none;
171
173
  }
172
- .custom-event-cal__wrapper .custom-event-cal__year-wrapper.active {
174
+ .e-cal__wrapper .e-cal__year-wrapper.active {
173
175
  display: block;
174
176
  }
175
- .custom-event-cal__wrapper .custom-event-cal__year-wrapper .custom-event-cal__year-container {
177
+ .e-cal__wrapper .e-cal__year-wrapper .e-cal__year-container {
176
178
  display: grid;
177
179
  grid-template-columns: repeat(4, 1fr);
178
180
  grid-template-rows: repeat(5, 2.5em);
179
181
  grid-gap: 5px;
180
182
  }
181
- .custom-event-cal__wrapper .custom-event-cal__year,
182
- .custom-event-cal__wrapper .custom-event-cal__month {
183
+ .e-cal__wrapper .e-cal__year,
184
+ .e-cal__wrapper .e-cal__month {
183
185
  display: flex;
184
186
  align-items: center;
185
187
  justify-content: center;
186
188
  padding: 5px;
187
189
  font-size: 0.875em;
188
- border: 1px solid var(--custom-event-cal-year-month-btn-border-color);
190
+ border: 1px solid var(--e-cal-year-month-btn-border-color);
189
191
  border-radius: 0.25rem;
190
192
  cursor: pointer;
191
193
  }
192
- .custom-event-cal__wrapper .custom-event-cal__year:hover,
193
- .custom-event-cal__wrapper .custom-event-cal__month:hover {
194
- background-color: var(--custom-event-cal-year-month-btn-hover-bg);
194
+ .e-cal__wrapper .e-cal__year:hover,
195
+ .e-cal__wrapper .e-cal__month:hover {
196
+ background-color: var(--e-cal-year-month-btn-hover-bg);
195
197
  }
196
- .custom-event-cal__wrapper .custom-event-cal__year.selected,
197
- .custom-event-cal__wrapper .custom-event-cal__month.selected {
198
- background-color: var(--custom-event-cal-year-month-btn-selected-bg);
199
- color: var(--custom-event-cal-year-month-btn-selected-color);
198
+ .e-cal__wrapper .e-cal__year.selected,
199
+ .e-cal__wrapper .e-cal__month.selected {
200
+ background-color: var(--e-cal-year-month-btn-selected-bg);
201
+ color: var(--e-cal-year-month-btn-selected-color);
200
202
  }
201
- .custom-event-cal__wrapper .custom-event-cal__btn {
203
+ .e-cal__wrapper .e-cal__btn {
202
204
  border: none;
203
205
  outline: none;
204
206
  background: none;
@@ -207,22 +209,22 @@
207
209
  box-shadow: none;
208
210
  cursor: pointer;
209
211
  }
210
- .custom-event-cal__wrapper .custom-event-cal__btn svg path {
211
- fill: var(--custom-event-cal-header-arrow-bg);
212
+ .e-cal__wrapper .e-cal__btn svg path {
213
+ fill: var(--e-cal-header-arrow-bg);
212
214
  }
213
- .custom-event-cal__wrapper .custom-event-cal__btn--prev, .custom-event-cal__wrapper .custom-event-cal__btn--next {
214
- border-radius: var(--custom-event-cal-header-prevnext-btn-radius);
215
- color: var(--custom-event-cal-header-prevnext-btn-color);
216
- background-color: var(--custom-event-cal-header-prevnext-btn-bg);
215
+ .e-cal__wrapper .e-cal__btn--prev, .e-cal__wrapper .e-cal__btn--next {
216
+ border-radius: var(--e-cal-header-prevnext-btn-radius);
217
+ color: var(--e-cal-header-prevnext-btn-color);
218
+ background-color: var(--e-cal-header-prevnext-btn-bg);
217
219
  }
218
- .custom-event-cal__wrapper .custom-event-cal__btn--prev svg path, .custom-event-cal__wrapper .custom-event-cal__btn--next svg path {
219
- fill: var(--custom-event-cal-header-prevnext-btn-color);
220
+ .e-cal__wrapper .e-cal__btn--prev svg path, .e-cal__wrapper .e-cal__btn--next svg path {
221
+ fill: var(--e-cal-header-prevnext-btn-color);
220
222
  }
221
- .custom-event-cal__wrapper .custom-event-cal__btn--today {
222
- border: 1px solid var(--custom-event-cal-border-color);
223
+ .e-cal__wrapper .e-cal__btn--today {
224
+ border: 1px solid var(--e-cal-border-color);
223
225
  border-radius: 0.25rem;
224
226
  font-size: 0.875em;
225
227
  padding: 0.2rem 1rem;
226
- color: var(--custom-event-cal-footer-today-btn-color);
227
- background-color: var(--custom-event-cal-footer-today-btn-bg);
228
+ color: var(--e-cal-footer-today-btn-color);
229
+ background-color: var(--e-cal-footer-today-btn-bg);
228
230
  }
package/EventCalendar/index.d.ts CHANGED
@@ -8,7 +8,9 @@ declare type EventCalendarProps = {
8
8
  langMonthsFull?: string[];
9
9
  langToday?: string;
10
10
  iconRemove?: React.ReactNode | string;
11
- onChangeDate?: (currentData: any) => void;
11
+ cellCloseBtnClassName?: string;
12
+ cellCloseBtnLabel?: string | React.ReactNode;
13
+ onChangeDate?: (e: any, currentData: any) => void;
12
14
  modalMaskOpacity?: string;
13
15
  modalMaxWidth?: number | string;
14
16
  modalMinHeight?: number | string;
package/EventCalendar/index.js CHANGED
@@ -974,6 +974,8 @@ var EventCalendar = function EventCalendar(props) {
974
974
  langToday = props.langToday,
975
975
  iconRemove = props.iconRemove,
976
976
  onChangeDate = props.onChangeDate,
977
+ cellCloseBtnClassName = props.cellCloseBtnClassName,
978
+ cellCloseBtnLabel = props.cellCloseBtnLabel,
977
979
  modalMaskOpacity = props.modalMaskOpacity,
978
980
  modalMaxWidth = props.modalMaxWidth,
979
981
  modalMinHeight = props.modalMinHeight,
@@ -1141,6 +1143,8 @@ var EventCalendar = function EventCalendar(props) {
1141
1143
  };
1142
1144
  function getCalendarDate(v) {
1143
1145
  var padZeroEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
1146
+ if (typeof v === 'undefined') return '';
1147
+
1144
1148
  // YYYY-MM-DD
1145
1149
  var date = typeof v === 'string' ? new Date(v) : v;
1146
1150
  var padZero = function padZero(num) {
@@ -1163,6 +1167,10 @@ var EventCalendar = function EventCalendar(props) {
1163
1167
  setMonth(inputDate.getMonth());
1164
1168
  setYear(inputDate.getFullYear());
1165
1169
  setStartDay(getStartDayOfMonth(inputDate));
1170
+
1171
+ // update selector
1172
+ setSelectedMonth(inputDate.getMonth());
1173
+ setSelectedYear(inputDate.getFullYear());
1166
1174
  }
1167
1175
  function getStartDayOfMonth(date) {
1168
1176
  var startDate = new Date(date.getFullYear(), date.getMonth(), 1).getDay();
@@ -1249,13 +1257,13 @@ var EventCalendar = function EventCalendar(props) {
1249
1257
  }
1250
1258
  }, [eventsValue, customTodayDate]);
1251
1259
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1252
- className: "custom-event-cal__wrapper"
1260
+ className: "e-cal__wrapper"
1253
1261
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1254
- className: "custom-event-cal__header bg-body-tertiary"
1262
+ className: "e-cal__header bg-body-tertiary"
1255
1263
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1256
1264
  tabIndex: -1,
1257
1265
  type: "button",
1258
- className: "custom-event-cal__btn custom-event-cal__btn--prev",
1266
+ className: "e-cal__btn e-cal__btn--prev",
1259
1267
  onClick: handlePrevChange
1260
1268
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
1261
1269
  width: "20px",
@@ -1266,11 +1274,11 @@ var EventCalendar = function EventCalendar(props) {
1266
1274
  d: "M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z",
1267
1275
  fill: "#000"
1268
1276
  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1269
- className: "custom-event-cal__header__btns"
1277
+ className: "e-cal__header__btns"
1270
1278
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1271
1279
  tabIndex: -1,
1272
1280
  type: "button",
1273
- className: "custom-event-cal__btn ".concat(winMonth ? 'active' : ''),
1281
+ className: "e-cal__btn ".concat(winMonth ? 'active' : ''),
1274
1282
  onClick: handleShowWinMonth
1275
1283
  }, MONTHS[month], /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
1276
1284
  width: "12px",
@@ -1282,7 +1290,7 @@ var EventCalendar = function EventCalendar(props) {
1282
1290
  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1283
1291
  tabIndex: -1,
1284
1292
  type: "button",
1285
- className: "custom-event-cal__btn ".concat(winYear ? 'active' : ''),
1293
+ className: "e-cal__btn ".concat(winYear ? 'active' : ''),
1286
1294
  onClick: handleShowWinYear
1287
1295
  }, year, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
1288
1296
  width: "12px",
@@ -1294,7 +1302,7 @@ var EventCalendar = function EventCalendar(props) {
1294
1302
  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1295
1303
  tabIndex: -1,
1296
1304
  type: "button",
1297
- className: "custom-event-cal__btn custom-event-cal__btn--next",
1305
+ className: "e-cal__btn e-cal__btn--next",
1298
1306
  onClick: handleNextChange
1299
1307
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("svg", {
1300
1308
  width: "20px",
@@ -1305,14 +1313,18 @@ var EventCalendar = function EventCalendar(props) {
1305
1313
  d: "M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z",
1306
1314
  fill: "#000"
1307
1315
  })))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1308
- className: "custom-event-cal__body"
1316
+ className: "e-cal__body"
1309
1317
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1310
- className: "custom-event-cal__row"
1311
- }, WEEK.map(function (d, i) {
1318
+ className: "e-cal__row"
1319
+ }, WEEK.map(function (s, i) {
1312
1320
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1313
- className: "custom-event-cal__cell custom-event-cal__day custom-event-cal__day--week custom-event-cal__day--disabled bg-secondary-subtle empty ".concat(i === WEEK.length - 1 ? 'last-cell' : ''),
1314
- key: d
1315
- }, d);
1321
+ className: "e-cal__cell e-cal__day e-cal__day--week e-cal__day--disabled bg-secondary-subtle empty ".concat(i === WEEK.length - 1 ? 'last-cell' : ''),
1322
+ key: i,
1323
+ "data-week": i,
1324
+ dangerouslySetInnerHTML: {
1325
+ __html: s
1326
+ }
1327
+ });
1316
1328
  })), getCells().map(function (item, j) {
1317
1329
  var isFirstRow = j === 0;
1318
1330
  var isLastRow = j === getCells().length - 1;
@@ -1324,20 +1336,39 @@ var EventCalendar = function EventCalendar(props) {
1324
1336
  var __backFillNum = getBackFill();
1325
1337
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1326
1338
  key: 'row' + item.row,
1327
- className: "custom-event-cal__row"
1339
+ className: "e-cal__row"
1328
1340
  }, item.col.map(function (dayIndex, i) {
1329
1341
  var d = typeof dayIndex === 'number' ? dayIndex - (startDay - 2) : 0;
1330
1342
  var _currentData = val.filter(function (item) {
1331
1343
  return getCalendarDate(item.date) === getCalendarDate("".concat(year, "-").concat(month + 1, "-").concat(d));
1332
1344
  });
1333
1345
  var isLastCol = i === item.col.length - 1;
1346
+
1347
+ // date
1348
+ var _dateShow = d > 0 ? "".concat(year, "-").concat(month + 1, "-").concat(d) : '';
1349
+ if (isFirstRow && __forwardFillNum && _dateShow === '') {
1350
+ if (month + 1 === 1) {
1351
+ _dateShow = "".concat(year - 1, "-12-").concat(__forwardFillNum[i]);
1352
+ } else {
1353
+ _dateShow = "".concat(year, "-").concat(month, "-").concat(__forwardFillNum[i]);
1354
+ }
1355
+ }
1356
+ if (isLastRow && __backFillNum && _dateShow === '') {
1357
+ if (month + 1 === 12) {
1358
+ _dateShow = "".concat(year + 1, "-1-").concat(__backFillNum[i - item.col.filter(Boolean).length]);
1359
+ } else {
1360
+ _dateShow = "".concat(year, "-").concat(month + 2, "-").concat(__backFillNum[i - item.col.filter(Boolean).length]);
1361
+ }
1362
+ }
1334
1363
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1335
- className: "custom-event-cal__cell custom-event-cal__day ".concat(d > 0 ? '' : 'empty', " ").concat(d === now.getDate() ? 'today' : '', " ").concat(d === day ? 'selected' : '', " ").concat(isLastCol ? 'last-cell' : '', " ").concat(isLastRow ? 'last-row' : ''),
1364
+ className: "e-cal__cell e-cal__day ".concat(d > 0 ? '' : 'empty', " ").concat(d === now.getDate() ? 'today' : '', " ").concat(d === day ? 'selected' : '', " ").concat(isLastCol ? 'last-cell' : '', " ").concat(isLastRow ? 'last-row' : ''),
1336
1365
  key: "col" + i,
1366
+ "data-date": getCalendarDate(_dateShow),
1367
+ "data-week": i,
1337
1368
  onClick: function onClick(e) {
1338
1369
  if (d > 0) {
1339
1370
  handleDayChange(e, d);
1340
- onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(_currentData.length === 0 ? {
1371
+ onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(e, _currentData.length === 0 ? {
1341
1372
  id: 0,
1342
1373
  date: getCalendarDate("".concat(year, "-").concat(month + 1, "-").concat(d))
1343
1374
  } : _currentData[0]);
@@ -1350,18 +1381,18 @@ var EventCalendar = function EventCalendar(props) {
1350
1381
  }
1351
1382
  }
1352
1383
  }
1353
- }, isFirstRow && __forwardFillNum ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1384
+ }, isFirstRow && __forwardFillNum && typeof __forwardFillNum[i] !== 'undefined' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1354
1385
  className: "disabled"
1355
- }, __forwardFillNum[i])) : null, d > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, d) : null, isLastRow && __backFillNum ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1386
+ }, __forwardFillNum[i])) : null, d > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, d) : null, isLastRow && __backFillNum && typeof __backFillNum[i - item.col.filter(Boolean).length] !== 'undefined' ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
1356
1387
  className: "disabled"
1357
1388
  }, __backFillNum[i - item.col.filter(Boolean).length]) : null, _currentData.length > 0 ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1358
- className: "custom-event-cal__day__event",
1389
+ className: "e-cal__day__event",
1359
1390
  style: typeof _currentData[0] !== 'undefined' && _currentData[0].eventStyles !== 'undefined' ? _currentData[0].eventStyles : {},
1360
1391
  dangerouslySetInnerHTML: {
1361
1392
  __html: _currentData[0].data
1362
1393
  }
1363
1394
  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1364
- className: "custom-event-cal__day__eventdel"
1395
+ className: "e-cal__day__eventdel ".concat(cellCloseBtnClassName || '')
1365
1396
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
1366
1397
  href: "#",
1367
1398
  tabIndex: -1,
@@ -1385,38 +1416,38 @@ var EventCalendar = function EventCalendar(props) {
1385
1416
  clipRule: "evenodd",
1386
1417
  d: "M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10ZM8 11a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2H8Z",
1387
1418
  fill: "#000"
1388
- })))))) : null);
1419
+ }))), cellCloseBtnLabel || ''))) : null);
1389
1420
  }));
1390
1421
  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1391
- className: "custom-event-cal__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ".concat(winMonth ? 'active' : '')
1422
+ className: "e-cal__month-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ".concat(winMonth ? 'active' : '')
1392
1423
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1393
- className: "custom-event-cal__month-container"
1424
+ className: "e-cal__month-container"
1394
1425
  }, MONTHS_FULL.map(function (month, index) {
1395
1426
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1396
- className: "custom-event-cal__month ".concat(selectedMonth === index ? ' selected' : ''),
1427
+ className: "e-cal__month ".concat(selectedMonth === index ? ' selected' : ''),
1397
1428
  key: month + index,
1398
1429
  onClick: function onClick() {
1399
1430
  handleMonthChange(index);
1400
1431
  }
1401
1432
  }, month);
1402
1433
  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1403
- className: "custom-event-cal__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ".concat(winYear ? 'active' : '')
1434
+ className: "e-cal__year-wrapper shadow p-3 mb-5 bg-body-tertiary rounded ".concat(winYear ? 'active' : '')
1404
1435
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1405
- className: "custom-event-cal__year-container bg-body-tertiary"
1436
+ className: "e-cal__year-container bg-body-tertiary"
1406
1437
  }, yearsArray.map(function (year, index) {
1407
1438
  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1408
- className: "custom-event-cal__year ".concat(selectedYear === year ? ' selected' : ''),
1439
+ className: "e-cal__year ".concat(selectedYear === year ? ' selected' : ''),
1409
1440
  key: year + index,
1410
1441
  onClick: function onClick() {
1411
1442
  handleYearChange(year);
1412
1443
  }
1413
1444
  }, year);
1414
1445
  }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
1415
- className: "custom-event-cal__today-container p-2 bg-body-tertiary"
1446
+ className: "e-cal__today-wrapper p-2 bg-body-tertiary"
1416
1447
  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
1417
1448
  tabIndex: -1,
1418
1449
  type: "button",
1419
- className: "custom-event-cal__btn custom-event-cal__btn--today",
1450
+ className: "e-cal__btn e-cal__btn--today",
1420
1451
  onClick: handleTodayChange
1421
1452
  }, langToday || 'Today'))), EVENTS_ENABLED ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((funda_modaldialog__WEBPACK_IMPORTED_MODULE_1___default()), {
1422
1453
  show: showDelete,