react-custom-calendarss/dist/index.js

A calendar that can be customized to your liking 🧨

import './style.css';
import { useState as S, useMemo as U, createContext as Y, useContext as k } from "react";
import { jsx as M } from "react/jsx-runtime";
const f = (t, r) => {
  const c = t.getUTCFullYear(), a = t.getUTCMonth() + 1, s = t.getUTCDate();
  let e = r;
  return r.includes("yyyy") && (e = e.replace("yyyy", c.toString())), r.includes("MM") && (e = e.replace("MM", a.toString().padStart(2, "0"))), r.includes("dd") && (e = e.replace("dd", s.toString().padStart(2, "0"))), e;
}, p = (t, r, c, a = !1) => {
  const e = new Date(Date.UTC(t, r, 1)).getUTCDay(), u = new Date(Date.UTC(t, r + 1, 0)).getUTCDate(), o = r - 1, n = o < 0 ? t - 1 : t, D = o < 0 ? 11 : o, i = new Date(
    Date.UTC(n, D + 1, 0)
  ).getUTCDate(), l = r + 1, w = l > 11 ? t + 1 : t, b = l > 11 ? 0 : l, C = Array(6).fill(null).map(() => Array(7).fill(0)), T = {}, x = {};
  let v = 1, h = 1;
  for (let d = 0; d < 6; d++)
    for (let g = 0; g < 7; g++)
      if (d === 0 && g < e) {
        const m = i - (e - g - 1);
        if (C[d][g] = a ? -m : 0, a) {
          const P = new Date(
            Date.UTC(n, D, m)
          );
          T[m] = f(P, c);
        }
      } else if (v <= u)
        C[d][g] = v++;
      else {
        if (C[d][g] = a ? -h : 0, a) {
          const m = new Date(
            Date.UTC(w, b, h)
          );
          x[h] = f(m, c);
        }
        h++;
      }
  return { matrix: C, year: t, month: r, prevMonthDates: T, nextMonthDates: x };
}, F = (t, r, c, a, s, e, u) => {
  let o = t.find((n) => n.includes(a));
  return !o && a > 28 && (o = t[t.length - 1]), o ? o.map((n) => {
    if (n > 0)
      return f(new Date(Date.UTC(r, c, n)), u);
    if (n < 0) {
      const D = Math.abs(n), i = s[D] || e[D];
      return i ? f(new Date(i), u) : "0";
    }
    return "0";
  }) : [];
}, y = (t, r, c, a, s = !1, e = {}, u = {}) => t.map(
  (o) => o.map((n) => {
    if (n > 0)
      return f(new Date(Date.UTC(r, c, n)), a);
    if (s && n < 0) {
      const D = Math.abs(n), i = e[D] || u[D];
      return i ? f(new Date(i), a) : "0";
    }
    return "0";
  })
), $ = ({ type: t, initialDate: r }) => {
  if (!t)
    throw new Error("Calendar type is required");
  const [c, a] = S(() => {
    if (r)
      return new Date(
        Date.UTC(r.getUTCFullYear(), r.getUTCMonth(), 1)
      ).toISOString();
    const D = /* @__PURE__ */ new Date();
    return new Date(
      Date.UTC(D.getUTCFullYear(), D.getUTCMonth(), 1)
    ).toISOString();
  }), [s, e] = c.split("T")[0].split("-").map(Number), u = U(() => p(s, e - 1, t), [s, e]), o = U(() => y(u.matrix, s, e - 1, t), [u, t, s, e]), n = (D) => {
    const i = new Date(Date.UTC(s, e - 1 + D, 1));
    a(i.toISOString());
  };
  return {
    currentDate: c,
    setCurrentDate: a,
    monthCalendarData: o,
    moveToNext: () => n(1),
    moveToPrev: () => n(-1),
    moveToPeriod: n
  };
}, q = ({ type: t, initialDate: r }) => {
  if (!t)
    throw new Error("Calendar type is required");
  const [c, a] = S(() => {
    if (r)
      return new Date(
        Date.UTC(
          r.getUTCFullYear(),
          r.getUTCMonth(),
          r.getUTCDate()
        )
      ).toISOString();
    const T = /* @__PURE__ */ new Date();
    return new Date(
      Date.UTC(T.getUTCFullYear(), T.getUTCMonth(), T.getUTCDate())
    ).toISOString();
  }), [s, e, u] = c.split("T")[0].split("-").map(Number), {
    matrix: o,
    year: n,
    month: D,
    prevMonthDates: i,
    nextMonthDates: l
  } = U(() => p(s, e - 1, t, !0), [s, e]), w = U(() => F(
    o,
    s,
    e - 1,
    u,
    i,
    l,
    t
  ), [o, s, e, u, i, l, t]), b = U(() => y(
    o,
    n,
    D,
    t,
    !0,
    i,
    l
  ), [o, n, D, t, i, l]), C = (T) => {
    const x = new Date(Date.UTC(s, e - 1, u + T * 7));
    a(x.toISOString());
  };
  return {
    currentDate: c,
    setCurrentDate: a,
    weekDates: w,
    monthlyWeekGrid: b,
    moveToNext: () => C(1),
    moveToPrev: () => C(-1),
    moveToPeriod: C,
    matrix: o
  };
}, I = Y(void 0), N = () => k(I), O = {
  primary: {
    bg: "bg-[#0058E4] border-[#0054DA] border-2",
    text: "text-white text-button-active"
  },
  secondary: {
    bg: "bg-white border-[#D4D6DD] border",
    text: "text-[#222] text-button-choice"
  },
  disabled: {
    bg: "bg-[#D4D6DD] border-transparent",
    text: "text-[#8F9098] text-button-choice"
  }
};
function B({
  children: t,
  disabled: r = !1,
  variant: c = "primary",
  className: a = "",
  ...s
}) {
  var n;
  const e = N(), u = r ? "disabled" : c, o = {
    ...O[u],
    ...((n = e == null ? void 0 : e.button) == null ? void 0 : n[u]) ?? {}
  };
  return /* @__PURE__ */ M(
    "button",
    {
      ...s,
      className: `${a} ${o.bg} w-full cursor-pointer py-4`,
      children: /* @__PURE__ */ M("p", { className: `${o.text} text-center`, children: t })
    }
  );
}
const A = ({
  theme: t,
  children: r
}) => /* @__PURE__ */ M(I.Provider, { value: t, children: r });
export {
  B as ActiveButton,
  $ as MonthCalendar,
  A as UIThemeProvider,
  q as WeekCalendar,
  N as useUITheme
};