@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
146 lines (145 loc) • 6.96 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import H from "prop-types";
import { BaseView as K } from "../../components/BaseView.mjs";
import { ZonedDate as C, MS_PER_DAY as v, firstDayInWeek as z, firstDayOfMonth as L, getDate as V, addDays as W, lastDayOfMonth as G } from "@progress/kendo-date-math";
import { classNames as b } from "@progress/kendo-react-common";
import { VerticalResourceIterator as A } from "../common/VerticalResourceIterator.mjs";
import { HorizontalResourceIterator as P } from "../common/HorizontalResourceIterator.mjs";
import { mapItemsToSlots as Z, mapSlotsToItems as j, orderSort as q, toUTCDateTime as I } from "../../utils/index.mjs";
import { monthViewTitle as O, messages as J } from "../../messages/index.mjs";
import { SchedulerEditSlot as Q } from "../../slots/SchedulerEditSlot.mjs";
import { useInternationalization as X } from "@progress/kendo-react-intl";
import { DAYS_IN_WEEK_COUNT as $ } from "../../constants/index.mjs";
import { toRanges as ee } from "../../services/rangeService.mjs";
import { toSlots as te } from "../../services/slotsService.mjs";
import { toOccurrences as oe } from "../../services/occurrenceService.mjs";
import { toItems as re } from "../../services/itemsService.mjs";
import { ShowMoreItemsButton as ae } from "../../components/ShowMoreItemsButton.mjs";
import { SchedulerEditItem as ne } from "../../items/SchedulerEditItem.mjs";
import { useSchedulerPropsContext as se, useSchedulerDataContext as me, useSchedulerDateContext as ie, useSchedulerActiveViewContext as ce, useSchedulerViewsContext as le, useSchedulerGroupsContext as de, useSchedulerOrientationContext as ue, useSchedulerDateRangeContext as fe, useSchedulerFieldsContext as he } from "../../context/SchedulerContext.mjs";
import { SchedulerResourceIteratorContext as _ } from "../../context/SchedulerResourceIteratorContext.mjs";
import { DateHeaderCell as ge } from "../../components/DateHeaderCell.mjs";
const De = { skeleton: "dd" }, Y = (o) => {
const { group: i, timezone: n, resources: d } = se(), E = o.editItem || ne, h = o.editSlot || Q, [u] = me(), [g, p] = ie(), [, T] = ce(), k = le(), D = de(), S = ue(), s = fe(), F = X(), M = he(), w = o.itemsPerSlot || Ee.itemsPerSlot, c = t.useMemo(
() => ee(s, { step: v * $, timezone: n }),
[s.start.getTime(), s.end.getTime(), n]
), l = t.useMemo(
() => te(s, { step: v }, { groups: D, ranges: c }),
[s.start.getTime(), s.end.getTime(), D, c]
), R = t.useMemo(
() => oe(u, { dateRange: s, fields: M, timezone: n }),
[u, s.start.getTime(), s.end.getTime(), M, n]
), f = t.useMemo(
() => re(R, { timezone: n }, { groups: D, ranges: c }),
[R, n, D, c]
), U = t.useCallback(
(e) => {
const r = k.find((m) => m.props.name === "day");
!T || !r || !r.props.name || !e.target.slot || (T(r.props.name, e), p(e.target.slot.start, e));
},
[T, k]
);
t.useMemo(() => Z(f, l, !0), [f, l]), t.useMemo(() => j(f, l, !0), [f, l]);
const x = /* @__PURE__ */ t.createElement(_.Consumer, null, ({ groupIndex: e }) => /* @__PURE__ */ t.createElement("div", { className: "k-scheduler-row", key: e }, l.filter((r) => r.group.index === e && r.range.index === 0).map((r, m) => /* @__PURE__ */ t.createElement(
ge,
{
as: o.dateHeaderCell,
key: m,
"data-dayslot-index": m,
date: C.fromLocalDate(
new Date(
r.zonedEnd.getTime() - (r.zonedEnd.getTime() - r.zonedStart.getTime()) / 2
),
n
),
start: r.start,
end: r.end,
format: { skeleton: "EEEE" }
}
)))), N = /* @__PURE__ */ t.createElement(_.Consumer, null, ({ groupIndex: e }) => c.map((r, m) => /* @__PURE__ */ t.createElement("div", { className: "k-scheduler-row", key: m }, l.filter((a) => a.group.index === e && a.range.index === m).map((a, y, B) => /* @__PURE__ */ t.createElement(
h,
{
slot: o.slot,
viewSlot: o.viewSlot,
key: y,
form: o.form,
...a,
expandable: {
offsetTop: 30,
offsetBottom: w < a.items.length ? 15 : 0
},
onDataAction: o.onDataAction,
col: S === "horizontal" ? B.length * (e || 0) + y : y,
row: S === "horizontal" ? m : c.length * (e || 0) + m,
editable: o.editable,
className: b({
"k-other-month": a.start.getMonth() < g.getMonth() || a.start.getMonth() > g.getMonth()
})
},
/* @__PURE__ */ t.createElement("span", { className: "k-link k-nav-day" }, F.formatDate(
new Date(
a.end.getTime() - (a.end.getTime() - a.start.getTime()) / 2
),
De
)),
w < a.items.length && /* @__PURE__ */ t.createElement(ae, { slot: a, onClick: U })
)))));
return /* @__PURE__ */ t.createElement(
K,
{
props: o,
slots: l,
ranges: c,
className: b("k-scheduler-monthview", o.className)
},
/* @__PURE__ */ t.createElement("div", { className: "k-scheduler-head" }, S === "horizontal" ? /* @__PURE__ */ t.createElement(P, { nested: !0, resources: d, group: i }, x) : /* @__PURE__ */ t.createElement(A, { resources: d, group: i }, x)),
/* @__PURE__ */ t.createElement("div", { className: "k-scheduler-body" }, S === "horizontal" ? /* @__PURE__ */ t.createElement(P, { resources: d, group: i }, N) : /* @__PURE__ */ t.createElement(A, { nested: !0, resources: d, group: i }, N), f.filter((e) => e.order === null || e.order < w).sort(q).map((e) => /* @__PURE__ */ t.createElement(
E,
{
item: o.item,
viewItem: o.viewItem,
form: o.form,
key: e.isRecurring ? `${e.uid}:${e.group.index}:${e.range.index}:${e.originalStart}` : `${e.uid}:${e.group.index}:${e.range.index}`,
...e,
onDataAction: o.onDataAction,
style: { transform: "translateY(30px)" },
vertical: !1,
editable: o.editable,
ignoreIsAllDay: !0
}
)))
);
}, Se = ({ intl: o, date: i, timezone: n }) => {
const d = z(L(V(i)), o.firstDay()), E = W(z(G(V(i)), o.firstDay()), $), h = C.fromUTCDate(I(d), n), u = C.fromUTCDate(I(E), n), g = new Date(h.getTime()), p = new Date(u.getTime());
return {
start: g,
end: p,
zonedStart: h,
zonedEnd: u
};
}, Ee = {
name: "month",
dateRange: Se,
slotDuration: 24 * 60,
slotDivision: 1,
itemsPerSlot: 2,
numberOfDays: 31,
title: (o) => o.toLanguageString(O, J[O]),
selectedDateFormat: "{0:Y}",
selectedShortDateFormat: "{0:Y}"
}, pe = {
itemsPerSlot: H.number
};
Y.propTypes = pe;
Y.displayName = "KendoReactSchedulerMonthView";
export {
Y as MonthView,
Ee as monthViewDefaultProps
};