fluentui-react-calendar
Version:
A read-only calendar component with day, week, and month views for React applications
493 lines (492 loc) • 20.1 kB
JavaScript
import ae, { useState as Q, useCallback as D, useMemo as K } from "react";
import './index.css';var J = { exports: {} }, F = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ee;
function se() {
if (ee) return F;
ee = 1;
var p = Symbol.for("react.transitional.element"), x = Symbol.for("react.fragment");
function S(l, m, c) {
var T = null;
if (c !== void 0 && (T = "" + c), m.key !== void 0 && (T = "" + m.key), "key" in m) {
c = {};
for (var P in m)
P !== "key" && (c[P] = m[P]);
} else c = m;
return m = c.ref, {
$$typeof: p,
type: l,
key: T,
ref: m !== void 0 ? m : null,
props: c
};
}
return F.Fragment = x, F.jsx = S, F.jsxs = S, F;
}
var L = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var te;
function oe() {
return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
function p(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === d ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case b:
return "Fragment";
case Y:
return "Profiler";
case E:
return "StrictMode";
case X:
return "Suspense";
case n:
return "SuspenseList";
case g:
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 k:
return "Portal";
case q:
return (e.displayName || "Context") + ".Provider";
case V:
return (e._context.displayName || "Context") + ".Consumer";
case G:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case a:
return r = e.displayName || null, r !== null ? r : p(e.type) || "Memo";
case s:
r = e._payload, e = e._init;
try {
return p(e(r));
} catch {
}
}
return null;
}
function x(e) {
return "" + e;
}
function S(e) {
try {
x(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var i = r.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return i.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
f
), x(e);
}
}
function l(e) {
if (e === b) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === s)
return "<...>";
try {
var r = p(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function m() {
var e = j.A;
return e === null ? null : e.getOwner();
}
function c() {
return Error("react-stack-top-frame");
}
function T(e) {
if (u.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function P(e, r) {
function i() {
o || (o = !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
));
}
i.isReactWarning = !0, Object.defineProperty(e, "key", {
get: i,
configurable: !0
});
}
function z() {
var e = p(this.type);
return h[e] || (h[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 I(e, r, i, f, A, N, B, H) {
return i = N.ref, e = {
$$typeof: U,
type: e,
key: r,
props: N,
_owner: A
}, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: z
}) : 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: B
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: H
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function R(e, r, i, f, A, N, B, H) {
var v = r.children;
if (v !== void 0)
if (f)
if (y(v)) {
for (f = 0; f < v.length; f++)
W(v[f]);
Object.freeze && Object.freeze(v);
} 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 W(v);
if (u.call(r, "key")) {
v = p(e);
var $ = Object.keys(r).filter(function(ne) {
return ne !== "key";
});
f = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", _[v + f] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
f,
v,
$,
v
), _[v + f] = !0);
}
if (v = null, i !== void 0 && (S(i), v = "" + i), T(r) && (S(r.key), v = "" + r.key), "key" in r) {
i = {};
for (var Z in r)
Z !== "key" && (i[Z] = r[Z]);
} else i = r;
return v && P(
i,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), I(
e,
v,
N,
A,
m(),
i,
B,
H
);
}
function W(e) {
typeof e == "object" && e !== null && e.$$typeof === U && e._store && (e._store.validated = 1);
}
var C = ae, U = Symbol.for("react.transitional.element"), k = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), E = Symbol.for("react.strict_mode"), Y = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), q = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), n = Symbol.for("react.suspense_list"), a = Symbol.for("react.memo"), s = Symbol.for("react.lazy"), g = Symbol.for("react.activity"), d = Symbol.for("react.client.reference"), j = C.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, u = Object.prototype.hasOwnProperty, y = Array.isArray, w = console.createTask ? console.createTask : function() {
return null;
};
C = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var o, h = {}, O = C["react-stack-bottom-frame"].bind(
C,
c
)(), M = w(l(c)), _ = {};
L.Fragment = b, L.jsx = function(e, r, i, f, A) {
var N = 1e4 > j.recentlyCreatedOwnerStacks++;
return R(
e,
r,
i,
!1,
f,
A,
N ? Error("react-stack-top-frame") : O,
N ? w(l(e)) : M
);
}, L.jsxs = function(e, r, i, f, A) {
var N = 1e4 > j.recentlyCreatedOwnerStacks++;
return R(
e,
r,
i,
!0,
f,
A,
N ? Error("react-stack-top-frame") : O,
N ? w(l(e)) : M
);
};
}()), L;
}
var re;
function ce() {
return re || (re = 1, process.env.NODE_ENV === "production" ? J.exports = se() : J.exports = oe()), J.exports;
}
var t = ce();
const ie = ({ events: p }) => {
const [x, S] = Q(/* @__PURE__ */ new Date()), [l, m] = Q("month"), [c, T] = Q(/* @__PURE__ */ new Date()), P = /* @__PURE__ */ t.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 12 12", className: "nav-icon", children: /* @__PURE__ */ t.jsx("path", { fill: "currentColor", d: "M4.47 2.22a.75.75 0 0 0 0 1.06L7.19 6L4.47 8.72a.75.75 0 0 0 1.06 1.06l3.25-3.25a.75.75 0 0 0 0-1.06L5.53 2.22a.75.75 0 0 0-1.06 0" }) }), z = /* @__PURE__ */ t.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 12 12", className: "nav-icon left", children: /* @__PURE__ */ t.jsx("path", { fill: "currentColor", d: "M4.47 2.22a.75.75 0 0 0 0 1.06L7.19 6L4.47 8.72a.75.75 0 0 0 1.06 1.06l3.25-3.25a.75.75 0 0 0 0-1.06L5.53 2.22a.75.75 0 0 0-1.06 0" }) }), I = D((n) => {
const a = String(n.getDate()).padStart(2, "0"), s = String(n.getMonth() + 1).padStart(2, "0"), g = n.getFullYear();
return `${a}-${s}-${g}`;
}, []), R = D((n) => {
const a = I(n);
return p[a] || [];
}, [p, I]), W = D(() => {
S((n) => {
const a = new Date(n);
return l === "month" ? a.setMonth(n.getMonth() - 1) : l === "week" ? a.setDate(n.getDate() - 7) : l === "day" && a.setDate(n.getDate() - 1), a;
});
}, [l]), C = D(() => {
S((n) => {
const a = new Date(n);
return l === "month" ? a.setMonth(n.getMonth() + 1) : l === "week" ? a.setDate(n.getDate() + 7) : l === "day" && a.setDate(n.getDate() + 1), a;
});
}, [l]), U = D(() => {
S(/* @__PURE__ */ new Date()), T(/* @__PURE__ */ new Date());
}, []), k = D((n) => {
const [a] = n.split(":"), s = parseInt(a, 10), g = s >= 12 ? "PM" : "AM";
return `${s % 12 || 12}:${n.split(":")[1]} ${g}`;
}, []), b = D((n, a) => {
a.stopPropagation(), n && window.open(n, "_blank");
}, []), E = K(() => {
const n = (o, h) => new Date(o, h + 1, 0).getDate(), a = (o, h) => new Date(o, h, 1).getDay(), s = x.getFullYear(), g = x.getMonth(), d = n(s, g), j = a(s, g), u = [];
for (let o = 0; o < 24; o++) {
const h = o.toString().padStart(2, "0"), O = o % 12 || 12, M = o >= 12 ? "PM" : "AM";
u.push({ hour: o, time: `${h}:00`, time12: `${O}:00 ${M}` });
}
const y = [], w = new Date(x);
w.setDate(x.getDate() - x.getDay());
for (let o = 0; o < 7; o++) {
const h = new Date(w);
h.setDate(w.getDate() + o), y.push(h);
}
return { year: s, month: g, daysInMonth: d, firstDay: j, timeSlots: u, daysOfWeek: y };
}, [x]), Y = D(() => {
const { year: n, month: a, daysInMonth: s, firstDay: g } = E, d = [], j = /* @__PURE__ */ new Date();
for (let u = 0; u < g; u++)
d.push(/* @__PURE__ */ t.jsx("div", { className: "calendar-day empty" }, `empty-${u}`));
for (let u = 1; u <= s; u++) {
const y = new Date(n, a, u), w = R(y), o = w.slice(0, 2), h = w.length > 2 ? w.length - 2 : 0, O = y.getDate() === j.getDate() && y.getMonth() === j.getMonth() && y.getFullYear() === j.getFullYear(), M = y.getDate() === c.getDate() && y.getMonth() === c.getMonth() && y.getFullYear() === c.getFullYear();
d.push(
/* @__PURE__ */ t.jsxs(
"div",
{
className: `calendar-day ${O ? "today" : ""} ${M ? "selected" : ""}`,
onClick: () => {
T(new Date(n, a, u)), m("day");
},
children: [
/* @__PURE__ */ t.jsx("div", { className: "day-header", children: /* @__PURE__ */ t.jsx("span", { className: "day-number", children: u }) }),
/* @__PURE__ */ t.jsxs("div", { className: "day-events", children: [
o.map((_, e) => /* @__PURE__ */ t.jsxs(
"a",
{
className: "event-pill",
href: _.link,
target: "_blank",
rel: "noopener noreferrer",
onClick: (r) => b(_.link, r),
title: `${k(_.time)} - ${_.event}`,
children: [
k(_.time),
" - ",
_.event
]
},
e
)),
h > 0 && /* @__PURE__ */ t.jsxs("div", { className: "event-more", children: [
"+",
h,
" more"
] })
] })
]
},
`day-${u}`
)
);
}
return /* @__PURE__ */ t.jsxs("div", { className: "month-view", children: [
/* @__PURE__ */ t.jsxs("div", { className: "weekday-header", children: [
/* @__PURE__ */ t.jsx("div", { children: "Sunday" }),
/* @__PURE__ */ t.jsx("div", { children: "Monday" }),
/* @__PURE__ */ t.jsx("div", { children: "Tuesday" }),
/* @__PURE__ */ t.jsx("div", { children: "Wednesday" }),
/* @__PURE__ */ t.jsx("div", { children: "Thursday" }),
/* @__PURE__ */ t.jsx("div", { children: "Friday" }),
/* @__PURE__ */ t.jsx("div", { children: "Saturday" })
] }),
/* @__PURE__ */ t.jsx("div", { className: "days-grid", children: d })
] });
}, [E, R, c, k, b]), V = D(() => {
const { daysOfWeek: n } = E, a = /* @__PURE__ */ new Date();
return /* @__PURE__ */ t.jsx("div", { className: "week-view", children: /* @__PURE__ */ t.jsx("div", { className: "week-days-container", children: n.map((s, g) => {
const d = R(s), j = s.getDate() === a.getDate() && s.getMonth() === a.getMonth() && s.getFullYear() === a.getFullYear(), u = s.getDate() === c.getDate() && s.getMonth() === c.getMonth() && s.getFullYear() === c.getFullYear(), y = d.slice(0, 4), w = d.length > 4 ? d.length - 4 : 0;
return /* @__PURE__ */ t.jsxs(
"div",
{
className: `week-day-column ${j ? "today" : ""} ${u ? "selected" : ""}`,
onClick: () => {
T(new Date(s)), m("day");
},
children: [
/* @__PURE__ */ t.jsxs("div", { className: "week-day-header", children: [
/* @__PURE__ */ t.jsx("div", { className: "weekday", children: s.toLocaleDateString("en-US", { weekday: "long" }) }),
/* @__PURE__ */ t.jsx("div", { className: "date", children: s.getDate() })
] }),
/* @__PURE__ */ t.jsxs("div", { className: "week-day-events", children: [
y.map((o, h) => /* @__PURE__ */ t.jsxs(
"a",
{
className: "week-event",
href: o.link,
target: "_blank",
rel: "noopener noreferrer",
onClick: (O) => b(o.link, O),
title: `${k(o.time)} - ${o.event}`,
children: [
/* @__PURE__ */ t.jsx("div", { className: "event-time", children: k(o.time) }),
/* @__PURE__ */ t.jsx("div", { className: "event-title", children: o.event })
]
},
h
)),
w > 0 && /* @__PURE__ */ t.jsxs("div", { className: "week-event-more", children: [
"+",
w,
" more"
] })
] })
]
},
g
);
}) }) });
}, [E, R, c, k, b]), q = D(() => {
const { timeSlots: n } = E, a = R(c);
return /* @__PURE__ */ t.jsxs("div", { className: "day-view", children: [
/* @__PURE__ */ t.jsx("div", { className: "day-header", children: /* @__PURE__ */ t.jsx("h3", { children: c.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }) }) }),
/* @__PURE__ */ t.jsxs("div", { className: "day-body", children: [
/* @__PURE__ */ t.jsx("div", { className: "time-column", children: n.map((s) => /* @__PURE__ */ t.jsx("div", { className: "time-slot", children: /* @__PURE__ */ t.jsx("span", { children: s.time12 }) }, s.time)) }),
/* @__PURE__ */ t.jsx("div", { className: "events-column", children: n.map((s) => {
const g = a.filter((d) => d.time.startsWith(s.hour.toString().padStart(2, "0")));
return /* @__PURE__ */ t.jsx("div", { className: "day-time-slot", children: g.map((d, j) => /* @__PURE__ */ t.jsxs(
"a",
{
className: "day-event",
href: d.link,
target: "_blank",
rel: "noopener noreferrer",
onClick: (u) => b(d.link, u),
title: `${k(d.time)} - ${d.event}`,
children: [
/* @__PURE__ */ t.jsx("div", { className: "event-time", children: k(d.time) }),
/* @__PURE__ */ t.jsx("div", { className: "event-title", children: d.event })
]
},
j
)) }, s.time);
}) })
] })
] });
}, [E, R, c, k, b]), G = K(() => {
switch (l) {
case "month":
return Y();
case "week":
return V();
case "day":
return q();
default:
return Y();
}
}, [l, Y, V, q]), X = K(() => {
if (l === "month")
return /* @__PURE__ */ t.jsx("h2", { children: x.toLocaleDateString("en-US", { month: "long", year: "numeric" }) });
if (l === "week") {
const { daysOfWeek: n } = E;
return /* @__PURE__ */ t.jsxs("h2", { children: [
n[0].toLocaleDateString("en-US", { month: "short", day: "numeric" }),
" - ",
n[6].toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
] });
} else if (l === "day")
return /* @__PURE__ */ t.jsx("h2", { children: c.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }) });
}, [l, x, c, E]);
return /* @__PURE__ */ t.jsxs("div", { className: "calendar-container", children: [
/* @__PURE__ */ t.jsxs("div", { className: "calendar-header", children: [
/* @__PURE__ */ t.jsx("div", { style: { width: "200px" }, children: /* @__PURE__ */ t.jsx("div", { className: "calendar-title", children: X }) }),
/* @__PURE__ */ t.jsxs("div", { className: "calendar-actions", children: [
/* @__PURE__ */ t.jsx("button", { onClick: W, className: "nav-button", children: z }),
/* @__PURE__ */ t.jsx("button", { onClick: U, className: "today-button", children: "Today" }),
/* @__PURE__ */ t.jsx("button", { onClick: C, className: "nav-button", children: P })
] }),
/* @__PURE__ */ t.jsxs("div", { className: "view-switcher", children: [
/* @__PURE__ */ t.jsx("button", { onClick: () => m("day"), className: l === "day" ? "active" : "", children: "Day" }),
/* @__PURE__ */ t.jsx("button", { onClick: () => m("week"), className: l === "week" ? "active" : "", children: "Week" }),
/* @__PURE__ */ t.jsx("button", { onClick: () => m("month"), className: l === "month" ? "active" : "", children: "Month" })
] })
] }),
/* @__PURE__ */ t.jsx("div", { className: "calendar-body", children: G })
] });
};
export {
ie as default
};
//# sourceMappingURL=index.js.map