@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
367 lines (366 loc) • 14.1 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 a from "react";
import c from "prop-types";
import { MS_PER_DAY as U, ZonedDate as P, Day as me, getDate as ze, addDays as Ae } from "@progress/kendo-date-math";
import { BaseView as Ne } from "../../components/BaseView.mjs";
import { HorizontalResourceIterator as G } from "../common/HorizontalResourceIterator.mjs";
import { DayViewGroupRowContent as se } from "./DayViewGroupRowContent.mjs";
import { VerticalResourceIterator as ce } from "../common/VerticalResourceIterator.mjs";
import { DayViewAllDayRowContent as I } from "./DayViewAllDayRowContent.mjs";
import { DayViewRowContent as de } from "./DayViewRowContent.mjs";
import { classNames as ue } from "@progress/kendo-react-common";
import { isInTimeRange as A, mapItemsToSlots as De, mapSlotsToItems as ge, isInDaysRange as Fe, intersects as fe, last as ke, first as we, toUTCDateTime as ye } from "../../utils/index.mjs";
import { useInternationalization as He } from "@progress/kendo-react-intl";
import { MS_PER_MINUTE as Oe } from "../../constants/index.mjs";
import { SchedulerEditSlot as _e } from "../../slots/SchedulerEditSlot.mjs";
import { SchedulerEditItem as Ve } from "../../items/SchedulerEditItem.mjs";
import { useSchedulerPropsContext as Pe, useSchedulerDataContext as Le, useSchedulerGroupsContext as Ue, useSchedulerOrientationContext as Ge, useSchedulerFieldsContext as Ie, useSchedulerDateRangeContext as Ye } from "../../context/SchedulerContext.mjs";
import { SchedulerResourceIteratorContext as O } from "../../context/SchedulerResourceIteratorContext.mjs";
import { CurrentTimeMarker as Ee } from "../../components/CurrentTimeMarket.mjs";
import { DateHeaderCell as Be } from "../../components/DateHeaderCell.mjs";
import { toRanges as Se } from "../../services/rangeService.mjs";
import { toSlots as Te } from "../../services/slotsService.mjs";
import { toOccurrences as Ke } from "../../services/occurrenceService.mjs";
import { toItems as he } from "../../services/itemsService.mjs";
const _ = 0, V = 1, Xe = /* @__PURE__ */ a.createElement("div", { className: "k-scheduler-cell k-side-cell" }), ve = (e) => {
var J, Q, p, ee, te, ae, ne, re, oe, ie, le;
const { group: v, timezone: i, resources: C } = Pe(), M = He(), N = e.editItem || Ve, g = e.editSlot || _e, b = e.showWorkHours, d = (J = e.numberOfDays) != null ? J : k.numberOfDays, w = (Q = e.slotDivisions) != null ? Q : k.slotDivisions, Y = (p = e.slotDuration) != null ? p : k.slotDuration, y = (ee = e.workWeekStart) != null ? ee : k.workWeekStart, F = (te = e.workWeekEnd) != null ? te : k.workWeekEnd, B = e.currentTimeMarker === !1 ? !1 : k.currentTimeMarker, R = M.parseDate(
(ne = (ae = e.workDayStart) != null ? ae : e.isWorkDayStart) != null ? ne : k.isWorkDayStart
), x = M.parseDate((oe = (re = e.workDayEnd) != null ? re : e.isWorkDayEnd) != null ? oe : k.isWorkDayEnd), K = M.parseDate((ie = e.startTime) != null ? ie : k.startTime), X = M.parseDate((le = e.endTime) != null ? le : k.endTime), [Z] = Le(), E = Ue(), L = Ge(), j = Ie(), l = Ye(), S = a.useMemo(
() => b ? R : K,
[b, R, K]
), T = a.useMemo(() => b ? x : X, [b, x, X]), $ = a.useMemo(
() => Se(l, { step: U * d, timezone: i }).map((t) => ({ ...t, isAllDay: !0 })),
[l.start.getTime(), l.end.getTime(), d]
), m = a.useMemo(
() => Se(l, { step: U, timezone: i }).map((t) => ({ ...t, isAllDay: !1 })),
[l.start.getTime(), l.end.getTime(), i]
), h = a.useMemo(
() => Te(l, { step: U }, { groups: E, ranges: $ }),
[l.start.getTime(), l.end.getTime(), i, $, E]
), u = a.useMemo(
() => Te(
l,
{ step: Y * Oe / w },
{ groups: E, ranges: m }
).filter(
(t) => T.getTime() === S.getTime() || A(t.zonedStart, S, T)
),
[
l.start.getTime(),
l.end.getTime(),
Y,
w,
S.getTime(),
T.getTime(),
E,
m
]
), W = a.useMemo(
() => Ke(Z, { dateRange: l, fields: j, timezone: i }),
[Z, l.start.getTime(), l.end.getTime(), j, i]
), Ce = a.useMemo(() => W.filter((t) => t.isAllDay), [W]), Me = a.useMemo(() => W.filter((t) => !t.isAllDay), [W]), z = a.useMemo(
() => he(Ce, { timezone: i }, { groups: E, ranges: $ }),
[W, i, E, $]
), H = a.useMemo(
() => he(Me, { timezone: i }, { groups: E, ranges: m }).filter(
(t) => S.getTime() === T.getTime() || A(t.zonedStart, S, T) || A(t.zonedEnd, S, T) || A(
new Date(t.zonedEnd.getTime() - (t.zonedEnd.getTime() - t.zonedStart.getTime()) / 2),
S,
T
)
),
[W, i, E, m, S.getTime(), T.getTime()]
);
a.useMemo(() => De(z, h, !1), [z, h]), a.useMemo(() => ge(z, h, !1), [z, h]), a.useMemo(() => De(H, u, !1), [H, u]), a.useMemo(() => ge(H, u, !1), [H, u]);
const q = /* @__PURE__ */ a.createElement(O.Consumer, null, ({ groupIndex: t }) => /* @__PURE__ */ a.createElement("div", { className: "k-scheduler-row", key: t }, m.map((n, o) => /* @__PURE__ */ a.createElement(
Be,
{
as: e.dateHeaderCell,
key: o,
date: P.fromLocalDate(
new Date(
n.zonedEnd.getTime() - (n.zonedEnd.getTime() - n.zonedStart.getTime()) / 2
),
i
),
start: n.start,
end: n.end,
format: { skeleton: "MEd" }
}
)))), be = /* @__PURE__ */ a.createElement(O.Consumer, null, ({ groupIndex: t }) => /* @__PURE__ */ a.createElement("div", { key: t, className: "k-scheduler-row" }, $.map(
(n, o) => h.filter((r) => r.group.index === t && r.range.index === o).map((r, D, s) => /* @__PURE__ */ a.createElement(
g,
{
...r,
onDataAction: e.onDataAction,
form: e.form,
slot: e.slot,
viewSlot: e.viewSlot,
key: `${r.start.getTime()}:${r.group.index}`,
row: 0,
col: L === "horizontal" ? s.length * (t || 0) + D : D,
isWorkDay: 0 <= r.zonedStart.getDay() + (d - y) && (r.zonedStart.getDay() + (d - y)) % d <= F + (d - y),
expandable: !0
}
))
))), $e = a.useMemo(
() => ue(e.name === "week" ? "k-scheduler-weekview" : "k-scheduler-dayview", e.className),
[e.name, e.className]
), Re = a.useCallback(
(t, n, o) => m.map(
(r, D) => u.filter(
(s) => s.index === t.index && s.range.index === D && s.group.index === o
).map((s) => /* @__PURE__ */ a.createElement(
g,
{
key: `${s.start.getTime()}:${s.group.index}`,
...s,
onDataAction: e.onDataAction,
slot: e.slot,
viewSlot: e.viewSlot,
form: e.form,
row: n + V,
col: m.length * (o || 0) + D,
isWorkHour: A(s.zonedStart, R, x),
isWorkDay: Fe(s.zonedEnd.getDay(), y, F),
editable: e.editable
}
))
),
[
m,
g,
e.editable,
e.form,
e.onDataAction,
e.slot,
e.viewSlot,
u,
x,
R,
F,
y
]
), xe = a.useCallback(
(t, n, o) => h.filter((r) => r.group.index === n && r.range.index === o).map((r, D) => /* @__PURE__ */ a.createElement(
g,
{
slot: e.slot,
viewSlot: e.viewSlot,
form: e.form,
...r,
onDataAction: e.onDataAction,
key: `${r.start.getTime()}:${r.group.index}`,
className: "k-scheduler-alldays-slot",
row: t * (n || 0) + (n || 0) * V,
col: D,
expandable: !0
}
)),
[g, h, e.form, e.onDataAction, e.slot, e.viewSlot]
), We = a.useCallback(
(t, n, o, r) => m.map(
(D, s) => u.filter(
(f) => f.index === t.index && f.group.index === o && f.range.index === s
).map((f) => /* @__PURE__ */ a.createElement(
g,
{
slot: e.slot,
viewSlot: e.viewSlot,
form: e.form,
onDataAction: e.onDataAction,
...f,
key: `${f.start.getTime()}:${f.group.index}`,
row: n.length * (o || 0) + r + (o || 0) * V + V,
col: s,
editable: e.editable,
isWorkHour: A(f.zonedStart, R, x),
isWorkDay: 0 <= f.zonedStart.getDay() + (d - y) && (f.zonedStart.getDay() + (d - y)) % d <= F + (d - y)
}
))
),
[
g,
d,
e.editable,
e.form,
e.onDataAction,
e.slot,
e.viewSlot,
m,
u,
x,
R,
F,
y
]
);
return /* @__PURE__ */ a.createElement(
Ne,
{
id: e.id,
props: e,
style: e.style,
className: $e,
ranges: [...$, ...m],
slots: [...h, ...u]
},
/* @__PURE__ */ a.createElement("div", { className: "k-scheduler-head" }, L === "horizontal" ? /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
G,
{
nested: !0,
group: v,
resources: C,
rowContent: se,
childRowContent: se
},
q
), /* @__PURE__ */ a.createElement(
G,
{
group: v,
resources: C,
rowContent: I,
childRowContent: I
},
be
), z.map((t) => /* @__PURE__ */ a.createElement(
N,
{
key: t.isRecurring ? `${t.uid}:${t.group.index}:${t.range.index}:${t.originalStart}` : `${t.uid}:${t.group.index}:${t.range.index}`,
...t,
form: e.form,
onDataAction: e.onDataAction,
item: e.item,
viewItem: e.viewItem,
editable: e.editable,
vertical: !1
}
))) : /* @__PURE__ */ a.createElement(ce, { group: v, resources: C, cellContent: Xe }, q)),
/* @__PURE__ */ a.createElement("div", { className: "k-scheduler-body" }, L === "horizontal" ? /* @__PURE__ */ a.createElement(a.Fragment, null, u.filter((t) => t.group.index === _ && t.range.index === _).map((t, n) => /* @__PURE__ */ a.createElement(a.Fragment, { key: t.index }, /* @__PURE__ */ a.createElement(
G,
{
nested: !1,
group: v,
resources: C,
rowContent: de,
rowContentProps: {
timeHeaderCell: e.timeHeaderCell,
isMaster: n % w === 0,
isLast: (n + 1) % w === 0,
slot: t
}
},
/* @__PURE__ */ a.createElement(O.Consumer, null, ({ groupIndex: o }) => /* @__PURE__ */ a.createElement(
"div",
{
className: ue("k-scheduler-row", {
"k-middle-row": (n + 1) % w !== 0
})
},
Re(t, n, o)
))
))), B !== !1 && fe(we(m).start, ke(m).end, /* @__PURE__ */ new Date(), /* @__PURE__ */ new Date(), !0) && /* @__PURE__ */ a.createElement(Ee, null)) : /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(ce, { nested: !0, group: v, resources: C }, /* @__PURE__ */ a.createElement(O.Consumer, null, ({ groupIndex: t }) => /* @__PURE__ */ a.createElement(a.Fragment, { key: t }, /* @__PURE__ */ a.createElement("div", { className: "k-scheduler-row" }, /* @__PURE__ */ a.createElement(I, { groupIndex: t }, $.map((n, o) => {
const r = u.filter(
(D) => D.group.index === t && D.range.index === _
).length;
return xe(r, t, o);
}))), u.filter(
(n) => n.group.index === t && n.range.index === _
).map((n, o, r) => /* @__PURE__ */ a.createElement("div", { className: "k-scheduler-row", key: n.index }, /* @__PURE__ */ a.createElement(
de,
{
slot: n,
isMaster: o % w === 0,
isLast: (o + 1) % w === 0,
timeHeaderCell: e.timeHeaderCell
},
We(n, r, t, o)
))), B !== !1 && fe(
we(m).start,
ke(m).end,
/* @__PURE__ */ new Date(),
/* @__PURE__ */ new Date(),
!0
) && /* @__PURE__ */ a.createElement(Ee, { groupIndex: t })))), z.map((t) => /* @__PURE__ */ a.createElement(
N,
{
key: t.isRecurring ? `${t.uid}:${t.group.index}:${t.range.index}:${t.originalStart}` : `${t.uid}:${t.group.index}:${t.range.index}`,
...t,
onDataAction: e.onDataAction,
viewItem: e.viewItem,
item: e.item,
form: e.form,
editable: e.editable,
vertical: !1
}
))), H.map((t) => /* @__PURE__ */ a.createElement(
N,
{
key: t.isRecurring ? `${t.uid}:${t.group.index}:${t.range.index}:${t.originalStart}` : `${t.uid}:${t.group.index}:${t.range.index}`,
...t,
format: "t",
onDataAction: e.onDataAction,
viewItem: e.viewItem,
item: e.item,
form: e.form,
editable: e.editable,
vertical: !0
}
)))
);
}, Ze = ({ date: e, numberOfDays: v = 1, timezone: i }) => {
const C = P.fromLocalDate(e, i), M = ze(C), N = Ae(M, v), g = P.fromUTCDate(ye(M), i), b = P.fromUTCDate(ye(N), i), d = new Date(g.getTime()), w = new Date(b.getTime());
return {
start: d,
end: w,
zonedStart: g,
zonedEnd: b
};
}, k = {
name: "multi-day",
title: "Multi Day",
currentTimeMarker: !0,
dateRange: Ze,
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
numberOfDays: 1,
startTime: "00:00",
endTime: "23:59",
isWorkDayStart: "08:00",
isWorkDayEnd: "17:00",
workWeekStart: me.Monday,
workWeekEnd: me.Friday,
slotDivisions: 2,
slotDuration: 60,
showCurrentTime: !0,
defaultShowWorkHours: !0
};
ve.propTypes = {
currentTimeMarker: c.bool,
name: c.string,
numberOfDays: c.number,
startTime: c.string,
endTime: c.string,
workDayStart: c.string,
workDayEnd: c.string,
workWeekStart: c.number,
workWeekEnd: c.any,
slotDivisions: c.number,
slotDuration: c.number,
showWorkHours: c.bool,
selectedDateFormat: c.string,
selectedShortDateFormat: c.string
};
ve.displayName = "KendoReactSchedulerMultiDayView";
export {
ve as MultiDayView,
k as multiDayViewDefaultProps
};