react-fill-calendar 0.2.4 → 0.2.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.css +1 -1
- package/dist/index.js +257 -230
- package/dist/index.umd.cjs +6 -2
- package/package.json +56 -48
- package/readme.md +35 -99
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
.today-cell-btn:hover{border-color:var(--border-fill-color)}.hover-border-var:hover{border-color:var(--hover-border-color)}.hover-border-var{border-color:var(--border-color, transparent)}.today-cell-btn{border-color:transparent}@keyframes rainbow-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rainbow-spin{animation:rainbow-spin 4s linear infinite}
|
package/dist/index.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import re, { useMemo as B } from "react";
|
|
2
|
-
var
|
|
2
|
+
var I = { exports: {} }, C = {};
|
|
3
3
|
var H;
|
|
4
4
|
function te() {
|
|
5
|
-
if (H) return
|
|
5
|
+
if (H) return C;
|
|
6
6
|
H = 1;
|
|
7
|
-
var
|
|
8
|
-
function
|
|
7
|
+
var c = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
|
+
function b(v, l, i) {
|
|
9
9
|
var d = null;
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
for (var
|
|
13
|
-
|
|
14
|
-
} else
|
|
15
|
-
return
|
|
16
|
-
$$typeof:
|
|
17
|
-
type:
|
|
10
|
+
if (i !== void 0 && (d = "" + i), l.key !== void 0 && (d = "" + l.key), "key" in l) {
|
|
11
|
+
i = {};
|
|
12
|
+
for (var y in l)
|
|
13
|
+
y !== "key" && (i[y] = l[y]);
|
|
14
|
+
} else i = l;
|
|
15
|
+
return l = i.ref, {
|
|
16
|
+
$$typeof: c,
|
|
17
|
+
type: v,
|
|
18
18
|
key: d,
|
|
19
|
-
ref:
|
|
20
|
-
props:
|
|
19
|
+
ref: l !== void 0 ? l : null,
|
|
20
|
+
props: i
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return C.Fragment = m, C.jsx = b, C.jsxs = b, C;
|
|
24
24
|
}
|
|
25
|
-
var
|
|
25
|
+
var D = {};
|
|
26
26
|
var Z;
|
|
27
27
|
function ne() {
|
|
28
28
|
return Z || (Z = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
-
function
|
|
29
|
+
function c(e) {
|
|
30
30
|
if (e == null) return null;
|
|
31
31
|
if (typeof e == "function")
|
|
32
32
|
return e.$$typeof === T ? null : e.displayName || e.name || null;
|
|
@@ -36,13 +36,13 @@ function ne() {
|
|
|
36
36
|
return "Fragment";
|
|
37
37
|
case P:
|
|
38
38
|
return "Profiler";
|
|
39
|
-
case
|
|
39
|
+
case p:
|
|
40
40
|
return "StrictMode";
|
|
41
|
-
case
|
|
41
|
+
case j:
|
|
42
42
|
return "Suspense";
|
|
43
|
-
case
|
|
43
|
+
case g:
|
|
44
44
|
return "SuspenseList";
|
|
45
|
-
case
|
|
45
|
+
case x:
|
|
46
46
|
return "Activity";
|
|
47
47
|
}
|
|
48
48
|
if (typeof e == "object")
|
|
@@ -51,60 +51,60 @@ function ne() {
|
|
|
51
51
|
), e.$$typeof) {
|
|
52
52
|
case O:
|
|
53
53
|
return "Portal";
|
|
54
|
-
case
|
|
54
|
+
case L:
|
|
55
55
|
return e.displayName || "Context";
|
|
56
|
-
case
|
|
56
|
+
case Y:
|
|
57
57
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
58
|
-
case
|
|
58
|
+
case f:
|
|
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 u:
|
|
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 m(e) {
|
|
73
73
|
return "" + e;
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function b(e) {
|
|
76
76
|
try {
|
|
77
|
-
|
|
77
|
+
m(e);
|
|
78
78
|
var r = !1;
|
|
79
79
|
} catch {
|
|
80
80
|
r = !0;
|
|
81
81
|
}
|
|
82
82
|
if (r) {
|
|
83
83
|
r = console;
|
|
84
|
-
var
|
|
85
|
-
return
|
|
84
|
+
var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
85
|
+
return n.call(
|
|
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
|
-
|
|
89
|
-
),
|
|
88
|
+
o
|
|
89
|
+
), m(e);
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
|
-
function
|
|
92
|
+
function v(e) {
|
|
93
93
|
if (e === A) return "<>";
|
|
94
|
-
if (typeof e == "object" && e !== null && e.$$typeof ===
|
|
94
|
+
if (typeof e == "object" && e !== null && e.$$typeof === u)
|
|
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
|
-
function
|
|
104
|
-
var e =
|
|
103
|
+
function l() {
|
|
104
|
+
var e = k.A;
|
|
105
105
|
return e === null ? null : e.getOwner();
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function i() {
|
|
108
108
|
return Error("react-stack-top-frame");
|
|
109
109
|
}
|
|
110
110
|
function d(e) {
|
|
@@ -114,32 +114,32 @@ function ne() {
|
|
|
114
114
|
}
|
|
115
115
|
return e.key !== void 0;
|
|
116
116
|
}
|
|
117
|
-
function
|
|
118
|
-
function
|
|
117
|
+
function y(e, r) {
|
|
118
|
+
function n() {
|
|
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
|
));
|
|
123
123
|
}
|
|
124
|
-
|
|
125
|
-
get:
|
|
124
|
+
n.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
125
|
+
get: n,
|
|
126
126
|
configurable: !0
|
|
127
127
|
});
|
|
128
128
|
}
|
|
129
129
|
function S() {
|
|
130
|
-
var e =
|
|
130
|
+
var e = c(this.type);
|
|
131
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
|
|
136
|
-
var s =
|
|
135
|
+
function R(e, r, n, o, M, q) {
|
|
136
|
+
var s = n.ref;
|
|
137
137
|
return e = {
|
|
138
|
-
$$typeof:
|
|
138
|
+
$$typeof: E,
|
|
139
139
|
type: e,
|
|
140
140
|
key: r,
|
|
141
|
-
props:
|
|
142
|
-
_owner:
|
|
141
|
+
props: n,
|
|
142
|
+
_owner: o
|
|
143
143
|
}, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
|
|
144
144
|
enumerable: !1,
|
|
145
145
|
get: S
|
|
@@ -157,21 +157,21 @@ function ne() {
|
|
|
157
157
|
configurable: !1,
|
|
158
158
|
enumerable: !1,
|
|
159
159
|
writable: !0,
|
|
160
|
-
value:
|
|
160
|
+
value: M
|
|
161
161
|
}), Object.defineProperty(e, "_debugTask", {
|
|
162
162
|
configurable: !1,
|
|
163
163
|
enumerable: !1,
|
|
164
164
|
writable: !0,
|
|
165
|
-
value:
|
|
165
|
+
value: q
|
|
166
166
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
167
167
|
}
|
|
168
|
-
function w(e, r,
|
|
168
|
+
function w(e, r, n, o, M, q) {
|
|
169
169
|
var s = r.children;
|
|
170
170
|
if (s !== void 0)
|
|
171
|
-
if (
|
|
171
|
+
if (o)
|
|
172
172
|
if (K(s)) {
|
|
173
|
-
for (
|
|
174
|
-
h(s[
|
|
173
|
+
for (o = 0; o < s.length; o++)
|
|
174
|
+
h(s[o]);
|
|
175
175
|
Object.freeze && Object.freeze(s);
|
|
176
176
|
} else
|
|
177
177
|
console.error(
|
|
@@ -179,278 +179,305 @@ function ne() {
|
|
|
179
179
|
);
|
|
180
180
|
else h(s);
|
|
181
181
|
if (F.call(r, "key")) {
|
|
182
|
-
s =
|
|
182
|
+
s = c(e);
|
|
183
183
|
var $ = Object.keys(r).filter(function(ee) {
|
|
184
184
|
return ee !== "key";
|
|
185
185
|
});
|
|
186
|
-
|
|
186
|
+
o = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", X[s + o] || ($ = 0 < $.length ? "{" + $.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} />
|
|
190
190
|
React keys must be passed directly to JSX without using spread:
|
|
191
191
|
let props = %s;
|
|
192
192
|
<%s key={someKey} {...props} />`,
|
|
193
|
-
|
|
193
|
+
o,
|
|
194
194
|
s,
|
|
195
195
|
$,
|
|
196
196
|
s
|
|
197
|
-
), X[s +
|
|
197
|
+
), X[s + o] = !0);
|
|
198
198
|
}
|
|
199
|
-
if (s = null,
|
|
200
|
-
|
|
199
|
+
if (s = null, n !== void 0 && (b(n), s = "" + n), d(r) && (b(r.key), s = "" + r.key), "key" in r) {
|
|
200
|
+
n = {};
|
|
201
201
|
for (var W in r)
|
|
202
|
-
W !== "key" && (
|
|
203
|
-
} else
|
|
204
|
-
return s &&
|
|
205
|
-
|
|
202
|
+
W !== "key" && (n[W] = r[W]);
|
|
203
|
+
} else n = r;
|
|
204
|
+
return s && y(
|
|
205
|
+
n,
|
|
206
206
|
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
207
|
-
),
|
|
207
|
+
), R(
|
|
208
208
|
e,
|
|
209
209
|
s,
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
210
|
+
n,
|
|
211
|
+
l(),
|
|
212
|
+
M,
|
|
213
|
+
q
|
|
214
214
|
);
|
|
215
215
|
}
|
|
216
216
|
function h(e) {
|
|
217
|
-
N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof ===
|
|
217
|
+
N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === u && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
218
|
}
|
|
219
219
|
function N(e) {
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
220
|
+
return typeof e == "object" && e !== null && e.$$typeof === E;
|
|
221
221
|
}
|
|
222
|
-
var
|
|
222
|
+
var _ = re, E = /* @__PURE__ */ Symbol.for("react.transitional.element"), O = /* @__PURE__ */ Symbol.for("react.portal"), A = /* @__PURE__ */ Symbol.for("react.fragment"), p = /* @__PURE__ */ Symbol.for("react.strict_mode"), P = /* @__PURE__ */ Symbol.for("react.profiler"), Y = /* @__PURE__ */ Symbol.for("react.consumer"), L = /* @__PURE__ */ Symbol.for("react.context"), f = /* @__PURE__ */ Symbol.for("react.forward_ref"), j = /* @__PURE__ */ Symbol.for("react.suspense"), g = /* @__PURE__ */ Symbol.for("react.suspense_list"), t = /* @__PURE__ */ Symbol.for("react.memo"), u = /* @__PURE__ */ Symbol.for("react.lazy"), x = /* @__PURE__ */ Symbol.for("react.activity"), T = /* @__PURE__ */ Symbol.for("react.client.reference"), k = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, K = Array.isArray, U = console.createTask ? console.createTask : function() {
|
|
223
223
|
return null;
|
|
224
224
|
};
|
|
225
|
-
|
|
225
|
+
_ = {
|
|
226
226
|
react_stack_bottom_frame: function(e) {
|
|
227
227
|
return e();
|
|
228
228
|
}
|
|
229
229
|
};
|
|
230
|
-
var z, J = {}, V =
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
)(), G =
|
|
234
|
-
|
|
235
|
-
var
|
|
230
|
+
var z, J = {}, V = _.react_stack_bottom_frame.bind(
|
|
231
|
+
_,
|
|
232
|
+
i
|
|
233
|
+
)(), G = U(v(i)), X = {};
|
|
234
|
+
D.Fragment = A, D.jsx = function(e, r, n) {
|
|
235
|
+
var o = 1e4 > k.recentlyCreatedOwnerStacks++;
|
|
236
236
|
return w(
|
|
237
237
|
e,
|
|
238
238
|
r,
|
|
239
|
-
|
|
239
|
+
n,
|
|
240
240
|
!1,
|
|
241
|
-
|
|
242
|
-
|
|
241
|
+
o ? Error("react-stack-top-frame") : V,
|
|
242
|
+
o ? U(v(e)) : G
|
|
243
243
|
);
|
|
244
|
-
},
|
|
245
|
-
var
|
|
244
|
+
}, D.jsxs = function(e, r, n) {
|
|
245
|
+
var o = 1e4 > k.recentlyCreatedOwnerStacks++;
|
|
246
246
|
return w(
|
|
247
247
|
e,
|
|
248
248
|
r,
|
|
249
|
-
|
|
249
|
+
n,
|
|
250
250
|
!0,
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
o ? Error("react-stack-top-frame") : V,
|
|
252
|
+
o ? U(v(e)) : G
|
|
253
253
|
);
|
|
254
254
|
};
|
|
255
|
-
})()),
|
|
255
|
+
})()), D;
|
|
256
256
|
}
|
|
257
257
|
var Q;
|
|
258
|
-
function
|
|
259
|
-
return Q || (Q = 1, process.env.NODE_ENV === "production" ?
|
|
258
|
+
function ae() {
|
|
259
|
+
return Q || (Q = 1, process.env.NODE_ENV === "production" ? I.exports = te() : I.exports = ne()), I.exports;
|
|
260
260
|
}
|
|
261
|
-
var
|
|
262
|
-
const
|
|
263
|
-
fillingColor:
|
|
264
|
-
borderfillColor:
|
|
265
|
-
hoverborderColor:
|
|
266
|
-
cellBorderColor:
|
|
267
|
-
cellColor:
|
|
268
|
-
day:
|
|
261
|
+
var a = ae();
|
|
262
|
+
const oe = ({
|
|
263
|
+
fillingColor: c,
|
|
264
|
+
borderfillColor: m,
|
|
265
|
+
hoverborderColor: b,
|
|
266
|
+
cellBorderColor: v,
|
|
267
|
+
cellColor: l,
|
|
268
|
+
day: i,
|
|
269
269
|
isSelected: d = !1,
|
|
270
|
-
cellShape:
|
|
270
|
+
cellShape: y,
|
|
271
271
|
href: S
|
|
272
272
|
}) => {
|
|
273
|
-
const
|
|
273
|
+
const R = (/* @__PURE__ */ new Date()).toLocaleDateString("en-US", {
|
|
274
274
|
month: "long",
|
|
275
275
|
day: "numeric",
|
|
276
276
|
year: "numeric"
|
|
277
|
-
}), w =
|
|
277
|
+
}), w = y === "square" ? "rounded-md" : "rounded-full", h = i === R, N = `
|
|
278
|
+
flex items-center justify-center
|
|
279
|
+
${w} border-2 transition-colors duration-150 hover:scale-150
|
|
280
|
+
${!h && !d && b ? "hover-border-var" : ""}
|
|
281
|
+
`, _ = !!(S && d), E = (p = "", P) => /* @__PURE__ */ a.jsx(
|
|
278
282
|
"button",
|
|
279
283
|
{
|
|
280
284
|
type: "button",
|
|
281
|
-
className: `${N} ${
|
|
285
|
+
className: `${N} ${p} ${_ ? "cursor-pointer" : ""}`,
|
|
282
286
|
style: P
|
|
283
287
|
}
|
|
284
|
-
), O = (
|
|
288
|
+
), O = (p) => _ ? /* @__PURE__ */ a.jsx("a", { href: S, className: "contents", children: p }) : p;
|
|
285
289
|
if (h) {
|
|
286
|
-
const
|
|
287
|
-
/* @__PURE__ */
|
|
290
|
+
const p = /* @__PURE__ */ a.jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
|
|
291
|
+
/* @__PURE__ */ a.jsx(
|
|
288
292
|
"div",
|
|
289
293
|
{
|
|
290
|
-
className: "
|
|
294
|
+
className: "absolute inset-0 rounded-md rainbow-spin",
|
|
291
295
|
style: {
|
|
292
296
|
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)",
|
|
293
297
|
padding: "2px",
|
|
294
298
|
boxShadow: "0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",
|
|
295
|
-
borderRadius: "
|
|
299
|
+
borderRadius: "0.5rem"
|
|
296
300
|
}
|
|
297
301
|
}
|
|
298
302
|
),
|
|
299
|
-
/* @__PURE__ */
|
|
300
|
-
"
|
|
301
|
-
|
|
302
|
-
|
|
303
|
+
/* @__PURE__ */ a.jsx(
|
|
304
|
+
"div",
|
|
305
|
+
{
|
|
306
|
+
className: `relative flex items-center justify-center w-4 h-4 ${w} p-[2px]`,
|
|
307
|
+
children: E(
|
|
308
|
+
"today-cell-btn w-full h-full rounded-md border-transparent",
|
|
309
|
+
{
|
|
310
|
+
"--border-fill-color": d ? m : v,
|
|
311
|
+
backgroundColor: d ? c : l
|
|
312
|
+
}
|
|
313
|
+
)
|
|
314
|
+
}
|
|
315
|
+
)
|
|
303
316
|
] });
|
|
304
|
-
return O(
|
|
317
|
+
return O(p);
|
|
305
318
|
}
|
|
306
|
-
return O(
|
|
307
|
-
backgroundColor:
|
|
308
|
-
borderColor:
|
|
309
|
-
"--hover-border-color":
|
|
319
|
+
return O(E("w-4 h-4", d && !h ? {
|
|
320
|
+
backgroundColor: c,
|
|
321
|
+
borderColor: m,
|
|
322
|
+
"--hover-border-color": b
|
|
310
323
|
} : h ? void 0 : {
|
|
311
|
-
backgroundColor:
|
|
312
|
-
"--border-color":
|
|
313
|
-
"--hover-border-color":
|
|
324
|
+
backgroundColor: l,
|
|
325
|
+
"--border-color": v,
|
|
326
|
+
"--hover-border-color": b
|
|
314
327
|
}));
|
|
315
328
|
}, se = ({
|
|
316
|
-
fillingColor:
|
|
317
|
-
borderfillColor:
|
|
318
|
-
hoverborderColor:
|
|
319
|
-
cellBorderColor:
|
|
320
|
-
cellColor:
|
|
321
|
-
legend:
|
|
329
|
+
fillingColor: c = "#50C878",
|
|
330
|
+
borderfillColor: m = "#27592D",
|
|
331
|
+
hoverborderColor: b = "#FFCCCB",
|
|
332
|
+
cellBorderColor: v = "#808080",
|
|
333
|
+
cellColor: l = "#ADADAD",
|
|
334
|
+
legend: i = !0,
|
|
322
335
|
mainBorder: d = !0,
|
|
323
|
-
borderColor:
|
|
336
|
+
borderColor: y = "#708090",
|
|
324
337
|
textColor: S = "#708090",
|
|
325
|
-
selectedDates:
|
|
338
|
+
selectedDates: R = [],
|
|
326
339
|
title: w = "Calendar",
|
|
327
|
-
cellShape: h = "
|
|
340
|
+
cellShape: h = "square",
|
|
328
341
|
column: N = 15,
|
|
329
|
-
legendColumn:
|
|
342
|
+
legendColumn: _ = !1
|
|
330
343
|
}) => {
|
|
331
|
-
const
|
|
332
|
-
const
|
|
333
|
-
if (!
|
|
334
|
-
if (typeof
|
|
335
|
-
const
|
|
336
|
-
if (
|
|
337
|
-
const
|
|
338
|
-
return `${
|
|
344
|
+
const E = /* @__PURE__ */ new Date(), { selectedSet: O, hrefMap: A } = B(() => {
|
|
345
|
+
const f = (t) => {
|
|
346
|
+
if (!t) return "";
|
|
347
|
+
if (typeof t == "string") {
|
|
348
|
+
const u = t.split("-");
|
|
349
|
+
if (u.length === 3) {
|
|
350
|
+
const x = u[0], T = String(Number(u[1])).padStart(2, "0"), k = String(Number(u[2])).padStart(2, "0");
|
|
351
|
+
return `${x}-${T}-${k}`;
|
|
339
352
|
}
|
|
340
|
-
return
|
|
353
|
+
return t;
|
|
341
354
|
}
|
|
342
|
-
return typeof
|
|
343
|
-
},
|
|
344
|
-
for (const
|
|
345
|
-
const
|
|
346
|
-
|
|
355
|
+
return typeof t == "object" && t.day ? f(t.day) : "";
|
|
356
|
+
}, j = /* @__PURE__ */ new Set(), g = /* @__PURE__ */ new Map();
|
|
357
|
+
for (const t of R || []) {
|
|
358
|
+
const u = t && typeof t == "object" && t.day ? f(t.day) : f(t);
|
|
359
|
+
u && (j.add(u), t && typeof t == "object" && t.href && g.set(u, t.href));
|
|
347
360
|
}
|
|
348
|
-
return { selectedSet:
|
|
349
|
-
}, [
|
|
350
|
-
const
|
|
351
|
-
for (;
|
|
352
|
-
const T = `${
|
|
353
|
-
|
|
354
|
-
).padStart(2, "0")}`,
|
|
355
|
-
|
|
361
|
+
return { selectedSet: j, hrefMap: g };
|
|
362
|
+
}, [R]), p = B(() => {
|
|
363
|
+
const f = E.getFullYear(), j = E.getMonth(), g = new Date(f, j - 1, 1), t = new Date(f, j + 2, 0), u = [], x = new Date(g);
|
|
364
|
+
for (; x <= t; ) {
|
|
365
|
+
const T = `${x.getFullYear()}-${String(x.getMonth() + 1).padStart(2, "0")}-${String(
|
|
366
|
+
x.getDate()
|
|
367
|
+
).padStart(2, "0")}`, k = O.has(T), F = A.get(T);
|
|
368
|
+
u.push({
|
|
356
369
|
key: T,
|
|
357
|
-
isSelected:
|
|
370
|
+
isSelected: k,
|
|
358
371
|
href: F,
|
|
359
372
|
// keep a Date copy in case you want to use it later
|
|
360
|
-
dateObj: new Date(
|
|
361
|
-
}),
|
|
373
|
+
dateObj: new Date(x)
|
|
374
|
+
}), x.setDate(x.getDate() + 1);
|
|
362
375
|
}
|
|
363
|
-
return
|
|
364
|
-
}, [
|
|
365
|
-
for (let
|
|
366
|
-
P.push(
|
|
367
|
-
const
|
|
368
|
-
return /* @__PURE__ */
|
|
376
|
+
return u;
|
|
377
|
+
}, [R, E]), P = [], Y = N;
|
|
378
|
+
for (let f = 0; f < p.length; f += Y)
|
|
379
|
+
P.push(p.slice(f, f + Y));
|
|
380
|
+
const L = h === "square" ? "rounded-md" : "rounded-full";
|
|
381
|
+
return /* @__PURE__ */ a.jsxs(
|
|
369
382
|
"div",
|
|
370
383
|
{
|
|
371
|
-
className: `
|
|
384
|
+
className: `inline-flex flex-col gap-2 p-3 rounded-xl ${d ? "border shadow-sm" : ""} `,
|
|
372
385
|
style: {
|
|
373
|
-
borderColor: d ?
|
|
374
|
-
color: S
|
|
386
|
+
borderColor: d ? y : void 0
|
|
375
387
|
},
|
|
376
388
|
children: [
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
389
|
+
i && /* @__PURE__ */ a.jsxs(
|
|
390
|
+
"div",
|
|
391
|
+
{
|
|
392
|
+
className: `flex ${_ ? "flex-col items-start" : "justify-between"} text-sm`,
|
|
393
|
+
style: { color: S },
|
|
394
|
+
children: [
|
|
395
|
+
/* @__PURE__ */ a.jsx("strong", { children: w }),
|
|
396
|
+
/* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-2 font-semibold", children: [
|
|
397
|
+
/* @__PURE__ */ a.jsxs("div", { className: "relative flex items-center justify-center w-4 h-4", children: [
|
|
398
|
+
/* @__PURE__ */ a.jsx(
|
|
399
|
+
"div",
|
|
400
|
+
{
|
|
401
|
+
className: "absolute inset-0 rounded-md rainbow-spin",
|
|
402
|
+
style: {
|
|
403
|
+
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)",
|
|
404
|
+
padding: "2px",
|
|
405
|
+
boxShadow: "0 0 8px rgba(255,0,255,0.35), 0 0 14px rgba(0,255,255,0.25)",
|
|
406
|
+
borderRadius: "0.5rem"
|
|
407
|
+
}
|
|
391
408
|
}
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
409
|
+
),
|
|
410
|
+
/* @__PURE__ */ a.jsx(
|
|
411
|
+
"div",
|
|
412
|
+
{
|
|
413
|
+
className: "relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]",
|
|
414
|
+
children: /* @__PURE__ */ a.jsx(
|
|
415
|
+
"button",
|
|
416
|
+
{
|
|
417
|
+
type: "button",
|
|
418
|
+
className: "flex items-center justify-center w-full h-full rounded-md border-2 border-transparent transition-colors duration-150",
|
|
419
|
+
style: {
|
|
420
|
+
"--border-fill-color": m,
|
|
421
|
+
backgroundColor: l
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
)
|
|
425
|
+
}
|
|
426
|
+
)
|
|
427
|
+
] }),
|
|
428
|
+
/* @__PURE__ */ a.jsx("span", { children: "Today" })
|
|
429
|
+
] }),
|
|
430
|
+
/* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-2 font-semibold", children: [
|
|
431
|
+
/* @__PURE__ */ a.jsx(
|
|
395
432
|
"button",
|
|
396
433
|
{
|
|
397
434
|
type: "button",
|
|
398
|
-
className:
|
|
435
|
+
className: `flex items-center justify-center w-4 h-4 ${L} border-2 border-emerald-600 transition-colors duration-150`,
|
|
399
436
|
style: {
|
|
400
|
-
|
|
401
|
-
|
|
437
|
+
backgroundColor: c,
|
|
438
|
+
borderColor: m
|
|
402
439
|
}
|
|
403
440
|
}
|
|
404
|
-
)
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
]
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
type: "button",
|
|
413
|
-
className: `fc-base-button ${I}`,
|
|
414
|
-
style: {
|
|
415
|
-
backgroundColor: l,
|
|
416
|
-
borderColor: g
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
),
|
|
420
|
-
/* @__PURE__ */ t.jsx("span", { children: "Completed" })
|
|
421
|
-
] })
|
|
422
|
-
] })
|
|
423
|
-
] }),
|
|
424
|
-
/* @__PURE__ */ t.jsx("div", { className: "fc-rows", children: P.map((i, y) => /* @__PURE__ */ t.jsx("div", { className: "fc-row", children: i.map((_, n) => {
|
|
425
|
-
const c = _.dateObj.toLocaleDateString("en-US", {
|
|
441
|
+
),
|
|
442
|
+
/* @__PURE__ */ a.jsx("span", { children: "Completed" })
|
|
443
|
+
] })
|
|
444
|
+
]
|
|
445
|
+
}
|
|
446
|
+
),
|
|
447
|
+
/* @__PURE__ */ a.jsx("div", { className: "flex flex-col gap-1", children: P.map((f, j) => /* @__PURE__ */ a.jsx("div", { className: "flex gap-1", children: f.map((g) => {
|
|
448
|
+
const t = g.dateObj.toLocaleDateString("en-US", {
|
|
426
449
|
month: "long",
|
|
427
450
|
day: "numeric",
|
|
428
451
|
year: "numeric"
|
|
429
|
-
})
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
452
|
+
});
|
|
453
|
+
return /* @__PURE__ */ a.jsx(
|
|
454
|
+
"div",
|
|
455
|
+
{
|
|
456
|
+
className: "tooltip tooltip-top",
|
|
457
|
+
"data-tip": t,
|
|
458
|
+
children: /* @__PURE__ */ a.jsx(
|
|
459
|
+
oe,
|
|
460
|
+
{
|
|
461
|
+
fillingColor: c,
|
|
462
|
+
borderfillColor: m,
|
|
463
|
+
hoverborderColor: b,
|
|
464
|
+
cellBorderColor: v,
|
|
465
|
+
cellColor: l,
|
|
466
|
+
isSelected: g.isSelected,
|
|
467
|
+
day: t,
|
|
468
|
+
href: g.href,
|
|
469
|
+
cellShape: h
|
|
470
|
+
}
|
|
471
|
+
)
|
|
472
|
+
},
|
|
473
|
+
g.key
|
|
474
|
+
);
|
|
475
|
+
}) }, j)) })
|
|
449
476
|
]
|
|
450
477
|
}
|
|
451
478
|
);
|
|
452
|
-
},
|
|
479
|
+
}, ce = (c) => /* @__PURE__ */ a.jsx(se, { ...c });
|
|
453
480
|
export {
|
|
454
481
|
se as Calendar,
|
|
455
|
-
|
|
482
|
+
ce as default
|
|
456
483
|
};
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(R,T){typeof exports=="object"&&typeof module<"u"?T(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],T):(R=typeof globalThis<"u"?globalThis:R||self,T(R.FillCalendar={},R.React))})(this,(function(R,T){"use strict";var M={exports:{}},Y={};var V;function re(){if(V)return Y;V=1;var f=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function b(h,l,i){var d=null;if(i!==void 0&&(d=""+i),l.key!==void 0&&(d=""+l.key),"key"in l){i={};for(var y in l)y!=="key"&&(i[y]=l[y])}else i=l;return l=i.ref,{$$typeof:f,type:h,key:d,ref:l!==void 0?l:null,props:i}}return Y.Fragment=m,Y.jsx=b,Y.jsxs=b,Y}var F={};var G;function te(){return G||(G=1,process.env.NODE_ENV!=="production"&&(function(){function f(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===S?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case D:return"Profiler";case p:return"StrictMode";case j:return"Suspense";case g:return"SuspenseList";case x: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 P:return"Portal";case W:return e.displayName||"Context";case I:return(e._context.displayName||"Context")+".Consumer";case c:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case t:return r=e.displayName||null,r!==null?r:f(e.type)||"Memo";case u:r=e._payload,e=e._init;try{return f(e(r))}catch{}}return null}function m(e){return""+e}function b(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var o=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return o.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),m(e)}}function h(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===u)return"<...>";try{var r=f(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=N.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function d(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function y(e,r){function o(){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))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}function O(){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 w(e,r,o,a,U,q){var s=o.ref;return e={$$typeof:E,type:e,key:r,props:o,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:O}):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:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function k(e,r,o,a,U,q){var s=r.children;if(s!==void 0)if(a)if(se(s)){for(a=0;a<s.length;a++)v(s[a]);Object.freeze&&Object.freeze(s)}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 v(s);if(L.call(r,"key")){s=f(e);var $=Object.keys(r).filter(function(le){return le!=="key"});a=0<$.length?"{key: someKey, "+$.join(": ..., ")+": ...}":"{key: someKey}",ee[s+a]||($=0<$.length?"{"+$.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,s,$,s),ee[s+a]=!0)}if(s=null,o!==void 0&&(
|
|
6
|
+
<%s key={someKey} {...props} />`,a,s,$,s),ee[s+a]=!0)}if(s=null,o!==void 0&&(b(o),s=""+o),d(r)&&(b(r.key),s=""+r.key),"key"in r){o={};for(var J in r)J!=="key"&&(o[J]=r[J])}else o=r;return s&&y(o,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,s,o,l(),U,q)}function v(e){A(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===u&&(e._payload.status==="fulfilled"?A(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function A(e){return typeof e=="object"&&e!==null&&e.$$typeof===E}var _=T,E=Symbol.for("react.transitional.element"),P=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),p=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),W=Symbol.for("react.context"),c=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),g=Symbol.for("react.suspense_list"),t=Symbol.for("react.memo"),u=Symbol.for("react.lazy"),x=Symbol.for("react.activity"),S=Symbol.for("react.client.reference"),N=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,se=Array.isArray,z=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var H,Z={},Q=_.react_stack_bottom_frame.bind(_,i)(),K=z(h(i)),ee={};F.Fragment=C,F.jsx=function(e,r,o){var a=1e4>N.recentlyCreatedOwnerStacks++;return k(e,r,o,!1,a?Error("react-stack-top-frame"):Q,a?z(h(e)):K)},F.jsxs=function(e,r,o){var a=1e4>N.recentlyCreatedOwnerStacks++;return k(e,r,o,!0,a?Error("react-stack-top-frame"):Q,a?z(h(e)):K)}})()),F}var X;function ne(){return X||(X=1,process.env.NODE_ENV==="production"?M.exports=re():M.exports=te()),M.exports}var n=ne();const oe=({fillingColor:f,borderfillColor:m,hoverborderColor:b,cellBorderColor:h,cellColor:l,day:i,isSelected:d=!1,cellShape:y,href:O})=>{const w=new Date().toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"}),k=y==="square"?"rounded-md":"rounded-full",v=i===w,A=`
|
|
7
|
+
flex items-center justify-center
|
|
8
|
+
${k} border-2 transition-colors duration-150 hover:scale-150
|
|
9
|
+
${!v&&!d&&b?"hover-border-var":""}
|
|
10
|
+
`,_=!!(O&&d),E=(p="",D)=>n.jsx("button",{type:"button",className:`${A} ${p} ${_?"cursor-pointer":""}`,style:D}),P=p=>_?n.jsx("a",{href:O,className:"contents",children:p}):p;if(v){const p=n.jsxs("div",{className:"relative flex items-center justify-center w-4 h-4",children:[n.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"}}),n.jsx("div",{className:`relative flex items-center justify-center w-4 h-4 ${k} p-[2px]`,children:E("today-cell-btn w-full h-full rounded-md border-transparent",{"--border-fill-color":d?m:h,backgroundColor:d?f:l})})]});return P(p)}return P(E("w-4 h-4",d&&!v?{backgroundColor:f,borderColor:m,"--hover-border-color":b}:v?void 0:{backgroundColor:l,"--border-color":h,"--hover-border-color":b}))},B=({fillingColor:f="#50C878",borderfillColor:m="#27592D",hoverborderColor:b="#FFCCCB",cellBorderColor:h="#808080",cellColor:l="#ADADAD",legend:i=!0,mainBorder:d=!0,borderColor:y="#708090",textColor:O="#708090",selectedDates:w=[],title:k="Calendar",cellShape:v="square",column:A=15,legendColumn:_=!1})=>{const E=new Date,{selectedSet:P,hrefMap:C}=T.useMemo(()=>{const c=t=>{if(!t)return"";if(typeof t=="string"){const u=t.split("-");if(u.length===3){const x=u[0],S=String(Number(u[1])).padStart(2,"0"),N=String(Number(u[2])).padStart(2,"0");return`${x}-${S}-${N}`}return t}return typeof t=="object"&&t.day?c(t.day):""},j=new Set,g=new Map;for(const t of w||[]){const u=t&&typeof t=="object"&&t.day?c(t.day):c(t);u&&(j.add(u),t&&typeof t=="object"&&t.href&&g.set(u,t.href))}return{selectedSet:j,hrefMap:g}},[w]),p=T.useMemo(()=>{const c=E.getFullYear(),j=E.getMonth(),g=new Date(c,j-1,1),t=new Date(c,j+2,0),u=[],x=new Date(g);for(;x<=t;){const S=`${x.getFullYear()}-${String(x.getMonth()+1).padStart(2,"0")}-${String(x.getDate()).padStart(2,"0")}`,N=P.has(S),L=C.get(S);u.push({key:S,isSelected:N,href:L,dateObj:new Date(x)}),x.setDate(x.getDate()+1)}return u},[w,E]),D=[],I=A;for(let c=0;c<p.length;c+=I)D.push(p.slice(c,c+I));const W=v==="square"?"rounded-md":"rounded-full";return n.jsxs("div",{className:`inline-flex flex-col gap-2 p-3 rounded-xl ${d?"border shadow-sm":""} `,style:{borderColor:d?y:void 0},children:[i&&n.jsxs("div",{className:`flex ${_?"flex-col items-start":"justify-between"} text-sm`,style:{color:O},children:[n.jsx("strong",{children:k}),n.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[n.jsxs("div",{className:"relative flex items-center justify-center w-4 h-4",children:[n.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"}}),n.jsx("div",{className:"relative flex items-center justify-center w-4 h-4 rounded-md p-[2px]",children:n.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":m,backgroundColor:l}})})]}),n.jsx("span",{children:"Today"})]}),n.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[n.jsx("button",{type:"button",className:`flex items-center justify-center w-4 h-4 ${W} border-2 border-emerald-600 transition-colors duration-150`,style:{backgroundColor:f,borderColor:m}}),n.jsx("span",{children:"Completed"})]})]}),n.jsx("div",{className:"flex flex-col gap-1",children:D.map((c,j)=>n.jsx("div",{className:"flex gap-1",children:c.map(g=>{const t=g.dateObj.toLocaleDateString("en-US",{month:"long",day:"numeric",year:"numeric"});return n.jsx("div",{className:"tooltip tooltip-top","data-tip":t,children:n.jsx(oe,{fillingColor:f,borderfillColor:m,hoverborderColor:b,cellBorderColor:h,cellColor:l,isSelected:g.isSelected,day:t,href:g.href,cellShape:v})},g.key)})},j))})]})},ae=f=>n.jsx(B,{...f});R.Calendar=B,R.default=ae,Object.defineProperties(R,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
|
package/package.json
CHANGED
|
@@ -1,48 +1,56 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "react-fill-calendar",
|
|
3
|
-
"version": "0.2.
|
|
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
|
-
"main": "dist/index.umd.cjs",
|
|
6
|
-
"module": "dist/index.js",
|
|
7
|
-
"types": "index.d.ts",
|
|
8
|
-
"type": "module",
|
|
9
|
-
"exports": {
|
|
10
|
-
".": {
|
|
11
|
-
"types": "./index.d.ts",
|
|
12
|
-
"import": "./dist/index.js",
|
|
13
|
-
"require": "./dist/index.umd.cjs"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
"files": [
|
|
17
|
-
"dist",
|
|
18
|
-
"index.d.ts"
|
|
19
|
-
],
|
|
20
|
-
"scripts": {
|
|
21
|
-
"dev": "vite",
|
|
22
|
-
"build": "vite build",
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
"react": ">=17.0.0 <20.0.0"
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"@vitejs/plugin-react": "^5.1.2",
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
|
|
48
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "react-fill-calendar",
|
|
3
|
+
"version": "0.2.5",
|
|
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
|
+
"main": "dist/index.umd.cjs",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.umd.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist",
|
|
18
|
+
"index.d.ts"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"dev": "vite",
|
|
22
|
+
"build": "vite build",
|
|
23
|
+
"preview": "vite preview",
|
|
24
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"react",
|
|
28
|
+
"calendar",
|
|
29
|
+
"components"
|
|
30
|
+
],
|
|
31
|
+
"author": "Robert Foley",
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"react": ">=17.0.0 <20.0.0",
|
|
35
|
+
"react-dom": ">=17.0.0 <20.0.0"
|
|
36
|
+
},
|
|
37
|
+
"repository": {
|
|
38
|
+
"type": "git",
|
|
39
|
+
"url": "git+https://github.com/apmanager001/react-fill-calendar.git"
|
|
40
|
+
},
|
|
41
|
+
"devDependencies": {
|
|
42
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
43
|
+
"@vitejs/plugin-react": "^5.1.2",
|
|
44
|
+
"autoprefixer": "^10.4.24",
|
|
45
|
+
"daisyui": "^5.5.16",
|
|
46
|
+
"postcss": "^8.5.6",
|
|
47
|
+
"react": ">=17.0.0 <20.0.0",
|
|
48
|
+
"react-dom": ">=17.0.0 <20.0.0",
|
|
49
|
+
"tailwindcss": "^4.1.18",
|
|
50
|
+
"vite": "^7.3.1"
|
|
51
|
+
},
|
|
52
|
+
"bugs": {
|
|
53
|
+
"url": "https://github.com/apmanager001/react-fill-calendar/issues"
|
|
54
|
+
},
|
|
55
|
+
"homepage": "https://github.com/apmanager001/react-fill-calendar#readme"
|
|
56
|
+
}
|
package/readme.md
CHANGED
|
@@ -3,17 +3,17 @@
|
|
|
3
3
|
|
|
4
4
|
# React Filled Calendar
|
|
5
5
|
|
|
6
|
-
A lightweight, customizable React calendar component that automatically fills and highlights dates passed in as props. Designed for simplicity, reusability, and easy styling with
|
|
6
|
+
A lightweight, customizable React calendar component that automatically fills and highlights dates passed in as props. Designed for simplicity, reusability, and easy styling with Tailwind and DaisyUI.
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
10
|
## 🚀 Features
|
|
11
11
|
|
|
12
|
-
- Pass in an array of dates to automatically fill or highlight them
|
|
13
|
-
-
|
|
14
|
-
- Built with React
|
|
15
|
-
- Easily styled with
|
|
16
|
-
- Ideal for dashboards, planners, journals, and scheduling tools
|
|
12
|
+
- Pass in an array of dates to automatically fill or highlight them
|
|
13
|
+
- Fully responsive layout
|
|
14
|
+
- Built with React
|
|
15
|
+
- Easily styled with TailwindCSS + DaisyUI
|
|
16
|
+
- Ideal for dashboards, planners, journals, and scheduling tools
|
|
17
17
|
- Added hrefs to selected dates by passing href key shown in example
|
|
18
18
|
|
|
19
19
|
---
|
|
@@ -31,13 +31,14 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
31
31
|
</div>
|
|
32
32
|
</div>
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
|
|
35
|
+
```
|
|
35
36
|
import Calendar from 'react-fill-calendar'
|
|
36
37
|
|
|
37
38
|
const Calendar = () => {
|
|
38
39
|
return (
|
|
39
40
|
<div>
|
|
40
|
-
<Calendar
|
|
41
|
+
<Calendar
|
|
41
42
|
fillingColor = "#50C878",
|
|
42
43
|
borderfillColor = "#27592D",
|
|
43
44
|
hoverborderColor = "#FFCCCB",
|
|
@@ -56,100 +57,35 @@ A lightweight, customizable React calendar component that automatically fills an
|
|
|
56
57
|
day: '2026-1-15',
|
|
57
58
|
},
|
|
58
59
|
],
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
This package ships an accompanying CSS file that you should import in your app. Two recommended patterns:
|
|
66
|
-
|
|
67
|
-
- For Tailwind projects (important: import the library CSS after your Tailwind output so the library's rules are not overridden):
|
|
68
|
-
|
|
69
|
-
In your main stylesheet (after Tailwind directives):
|
|
70
|
-
|
|
71
|
-
```css
|
|
72
|
-
@tailwind base;
|
|
73
|
-
@tailwind components;
|
|
74
|
-
@tailwind utilities;
|
|
75
|
-
|
|
76
|
-
/* import the component CSS after Tailwind so it takes precedence */
|
|
77
|
-
@import 'react-fill-calendar/dist/calendar.css';
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
Or in your JS entry after your Tailwind import:
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
import './main.css'; // contains Tailwind
|
|
84
|
-
import 'react-fill-calendar/dist/calendar.css';
|
|
85
|
-
import App from './App';
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
- For non-Tailwind projects:
|
|
89
|
-
|
|
90
|
-
```js
|
|
91
|
-
import 'react-fill-calendar/dist/calendar.css';
|
|
92
|
-
import Calendar from 'react-fill-calendar';
|
|
93
|
-
|
|
94
|
-
export default function App() {
|
|
95
|
-
return <Calendar />;
|
|
96
|
-
}
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
Notes:
|
|
100
|
-
- The CSS is namespaced under the `.fc-` prefix and rooted at `.fc-calendar` to reduce collisions with utility frameworks like Tailwind.
|
|
101
|
-
- If you prefer to import source CSS directly, you can import `src/comp/calendar.css` and `src/comp/dayCell.css`, but publishing `dist/calendar.css` is the recommended, stable approach.
|
|
102
|
-
|
|
103
|
-
### Example
|
|
104
|
-
|
|
105
|
-
<div style="display: flex; gap: 20px; justify-content: center;">
|
|
106
|
-
<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'/>
|
|
107
|
-
</div>
|
|
108
|
-
<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'/>
|
|
109
|
-
</div>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
```
|
|
113
|
-
import Calendar from 'react-fill-calendar'
|
|
114
|
-
|
|
115
|
-
const Example = () => {
|
|
116
|
-
return (
|
|
117
|
-
<div>
|
|
118
|
-
<Calendar
|
|
119
|
-
fillingColor="#50C878"
|
|
120
|
-
borderfillColor="#27592D"
|
|
121
|
-
hoverborderColor="#FFCCCB"
|
|
122
|
-
cellBorderColor="#808080"
|
|
123
|
-
cellColor="#ADADAD"
|
|
124
|
-
legend={true}
|
|
125
|
-
mainBorder={true}
|
|
126
|
-
borderColor="#708090"
|
|
127
|
-
textColor="#708090"
|
|
128
|
-
selectedDates={[{ day: '2026-01-13', href: '/habit/1234565' }, { day: '2026-01-15' }]}
|
|
129
|
-
title="Calendar"
|
|
130
|
-
/>
|
|
131
|
-
</div>
|
|
132
|
-
)
|
|
133
|
-
}
|
|
60
|
+
title = "Calendar"
|
|
61
|
+
/>
|
|
62
|
+
</div>
|
|
63
|
+
)
|
|
64
|
+
}
|
|
134
65
|
|
|
135
66
|
export default Calendar
|
|
136
67
|
```
|
|
137
68
|
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
138
74
|
## Props
|
|
139
75
|
|
|
140
|
-
| Prop
|
|
141
|
-
|
|
142
|
-
| `fillingColor` | `string`
|
|
143
|
-
| `borderfillColor` | `string`
|
|
144
|
-
| `title` | `string`
|
|
145
|
-
| `hoverborderColor` | `string`
|
|
146
|
-
| `cellColor` | `string`
|
|
147
|
-
| `cellBorderColor` | `string`
|
|
148
|
-
| `mainBorder` | `boolean`
|
|
149
|
-
| `borderColor` | `string`
|
|
150
|
-
| `text color`
|
|
151
|
-
| `selectedDates`
|
|
152
|
-
| `cellShape` | `string`
|
|
153
|
-
| `column`
|
|
154
|
-
| `legendColumn`
|
|
155
|
-
| `legend` | `boolean`
|
|
76
|
+
| Prop | Type | Required | Default | Options | Description |
|
|
77
|
+
|-------------------|------------|----------|-------------|------------------------|-------------|
|
|
78
|
+
| `fillingColor` | `string` | No | `"#50C878"` | — | Background color used to fill selected or marked dates. |
|
|
79
|
+
| `borderfillColor` | `string` | No | `"#27592D"` | — | Border color applied to filled date cells. |
|
|
80
|
+
| `title` | `string` | No | `"Calendar"` | — | Title displayed above the calendar. |
|
|
81
|
+
| `hoverborderColor` | `string` | No | `"#FFCCCB"` | — | Border color applied when hovering over a date cell. |
|
|
82
|
+
| `cellColor` | `string` | No | `"#ADADAD"` | — | Background color for unfilled date cells. |
|
|
83
|
+
| `cellBorderColor` | `string` | No | `"#808080"` | — | Border color for unfilled date cells. |
|
|
84
|
+
| `mainBorder` | `boolean` | No | `true` | — | Removes border and shadow for the calendar. |
|
|
85
|
+
| `borderColor` | `string` | No | `"#708090"` | — | Changes color of the calendar border. |
|
|
86
|
+
| `text color` | `string` | No | `"#708090"` | — | Changes color of text in legend. |
|
|
87
|
+
| `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 |
|
|
88
|
+
| `cellShape` | `string` | No | `"square"` | `"square"`, `"circle"` | Shape of each calendar cell. |
|
|
89
|
+
| `column` | `number` | No | `15` | — | Number of cells in each row |
|
|
90
|
+
| `legendColumn` | `boolean` | No | `false` | — | Changes orientation of legend from row to column |
|
|
91
|
+
| `legend` | `boolean` | No | `true` | — | Toggles the display of the legend explaining filled vs. unfilled dates. |
|