@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
130 lines (129 loc) • 7.39 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 e from "react";
import B from "prop-types";
import { BaseView as Z } from "../../components/BaseView.mjs";
import { VerticalResourceIterator as R } from "../common/VerticalResourceIterator.mjs";
import { dateTitle as C, messages as d, timeTitle as A, eventTitle as z, allDay as L, noEvents as _, agendaViewTitle as M } from "../../messages/index.mjs";
import { DAYS_IN_WEEK_COUNT as G } from "../../constants/index.mjs";
import { MS_PER_DAY as V, ZonedDate as v, firstDayInWeek as j, getDate as W, addDays as q } from "@progress/kendo-date-math";
import { useDir as H, classNames as J, IconWrap as I } from "@progress/kendo-react-common";
import { useInternationalization as Q, useLocalization as X } from "@progress/kendo-react-intl";
import { toRanges as ee } from "../../services/rangeService.mjs";
import { toOccurrences as te } from "../../services/occurrenceService.mjs";
import { toItems as ae } from "../../services/itemsService.mjs";
import { mapItemsToSlots as le, mapSlotsToItems as re, toUTCDateTime as b } from "../../utils/index.mjs";
import { SchedulerEditTask as ce } from "../../tasks/SchedulerEditTask.mjs";
import { SchedulerEditSlot as oe } from "../../slots/SchedulerEditSlot.mjs";
import { useSchedulerPropsContext as se, useSchedulerDataContext as ne, useSchedulerGroupsContext as me, useSchedulerFieldsContext as ie, useSchedulerDateRangeContext as de } from "../../context/SchedulerContext.mjs";
import { SchedulerResourceIteratorContext as x } from "../../context/SchedulerResourceIteratorContext.mjs";
import { caretAltRightIcon as F, caretAltLeftIcon as P } from "@progress/kendo-svg-icons";
import { toSlots as ue } from "../../services/slotsService.mjs";
import { useCellSync as U } from "../../hooks/useCellSync.mjs";
const K = (t) => {
const { group: l, timezone: a, resources: m } = se(), f = t.editTask || ce, D = t.editSlot || oe, i = e.useRef(null), o = H(i), s = Q(), n = X(), [T] = ne(), S = me(), p = ie(), r = de(), u = e.useMemo(
() => ee(r, { step: V, timezone: a }),
[r.start.getTime(), r.end.getTime(), a]
), g = e.useMemo(
() => ue(r, { step: V }, { groups: S, ranges: u }),
[r.start.getTime(), r.end.getTime(), a, S, u]
), y = e.useMemo(
() => te(T, { dateRange: r, fields: p, timezone: a }),
[T, r.start.getTime(), r.end.getTime(), p, a]
), h = e.useMemo(
() => ae(y, { timezone: a }, { groups: S, ranges: u }),
[y, a, S, u]
), O = e.useMemo(() => J("k-scheduler-agendaview", t.className), [t.className]);
return U({ element: i, selector: ".k-scheduler-datecolumn", explicitDepth: !1 }), U({ element: i, selector: ".k-scheduler-timecolumn", explicitDepth: !1 }), e.useMemo(() => le(h, g, !0), [h, g]), e.useMemo(() => re(h, g, !0), [h, g]), /* @__PURE__ */ e.createElement(
Z,
{
ref: i,
id: t.id,
style: t.style,
className: O,
props: t,
slots: h,
ranges: u
},
/* @__PURE__ */ e.createElement("div", { className: "k-scheduler-head" }, /* @__PURE__ */ e.createElement(R, { resources: m, group: l }, /* @__PURE__ */ e.createElement(x.Consumer, null, ({ groupIndex: k }) => /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-row", key: k }, /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell k-heading-cell k-group-cell k-scheduler-datecolumn" }, n.toLanguageString(C, d[C])), /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell k-heading-cell k-group-cell k-scheduler-timecolumn" }, n.toLanguageString(A, d[A])), /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell k-heading-cell k-scheduler-eventcolumn" }, n.toLanguageString(z, d[z])))))),
/* @__PURE__ */ e.createElement("div", { className: "k-scheduler-body" }, /* @__PURE__ */ e.createElement(R, { resources: m, group: l, nested: !0 }, /* @__PURE__ */ e.createElement(x.Consumer, null, ({ groupIndex: k }) => g.filter((c) => c.group.index === (k || 0)).map((c, N, Y) => /* @__PURE__ */ e.createElement(
"div",
{
className: "k-scheduler-row k-scheduler-content",
key: `${k}:${N}`
},
/* @__PURE__ */ e.createElement(
D,
{
...c,
editable: t.editable,
row: Y.length * (k || 0) + N,
col: 0,
slot: t.slot,
viewSlot: t.viewSlot,
className: "k-scheduler-datecolumn k-group-cell"
},
/* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("strong", { className: "k-scheduler-agendaday" }, s.formatDate(c.zonedStart, "dd")), /* @__PURE__ */ e.createElement("em", { className: "k-scheduler-agendaweek" }, s.formatDate(c.zonedStart, "EEEE")), /* @__PURE__ */ e.createElement("span", { className: "k-scheduler-agendadate" }, s.formatDate(c.zonedStart, "y")))
),
/* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell k-group-content" }, c.items.length ? c.items.map((E, w) => /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-row", key: w }, /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell k-scheduler-timecolumn" }, /* @__PURE__ */ e.createElement("div", null, E.tail && /* @__PURE__ */ e.createElement(
I,
{
name: o === "rtl" ? "caret-alt-right" : "caret-alt-left",
icon: o === "rtl" ? F : P
}
), E.isAllDay ? n.toLanguageString(
L,
d[L]
) : ge(s, E), E.head && /* @__PURE__ */ e.createElement(
I,
{
name: o === "rtl" ? "caret-alt-left" : "caret-alt-right",
icon: o === "rtl" ? P : F
}
))), /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell" }, /* @__PURE__ */ e.createElement(
f,
{
key: `${N}:${w}`,
...E,
onDataAction: t.onDataAction,
task: t.task,
viewTask: t.viewTask,
editable: t.editable
}
)))) : /* @__PURE__ */ e.createElement("div", { className: "k-scheduler-cell k-heading-cell k-group-cell" }, n.toLanguageString(_, d[_])))
)))))
);
}, ge = (t, l) => {
let a = "{0:t}-{1:t}";
return l.head ? a = "{0:t}" : l.tail && (a = "{1:t}"), t.format(a, l.zonedStart, l.zonedEnd);
}, $ = (t) => W(t), he = (t, l) => W(q(t, l || 1)), ke = ({ intl: t, date: l, numberOfDays: a = 1, timezone: m }) => {
const f = v.fromLocalDate(l, m), D = $(a === G ? j(f, t.firstDay()) : f), i = he(D, a), o = v.fromUTCDate(b(D), m), s = v.fromUTCDate(b(i), m), n = new Date(o.getTime()), T = new Date(s.getTime());
return {
start: n,
end: T,
zonedStart: o,
zonedEnd: s
};
}, xe = {
name: "agenda",
title: (t) => t.toLanguageString(M, d[M]),
dateRange: ke,
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
slotDuration: 60 * 24,
slotDivision: 1,
numberOfDays: G
}, Ee = {
title: B.any
};
K.propTypes = Ee;
K.displayName = "KendoReactSchedulerAgendaView";
export {
K as AgendaView,
xe as agendaViewDefaultProps
};