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