react-fill-calendar 0.1.4 → 0.1.5
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/dist/index.js +173 -167
- package/dist/index.umd.cjs +5 -5
- package/index.d.ts +1 -0
- package/package.json +1 -1
- package/readme.md +23 -13
package/dist/index.js
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
|
-
import
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
import Q, { useMemo as re } from "react";
|
|
2
|
+
var D = { exports: {} }, S = {};
|
|
3
|
+
var B;
|
|
4
4
|
function te() {
|
|
5
|
-
if (
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
function
|
|
9
|
-
var
|
|
10
|
-
if (
|
|
11
|
-
|
|
5
|
+
if (B) return S;
|
|
6
|
+
B = 1;
|
|
7
|
+
var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), b = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
|
+
function g(p, s, f) {
|
|
9
|
+
var i = null;
|
|
10
|
+
if (f !== void 0 && (i = "" + f), s.key !== void 0 && (i = "" + s.key), "key" in s) {
|
|
11
|
+
f = {};
|
|
12
12
|
for (var x in s)
|
|
13
|
-
x !== "key" && (
|
|
14
|
-
} else
|
|
15
|
-
return s =
|
|
16
|
-
$$typeof:
|
|
13
|
+
x !== "key" && (f[x] = s[x]);
|
|
14
|
+
} else f = s;
|
|
15
|
+
return s = f.ref, {
|
|
16
|
+
$$typeof: c,
|
|
17
17
|
type: p,
|
|
18
|
-
key:
|
|
18
|
+
key: i,
|
|
19
19
|
ref: s !== void 0 ? s : null,
|
|
20
|
-
props:
|
|
20
|
+
props: f
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return S.Fragment = b, S.jsx = g, S.jsxs = g, S;
|
|
24
24
|
}
|
|
25
|
-
var
|
|
26
|
-
var
|
|
25
|
+
var N = {};
|
|
26
|
+
var H;
|
|
27
27
|
function ne() {
|
|
28
|
-
return
|
|
29
|
-
function
|
|
28
|
+
return H || (H = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
+
function c(e) {
|
|
30
30
|
if (e == null) return null;
|
|
31
31
|
if (typeof e == "function")
|
|
32
|
-
return e.$$typeof ===
|
|
32
|
+
return e.$$typeof === I ? null : e.displayName || e.name || null;
|
|
33
33
|
if (typeof e == "string") return e;
|
|
34
34
|
switch (e) {
|
|
35
|
-
case
|
|
35
|
+
case j:
|
|
36
36
|
return "Fragment";
|
|
37
|
-
case
|
|
37
|
+
case P:
|
|
38
38
|
return "Profiler";
|
|
39
|
-
case c:
|
|
40
|
-
return "StrictMode";
|
|
41
39
|
case A:
|
|
40
|
+
return "StrictMode";
|
|
41
|
+
case m:
|
|
42
42
|
return "Suspense";
|
|
43
|
-
case
|
|
43
|
+
case y:
|
|
44
44
|
return "SuspenseList";
|
|
45
|
-
case
|
|
45
|
+
case C:
|
|
46
46
|
return "Activity";
|
|
47
47
|
}
|
|
48
48
|
if (typeof e == "object")
|
|
49
49
|
switch (typeof e.tag == "number" && console.error(
|
|
50
50
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
51
51
|
), e.$$typeof) {
|
|
52
|
-
case
|
|
52
|
+
case Y:
|
|
53
53
|
return "Portal";
|
|
54
|
-
case
|
|
54
|
+
case u:
|
|
55
55
|
return e.displayName || "Context";
|
|
56
|
-
case
|
|
56
|
+
case F:
|
|
57
57
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
58
|
-
case
|
|
58
|
+
case l:
|
|
59
59
|
var r = e.render;
|
|
60
60
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
61
|
-
case
|
|
62
|
-
return r = e.displayName || null, r !== null ? r :
|
|
63
|
-
case
|
|
61
|
+
case T:
|
|
62
|
+
return r = e.displayName || null, r !== null ? r : c(e.type) || "Memo";
|
|
63
|
+
case d:
|
|
64
64
|
r = e._payload, e = e._init;
|
|
65
65
|
try {
|
|
66
|
-
return
|
|
66
|
+
return c(e(r));
|
|
67
67
|
} catch {
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
70
|
return null;
|
|
71
71
|
}
|
|
72
|
-
function
|
|
72
|
+
function b(e) {
|
|
73
73
|
return "" + e;
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function g(e) {
|
|
76
76
|
try {
|
|
77
|
-
|
|
77
|
+
b(e);
|
|
78
78
|
var r = !1;
|
|
79
79
|
} catch {
|
|
80
80
|
r = !0;
|
|
@@ -86,29 +86,29 @@ function ne() {
|
|
|
86
86
|
r,
|
|
87
87
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
88
88
|
a
|
|
89
|
-
),
|
|
89
|
+
), b(e);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
function p(e) {
|
|
93
|
-
if (e ===
|
|
94
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
93
|
+
if (e === j) return "<>";
|
|
94
|
+
if (typeof e == "object" && e !== null && e.$$typeof === d)
|
|
95
95
|
return "<...>";
|
|
96
96
|
try {
|
|
97
|
-
var r =
|
|
97
|
+
var r = c(e);
|
|
98
98
|
return r ? "<" + r + ">" : "<...>";
|
|
99
99
|
} catch {
|
|
100
100
|
return "<...>";
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
103
|
function s() {
|
|
104
|
-
var e =
|
|
104
|
+
var e = M.A;
|
|
105
105
|
return e === null ? null : e.getOwner();
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function f() {
|
|
108
108
|
return Error("react-stack-top-frame");
|
|
109
109
|
}
|
|
110
|
-
function
|
|
111
|
-
if (
|
|
110
|
+
function i(e) {
|
|
111
|
+
if (W.call(e, "key")) {
|
|
112
112
|
var r = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
113
113
|
if (r && r.isReactWarning) return !1;
|
|
114
114
|
}
|
|
@@ -116,7 +116,7 @@ function ne() {
|
|
|
116
116
|
}
|
|
117
117
|
function x(e, r) {
|
|
118
118
|
function t() {
|
|
119
|
-
|
|
119
|
+
z || (z = !0, console.error(
|
|
120
120
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
121
121
|
r
|
|
122
122
|
));
|
|
@@ -126,23 +126,23 @@ function ne() {
|
|
|
126
126
|
configurable: !0
|
|
127
127
|
});
|
|
128
128
|
}
|
|
129
|
-
function
|
|
130
|
-
var e =
|
|
131
|
-
return
|
|
129
|
+
function k() {
|
|
130
|
+
var e = c(this.type);
|
|
131
|
+
return J[e] || (J[e] = !0, console.error(
|
|
132
132
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
133
133
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
134
134
|
}
|
|
135
|
-
function
|
|
135
|
+
function _(e, r, t, a, $, U) {
|
|
136
136
|
var o = t.ref;
|
|
137
137
|
return e = {
|
|
138
|
-
$$typeof:
|
|
138
|
+
$$typeof: R,
|
|
139
139
|
type: e,
|
|
140
140
|
key: r,
|
|
141
141
|
props: t,
|
|
142
142
|
_owner: a
|
|
143
143
|
}, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
|
|
144
144
|
enumerable: !1,
|
|
145
|
-
get:
|
|
145
|
+
get: k
|
|
146
146
|
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
147
147
|
configurable: !1,
|
|
148
148
|
enumerable: !1,
|
|
@@ -157,33 +157,33 @@ function ne() {
|
|
|
157
157
|
configurable: !1,
|
|
158
158
|
enumerable: !1,
|
|
159
159
|
writable: !0,
|
|
160
|
-
value:
|
|
160
|
+
value: $
|
|
161
161
|
}), Object.defineProperty(e, "_debugTask", {
|
|
162
162
|
configurable: !1,
|
|
163
163
|
enumerable: !1,
|
|
164
164
|
writable: !0,
|
|
165
|
-
value:
|
|
165
|
+
value: U
|
|
166
166
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
167
167
|
}
|
|
168
|
-
function
|
|
168
|
+
function v(e, r, t, a, $, U) {
|
|
169
169
|
var o = r.children;
|
|
170
170
|
if (o !== void 0)
|
|
171
171
|
if (a)
|
|
172
172
|
if (K(o)) {
|
|
173
173
|
for (a = 0; a < o.length; a++)
|
|
174
|
-
|
|
174
|
+
E(o[a]);
|
|
175
175
|
Object.freeze && Object.freeze(o);
|
|
176
176
|
} else
|
|
177
177
|
console.error(
|
|
178
178
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
179
179
|
);
|
|
180
|
-
else
|
|
181
|
-
if (
|
|
182
|
-
o =
|
|
183
|
-
var
|
|
180
|
+
else E(o);
|
|
181
|
+
if (W.call(r, "key")) {
|
|
182
|
+
o = c(e);
|
|
183
|
+
var w = Object.keys(r).filter(function(ee) {
|
|
184
184
|
return ee !== "key";
|
|
185
185
|
});
|
|
186
|
-
a = 0 <
|
|
186
|
+
a = 0 < w.length ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}", X[o + a] || (w = 0 < w.length ? "{" + w.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
187
187
|
`A props object containing a "key" prop is being spread into JSX:
|
|
188
188
|
let props = %s;
|
|
189
189
|
<%s {...props} />
|
|
@@ -192,90 +192,91 @@ React keys must be passed directly to JSX without using spread:
|
|
|
192
192
|
<%s key={someKey} {...props} />`,
|
|
193
193
|
a,
|
|
194
194
|
o,
|
|
195
|
-
|
|
195
|
+
w,
|
|
196
196
|
o
|
|
197
|
-
),
|
|
197
|
+
), X[o + a] = !0);
|
|
198
198
|
}
|
|
199
|
-
if (o = null, t !== void 0 && (
|
|
199
|
+
if (o = null, t !== void 0 && (g(t), o = "" + t), i(r) && (g(r.key), o = "" + r.key), "key" in r) {
|
|
200
200
|
t = {};
|
|
201
|
-
for (var
|
|
202
|
-
|
|
201
|
+
for (var q in r)
|
|
202
|
+
q !== "key" && (t[q] = r[q]);
|
|
203
203
|
} else t = r;
|
|
204
204
|
return o && x(
|
|
205
205
|
t,
|
|
206
206
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
207
|
-
),
|
|
207
|
+
), _(
|
|
208
208
|
e,
|
|
209
209
|
o,
|
|
210
210
|
t,
|
|
211
211
|
s(),
|
|
212
|
-
|
|
213
|
-
|
|
212
|
+
$,
|
|
213
|
+
U
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
|
-
function
|
|
217
|
-
|
|
216
|
+
function E(e) {
|
|
217
|
+
O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === d && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
218
|
}
|
|
219
|
-
function
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
219
|
+
function O(e) {
|
|
220
|
+
return typeof e == "object" && e !== null && e.$$typeof === R;
|
|
221
221
|
}
|
|
222
|
-
var
|
|
222
|
+
var h = Q, R = /* @__PURE__ */ Symbol.for("react.transitional.element"), Y = /* @__PURE__ */ Symbol.for("react.portal"), j = /* @__PURE__ */ Symbol.for("react.fragment"), A = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), F = /* @__PURE__ */ Symbol.for("react.consumer"), u = /* @__PURE__ */ Symbol.for("react.context"), l = /* @__PURE__ */ Symbol.for("react.forward_ref"), m = /* @__PURE__ */ Symbol.for("react.suspense"), y = /* @__PURE__ */ Symbol.for("react.suspense_list"), T = /* @__PURE__ */ Symbol.for("react.memo"), d = /* @__PURE__ */ Symbol.for("react.lazy"), C = /* @__PURE__ */ Symbol.for("react.activity"), I = /* @__PURE__ */ Symbol.for("react.client.reference"), M = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, K = Array.isArray, L = console.createTask ? console.createTask : function() {
|
|
223
223
|
return null;
|
|
224
224
|
};
|
|
225
|
-
|
|
225
|
+
h = {
|
|
226
226
|
react_stack_bottom_frame: function(e) {
|
|
227
227
|
return e();
|
|
228
228
|
}
|
|
229
229
|
};
|
|
230
|
-
var
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
)(),
|
|
234
|
-
|
|
235
|
-
var a = 1e4 >
|
|
236
|
-
return
|
|
230
|
+
var z, J = {}, V = h.react_stack_bottom_frame.bind(
|
|
231
|
+
h,
|
|
232
|
+
f
|
|
233
|
+
)(), G = L(p(f)), X = {};
|
|
234
|
+
N.Fragment = j, N.jsx = function(e, r, t) {
|
|
235
|
+
var a = 1e4 > M.recentlyCreatedOwnerStacks++;
|
|
236
|
+
return v(
|
|
237
237
|
e,
|
|
238
238
|
r,
|
|
239
239
|
t,
|
|
240
240
|
!1,
|
|
241
|
-
a ? Error("react-stack-top-frame") :
|
|
242
|
-
a ?
|
|
241
|
+
a ? Error("react-stack-top-frame") : V,
|
|
242
|
+
a ? L(p(e)) : G
|
|
243
243
|
);
|
|
244
|
-
},
|
|
245
|
-
var a = 1e4 >
|
|
246
|
-
return
|
|
244
|
+
}, N.jsxs = function(e, r, t) {
|
|
245
|
+
var a = 1e4 > M.recentlyCreatedOwnerStacks++;
|
|
246
|
+
return v(
|
|
247
247
|
e,
|
|
248
248
|
r,
|
|
249
249
|
t,
|
|
250
250
|
!0,
|
|
251
|
-
a ? Error("react-stack-top-frame") :
|
|
252
|
-
a ?
|
|
251
|
+
a ? Error("react-stack-top-frame") : V,
|
|
252
|
+
a ? L(p(e)) : G
|
|
253
253
|
);
|
|
254
254
|
};
|
|
255
|
-
})()),
|
|
255
|
+
})()), N;
|
|
256
256
|
}
|
|
257
|
-
var
|
|
257
|
+
var Z;
|
|
258
258
|
function ae() {
|
|
259
|
-
return
|
|
259
|
+
return Z || (Z = 1, process.env.NODE_ENV === "production" ? D.exports = te() : D.exports = ne()), D.exports;
|
|
260
260
|
}
|
|
261
261
|
var n = ae();
|
|
262
262
|
const oe = ({
|
|
263
|
-
fillingColor:
|
|
264
|
-
borderfillColor:
|
|
265
|
-
hoverborderColor:
|
|
263
|
+
fillingColor: c,
|
|
264
|
+
borderfillColor: b,
|
|
265
|
+
hoverborderColor: g,
|
|
266
266
|
cellBorderColor: p,
|
|
267
267
|
cellColor: s,
|
|
268
|
-
day:
|
|
269
|
-
isSelected:
|
|
268
|
+
day: f,
|
|
269
|
+
isSelected: i = !1,
|
|
270
|
+
cellShape: x
|
|
270
271
|
}) => {
|
|
271
|
-
const
|
|
272
|
+
const k = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
|
|
272
273
|
month: "long",
|
|
273
274
|
day: "numeric",
|
|
274
275
|
year: "numeric"
|
|
275
|
-
}), v =
|
|
276
|
+
}), _ = x === "square" ? "rounded-md" : "rounded-full", v = f === k, E = `
|
|
276
277
|
flex items-center justify-center
|
|
277
|
-
|
|
278
|
-
${!v && !
|
|
278
|
+
${_} border-2 transition-colors duration-150 hover:scale-150
|
|
279
|
+
${!v && !i && g ? "hover-border-var" : ""}
|
|
279
280
|
`;
|
|
280
281
|
return v ? /* @__PURE__ */ n.jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
|
|
281
282
|
/* @__PURE__ */ n.jsx(
|
|
@@ -290,14 +291,14 @@ const oe = ({
|
|
|
290
291
|
}
|
|
291
292
|
}
|
|
292
293
|
),
|
|
293
|
-
/* @__PURE__ */ n.jsx("div", { className:
|
|
294
|
+
/* @__PURE__ */ n.jsx("div", { className: `relative flex items-center justify-center w-4 h-4 ${_} p-[2px]`, children: /* @__PURE__ */ n.jsx(
|
|
294
295
|
"button",
|
|
295
296
|
{
|
|
296
297
|
type: "button",
|
|
297
298
|
className: "today-cell-btn flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150 hover:scale-150",
|
|
298
299
|
style: {
|
|
299
|
-
"--border-fill-color":
|
|
300
|
-
backgroundColor:
|
|
300
|
+
"--border-fill-color": i ? b : p,
|
|
301
|
+
backgroundColor: i ? c : s
|
|
301
302
|
}
|
|
302
303
|
}
|
|
303
304
|
) })
|
|
@@ -305,79 +306,83 @@ const oe = ({
|
|
|
305
306
|
"button",
|
|
306
307
|
{
|
|
307
308
|
type: "button",
|
|
308
|
-
className: `${
|
|
309
|
-
style:
|
|
310
|
-
backgroundColor:
|
|
311
|
-
borderColor:
|
|
312
|
-
"--hover-border-color":
|
|
309
|
+
className: `${E} w-4 h-4`,
|
|
310
|
+
style: i && !v ? {
|
|
311
|
+
backgroundColor: c,
|
|
312
|
+
borderColor: b,
|
|
313
|
+
"--hover-border-color": g
|
|
313
314
|
} : v ? void 0 : {
|
|
314
315
|
backgroundColor: s,
|
|
315
316
|
"--border-color": p,
|
|
316
|
-
"--hover-border-color":
|
|
317
|
+
"--hover-border-color": g
|
|
317
318
|
}
|
|
318
319
|
}
|
|
319
320
|
);
|
|
320
321
|
}, se = ({
|
|
321
|
-
fillingColor:
|
|
322
|
-
borderfillColor:
|
|
323
|
-
hoverborderColor:
|
|
322
|
+
fillingColor: c = "#50C878",
|
|
323
|
+
borderfillColor: b = "#27592D",
|
|
324
|
+
hoverborderColor: g = "#FFCCCB",
|
|
324
325
|
cellBorderColor: p = "#808080",
|
|
325
326
|
cellColor: s = "#ADADAD",
|
|
326
|
-
legend:
|
|
327
|
-
mainBorder:
|
|
327
|
+
legend: f = !0,
|
|
328
|
+
mainBorder: i = !0,
|
|
328
329
|
borderColor: x = "#708090",
|
|
329
|
-
textColor:
|
|
330
|
-
selectedDates:
|
|
331
|
-
title:
|
|
330
|
+
textColor: k = "#708090",
|
|
331
|
+
selectedDates: _ = [],
|
|
332
|
+
title: v = "Calendar",
|
|
333
|
+
cellShape: E = "square",
|
|
334
|
+
column: O = 15,
|
|
335
|
+
legendColumn: h = !1
|
|
332
336
|
}) => {
|
|
333
|
-
const
|
|
334
|
-
const
|
|
335
|
-
if (!
|
|
336
|
-
if (typeof
|
|
337
|
-
const
|
|
338
|
-
if (
|
|
339
|
-
const
|
|
340
|
-
return `${
|
|
337
|
+
const R = /* @__PURE__ */ new Date(), Y = Q.useMemo(() => {
|
|
338
|
+
const u = (l) => {
|
|
339
|
+
if (!l) return "";
|
|
340
|
+
if (typeof l == "string") {
|
|
341
|
+
const m = l.split("-");
|
|
342
|
+
if (m.length === 3) {
|
|
343
|
+
const y = m[0], T = String(Number(m[1])).padStart(2, "0"), d = String(Number(m[2])).padStart(2, "0");
|
|
344
|
+
return `${y}-${T}-${d}`;
|
|
341
345
|
}
|
|
342
|
-
return
|
|
346
|
+
return l;
|
|
343
347
|
}
|
|
344
|
-
return typeof
|
|
348
|
+
return typeof l == "object" && l.day ? u(l.day) : "";
|
|
345
349
|
};
|
|
346
350
|
return new Set(
|
|
347
|
-
(
|
|
351
|
+
(_ || []).map((l) => u(l)).filter(Boolean)
|
|
348
352
|
);
|
|
349
|
-
}, [
|
|
350
|
-
const
|
|
351
|
-
for (;
|
|
352
|
-
const
|
|
353
|
-
|
|
354
|
-
).padStart(2, "0")}`,
|
|
355
|
-
|
|
356
|
-
key:
|
|
357
|
-
isSelected:
|
|
353
|
+
}, [_]), j = re(() => {
|
|
354
|
+
const u = R.getFullYear(), l = R.getMonth(), m = new Date(u, l - 1, 1), y = new Date(u, l + 2, 0), T = [], d = new Date(m);
|
|
355
|
+
for (; d <= y; ) {
|
|
356
|
+
const C = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
|
|
357
|
+
d.getDate()
|
|
358
|
+
).padStart(2, "0")}`, I = Y.has(C);
|
|
359
|
+
T.push({
|
|
360
|
+
key: C,
|
|
361
|
+
isSelected: I,
|
|
358
362
|
// keep a Date copy in case you want to use it later
|
|
359
|
-
dateObj: new Date(
|
|
360
|
-
}),
|
|
363
|
+
dateObj: new Date(d)
|
|
364
|
+
}), d.setDate(d.getDate() + 1);
|
|
361
365
|
}
|
|
362
|
-
return
|
|
363
|
-
}, [
|
|
364
|
-
for (let
|
|
365
|
-
|
|
366
|
+
return T;
|
|
367
|
+
}, [_, R]), A = [], P = O;
|
|
368
|
+
for (let u = 0; u < j.length; u += P)
|
|
369
|
+
A.push(j.slice(u, u + P));
|
|
370
|
+
const F = E === "square" ? "rounded-md" : "rounded-full";
|
|
366
371
|
return /* @__PURE__ */ n.jsxs(
|
|
367
372
|
"div",
|
|
368
373
|
{
|
|
369
|
-
className: `inline-flex flex-col gap-2 p-3 rounded-xl ${
|
|
374
|
+
className: `inline-flex flex-col gap-2 p-3 rounded-xl ${i ? "border shadow-sm" : ""} `,
|
|
370
375
|
style: {
|
|
371
|
-
borderColor:
|
|
376
|
+
borderColor: i ? x : void 0
|
|
372
377
|
},
|
|
373
378
|
children: [
|
|
374
|
-
|
|
379
|
+
f && /* @__PURE__ */ n.jsxs(
|
|
375
380
|
"div",
|
|
376
381
|
{
|
|
377
|
-
className: "flex justify-between
|
|
378
|
-
style: { color:
|
|
382
|
+
className: `flex ${h ? "flex-col items-start" : "justify-between"} text-sm`,
|
|
383
|
+
style: { color: k },
|
|
379
384
|
children: [
|
|
380
|
-
/* @__PURE__ */ n.jsx("strong", { children:
|
|
385
|
+
/* @__PURE__ */ n.jsx("strong", { children: v }),
|
|
381
386
|
/* @__PURE__ */ n.jsxs("div", { className: "flex items-center gap-2 font-semibold", children: [
|
|
382
387
|
/* @__PURE__ */ n.jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
|
|
383
388
|
/* @__PURE__ */ n.jsx(
|
|
@@ -398,7 +403,7 @@ const oe = ({
|
|
|
398
403
|
type: "button",
|
|
399
404
|
className: "flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150",
|
|
400
405
|
style: {
|
|
401
|
-
"--border-fill-color":
|
|
406
|
+
"--border-fill-color": b,
|
|
402
407
|
backgroundColor: s
|
|
403
408
|
}
|
|
404
409
|
}
|
|
@@ -411,10 +416,10 @@ const oe = ({
|
|
|
411
416
|
"button",
|
|
412
417
|
{
|
|
413
418
|
type: "button",
|
|
414
|
-
className:
|
|
419
|
+
className: `flex items-center justify-center w-4 h-4 ${F} border-2 border-emerald-600 transition-colors duration-150`,
|
|
415
420
|
style: {
|
|
416
|
-
backgroundColor:
|
|
417
|
-
borderColor:
|
|
421
|
+
backgroundColor: c,
|
|
422
|
+
borderColor: b
|
|
418
423
|
}
|
|
419
424
|
}
|
|
420
425
|
),
|
|
@@ -423,8 +428,8 @@ const oe = ({
|
|
|
423
428
|
]
|
|
424
429
|
}
|
|
425
430
|
),
|
|
426
|
-
/* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-1", children:
|
|
427
|
-
const
|
|
431
|
+
/* @__PURE__ */ n.jsx("div", { className: "flex flex-col gap-1", children: A.map((u, l) => /* @__PURE__ */ n.jsx("div", { className: "flex gap-1", children: u.map((m) => {
|
|
432
|
+
const y = m.dateObj.toLocaleDateString("en-US", {
|
|
428
433
|
month: "long",
|
|
429
434
|
day: "numeric",
|
|
430
435
|
year: "numeric"
|
|
@@ -433,27 +438,28 @@ const oe = ({
|
|
|
433
438
|
"div",
|
|
434
439
|
{
|
|
435
440
|
className: "tooltip tooltip-top",
|
|
436
|
-
"data-tip":
|
|
441
|
+
"data-tip": y,
|
|
437
442
|
children: /* @__PURE__ */ n.jsx(
|
|
438
443
|
oe,
|
|
439
444
|
{
|
|
440
|
-
fillingColor:
|
|
441
|
-
borderfillColor:
|
|
442
|
-
hoverborderColor:
|
|
445
|
+
fillingColor: c,
|
|
446
|
+
borderfillColor: b,
|
|
447
|
+
hoverborderColor: g,
|
|
443
448
|
cellBorderColor: p,
|
|
444
449
|
cellColor: s,
|
|
445
|
-
isSelected:
|
|
446
|
-
day:
|
|
450
|
+
isSelected: m.isSelected,
|
|
451
|
+
day: y,
|
|
452
|
+
cellShape: E
|
|
447
453
|
}
|
|
448
454
|
)
|
|
449
455
|
},
|
|
450
|
-
|
|
456
|
+
m.key
|
|
451
457
|
);
|
|
452
|
-
}) },
|
|
458
|
+
}) }, l)) })
|
|
453
459
|
]
|
|
454
460
|
}
|
|
455
461
|
);
|
|
456
|
-
}, ce = (
|
|
462
|
+
}, ce = (c) => /* @__PURE__ */ n.jsx(se, { ...c });
|
|
457
463
|
export {
|
|
458
464
|
se as Calendar,
|
|
459
465
|
ce as default
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(y,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],h):(y=typeof globalThis<"u"?globalThis:y||self,h(y.FillCalendar={},y.React))})(this,(function(y,h){"use strict";var P={exports:{}},N={};var J;function re(){if(J)return N;J=1;var f=Symbol.for("react.transitional.element"),b=Symbol.for("react.fragment");function g(p,s,c){var i=null;if(c!==void 0&&(i=""+c),s.key!==void 0&&(i=""+s.key),"key"in s){c={};for(var x in s)x!=="key"&&(c[x]=s[x])}else c=s;return s=c.ref,{$$typeof:f,type:p,key:i,ref:s!==void 0?s:null,props:c}}return N.Fragment=b,N.jsx=g,N.jsxs=g,N}var O={};var V;function te(){return V||(V=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===L?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case w:return"Fragment";case $:return"Profiler";case D:return"StrictMode";case m:return"Suspense";case E:return"SuspenseList";case Y:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case M:return"Portal";case u:return e.displayName||"Context";case I:return(e._context.displayName||"Context")+".Consumer";case l:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case S:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case d:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function b(e){return""+e}function g(e){try{b(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),b(e)}}function p(e){if(e===w)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===d)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function s(){var e=U.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function i(e){if(B.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function x(e,r){function n(){H||(H=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function A(){var e=f(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,r,n,a,F,q){var o=n.ref;return e={$$typeof:T,type:e,key:r,props:n,_owner:a},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:A}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:F}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function v(e,r,n,a,F,q){var o=r.children;if(o!==void 0)if(a)if(se(o)){for(a=0;a<o.length;a++)j(o[a]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else j(o);if(B.call(r,"key")){o=f(e);var k=Object.keys(r).filter(function(le){return le!=="key"});a=0<k.length?"{key: someKey, "+k.join(": ..., ")+": ...}":"{key: someKey}",ee[o+a]||(k=0<k.length?"{"+k.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,a,o,
|
|
6
|
+
<%s key={someKey} {...props} />`,a,o,k,o),ee[o+a]=!0)}if(o=null,n!==void 0&&(g(n),o=""+n),i(r)&&(g(r.key),o=""+r.key),"key"in r){n={};for(var z in r)z!=="key"&&(n[z]=r[z])}else n=r;return o&&x(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,o,n,s(),F,q)}function j(e){C(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===d&&(e._payload.status==="fulfilled"?C(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function C(e){return typeof e=="object"&&e!==null&&e.$$typeof===T}var R=h,T=Symbol.for("react.transitional.element"),M=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),$=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),u=Symbol.for("react.context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),E=Symbol.for("react.suspense_list"),S=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),Y=Symbol.for("react.activity"),L=Symbol.for("react.client.reference"),U=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,se=Array.isArray,W=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=R.react_stack_bottom_frame.bind(R,c)(),K=W(p(c)),ee={};O.Fragment=w,O.jsx=function(e,r,n){var a=1e4>U.recentlyCreatedOwnerStacks++;return v(e,r,n,!1,a?Error("react-stack-top-frame"):Q,a?W(p(e)):K)},O.jsxs=function(e,r,n){var a=1e4>U.recentlyCreatedOwnerStacks++;return v(e,r,n,!0,a?Error("react-stack-top-frame"):Q,a?W(p(e)):K)}})()),O}var G;function ne(){return G||(G=1,process.env.NODE_ENV==="production"?P.exports=re():P.exports=te()),P.exports}var t=ne();const ae=({fillingColor:f,borderfillColor:b,hoverborderColor:g,cellBorderColor:p,cellColor:s,day:c,isSelected:i=!1,cellShape:x})=>{const A=new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),_=x==="square"?"rounded-md":"rounded-full",v=c===A,j=`
|
|
7
7
|
flex items-center justify-center
|
|
8
|
-
|
|
9
|
-
${!
|
|
10
|
-
`;return
|
|
8
|
+
${_} border-2 transition-colors duration-150 hover:scale-150
|
|
9
|
+
${!v&&!i&&g?"hover-border-var":""}
|
|
10
|
+
`;return v?t.jsxs("div",{className:"relative flex items-center justify-center w-4 h-4",children:[t.jsx("div",{className:"absolute inset-0 rounded-md rainbow-spin",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"0.5rem"}}),t.jsx("div",{className:`relative flex items-center justify-center w-4 h-4 ${_} p-[2px]`,children:t.jsx("button",{type:"button",className:"today-cell-btn flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150 hover:scale-150",style:{"--border-fill-color":i?b:p,backgroundColor:i?f:s}})})]}):t.jsx("button",{type:"button",className:`${j} w-4 h-4`,style:i&&!v?{backgroundColor:f,borderColor:b,"--hover-border-color":g}:v?void 0:{backgroundColor:s,"--border-color":p,"--hover-border-color":g}})},X=({fillingColor:f="#50C878",borderfillColor:b="#27592D",hoverborderColor:g="#FFCCCB",cellBorderColor:p="#808080",cellColor:s="#ADADAD",legend:c=!0,mainBorder:i=!0,borderColor:x="#708090",textColor:A="#708090",selectedDates:_=[],title:v="Calendar",cellShape:j="square",column:C=15,legendColumn:R=!1})=>{const T=new Date,M=h.useMemo(()=>{const u=l=>{if(!l)return"";if(typeof l=="string"){const m=l.split("-");if(m.length===3){const E=m[0],S=String(Number(m[1])).padStart(2,"0"),d=String(Number(m[2])).padStart(2,"0");return`${E}-${S}-${d}`}return l}return typeof l=="object"&&l.day?u(l.day):""};return new Set((_||[]).map(l=>u(l)).filter(Boolean))},[_]),w=h.useMemo(()=>{const u=T.getFullYear(),l=T.getMonth(),m=new Date(u,l-1,1),E=new Date(u,l+2,0),S=[],d=new Date(m);for(;d<=E;){const Y=`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`,L=M.has(Y);S.push({key:Y,isSelected:L,dateObj:new Date(d)}),d.setDate(d.getDate()+1)}return S},[_,T]),D=[],$=C;for(let u=0;u<w.length;u+=$)D.push(w.slice(u,u+$));const I=j==="square"?"rounded-md":"rounded-full";return t.jsxs("div",{className:`inline-flex flex-col gap-2 p-3 rounded-xl ${i?"border shadow-sm":""} `,style:{borderColor:i?x:void 0},children:[c&&t.jsxs("div",{className:`flex ${R?"flex-col items-start":"justify-between"} text-sm`,style:{color:A},children:[t.jsx("strong",{children:v}),t.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[t.jsxs("div",{className:"relative flex items-center justify-center w-4 h-4",children:[t.jsx("div",{className:"absolute inset-0 rounded-md rainbow-spin",style:{background:"conic-gradient(from 0deg, #ff0000 0deg, #ff4000 20deg, #ff8000 40deg, #ffbf00 60deg, #ffff00 80deg, #bfff00 100deg, #80ff00 120deg, #40ff00 140deg, #00ff00 160deg, #00ff40 180deg, #00ff80 200deg, #00ffbf 220deg, #00ffff 240deg, #00bfff 260deg, #0080ff 280deg, #0040ff 300deg, #0000ff 320deg, #4000ff 340deg, #8000ff 360deg)",padding:"2px",boxShadow:"0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",borderRadius:"0.5rem"}}),t.jsx("div",{className:"relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]",children:t.jsx("button",{type:"button",className:"flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150",style:{"--border-fill-color":b,backgroundColor:s}})})]}),t.jsx("span",{children:"Today"})]}),t.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[t.jsx("button",{type:"button",className:`flex items-center justify-center w-4 h-4 ${I} border-2 border-emerald-600 transition-colors duration-150`,style:{backgroundColor:f,borderColor:b}}),t.jsx("span",{children:"Completed"})]})]}),t.jsx("div",{className:"flex flex-col gap-1",children:D.map((u,l)=>t.jsx("div",{className:"flex gap-1",children:u.map(m=>{const E=m.dateObj.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"});return t.jsx("div",{className:"tooltip tooltip-top","data-tip":E,children:t.jsx(ae,{fillingColor:f,borderfillColor:b,hoverborderColor:g,cellBorderColor:p,cellColor:s,isSelected:m.isSelected,day:E,cellShape:j})},m.key)})},l))})]})},oe=f=>t.jsx(X,{...f});y.Calendar=X,y.default=oe,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-fill-calendar",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"description": "Fill dates on a calendar displaying boxes for dates. Customize colors and borders. Perfect for habit tracking or event marking in React applications.",
|
|
5
5
|
"main": "dist/index.umd.cjs",
|
|
6
6
|
"module": "dist/index.js",
|
package/readme.md
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
|
|
4
3
|
|
|
5
4
|
# React Filled Calendar
|
|
6
5
|
|
|
@@ -24,9 +23,15 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
24
23
|
|
|
25
24
|
### Example
|
|
26
25
|
|
|
27
|
-
<div style="display: flex; justify-content:
|
|
26
|
+
<div style="display: flex; gap: 20px; justify-content: center;">
|
|
27
|
+
<div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar.png?raw=true" width="300" alt='image of component'/>
|
|
28
|
+
</div>
|
|
29
|
+
<div style="display: flex; justify-content: space-around"> <img src="https://github.com/apmanager001/react-fill-calendar/blob/main/assets/calendar2.png?raw=true" width="300" alt='image of component'/>
|
|
30
|
+
</div>
|
|
28
31
|
</div>
|
|
29
32
|
|
|
33
|
+
|
|
34
|
+
|
|
30
35
|
```
|
|
31
36
|
import Calendar from 'react-fill-calendar'
|
|
32
37
|
|
|
@@ -67,14 +72,19 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
67
72
|
|
|
68
73
|
## Props
|
|
69
74
|
|
|
70
|
-
| Prop | Type | Required | Default | Description |
|
|
71
|
-
|
|
72
|
-
| `fillingColor` | `string` | No | `"#50C878"` | Background color used to fill selected or marked dates. |
|
|
73
|
-
| `borderfillColor` | `string` | No | `"#27592D"` | Border color applied to filled date cells. |
|
|
74
|
-
| `title` | `string` | No | `"Calendar"` | Title displayed above the calendar. |
|
|
75
|
-
| `hoverborderColor` | `string` | No | `"#FFCCCB"` | Border color applied when hovering over a date cell. |
|
|
76
|
-
| `cellColor` | `string` | No | `"#ADADAD"` | Background color for unfilled date cells. |
|
|
77
|
-
| `cellBorderColor` | `string` | No | `"#808080"` | Border color for unfilled date cells. |
|
|
78
|
-
|
|
|
79
|
-
|
|
|
80
|
-
| `
|
|
75
|
+
| Prop | Type | Required | Default | Options | Description |
|
|
76
|
+
|-------------------|------------|----------|-------------|------------------------|-------------|
|
|
77
|
+
| `fillingColor` | `string` | No | `"#50C878"` | — | Background color used to fill selected or marked dates. |
|
|
78
|
+
| `borderfillColor` | `string` | No | `"#27592D"` | — | Border color applied to filled date cells. |
|
|
79
|
+
| `title` | `string` | No | `"Calendar"` | — | Title displayed above the calendar. |
|
|
80
|
+
| `hoverborderColor` | `string` | No | `"#FFCCCB"` | — | Border color applied when hovering over a date cell. |
|
|
81
|
+
| `cellColor` | `string` | No | `"#ADADAD"` | — | Background color for unfilled date cells. |
|
|
82
|
+
| `cellBorderColor` | `string` | No | `"#808080"` | — | Border color for unfilled date cells. |
|
|
83
|
+
| `mainBorder` | `boolean` | No | `true` | — | Removes border and shadow for the calendar. |
|
|
84
|
+
| `borderColor` | `string` | No | `"#708090"` | — | Changes color of the calendar border. |
|
|
85
|
+
| `text color` | `string` | No | `"#708090"` | — | Changes color of text in legend. |
|
|
86
|
+
| `selectedDates` | `array` | No | `[]` | — | Array of dates passed to fill in the cooresponding cell. Currently it requires an object for each day with "day" as the key as shown in example. The format of the day should be yyyy-mm-dd as a string |
|
|
87
|
+
| `cellShape` | `string` | No | `"square"` | `"square"`, `"circle"` | Shape of each calendar cell. |
|
|
88
|
+
| `column` | `number` | No | `15` | — | Number of cells in each row |
|
|
89
|
+
| `legendColumn` | `boolean` | No | `false` | — | Changes orientation of legend from row to column |
|
|
90
|
+
| `legend` | `boolean` | No | `true` | — | Toggles the display of the legend explaining filled vs. unfilled dates. |
|