@progress/kendo-react-scheduler
Version:
React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package
370 lines (369 loc) • 13.6 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 n from "prop-types";
import { getModelFields as Me, toSchedulerGroups as Le, findMaster as y, setField as d, getField as s } from "./utils/index.mjs";
import { validatePackage as Oe, useRtl as Ne, clone as w, classNames as We, WatermarkOverlay as Pe } from "@progress/kendo-react-common";
import { SchedulerContext as He } from "./context/SchedulerContext.mjs";
import { useControlledState as N } from "./hooks/useControlledState.mjs";
import { useInternationalization as ze, useLocalization as _e } from "@progress/kendo-react-intl";
import { SchedulerHeader as Be } from "./components/header/SchedulerHeader.mjs";
import { SchedulerNavigation as ce } from "./components/header/navigation/SchedulerNavigation.mjs";
import { SchedulerViewSelector as Ue } from "./components/header/view-selector/SchedulerViewSelector.mjs";
import { addMonths as Y, addDays as $, ZonedDate as Ge } from "@progress/kendo-date-math";
import { SchedulerFooter as Ke } from "./components/footer/SchedulerFooter.mjs";
import { ButtonGroup as Ze, Button as R, ToolbarSpacer as je } from "@progress/kendo-react-buttons";
import { today as ee, messages as T, previousTitle as te, nextTitle as re, showFullDay as ae, showWorkDay as ne } from "./messages/index.mjs";
import { NavigationDatePicker as qe } from "./components/header/navigation/NavigationDatePicker.mjs";
import { ViewSelectorList as Je } from "./components/header/view-selector/ViewSelectorList.mjs";
import { BusinessHours as Qe } from "./components/footer/bussiness-hours/BussinessHours.mjs";
import { DayView as P, dayViewDefaultProps as Xe } from "./views/day/DayView.mjs";
import { packageMetadata as Ye } from "./package-metadata.mjs";
import { caretAltRightIcon as oe, caretAltLeftIcon as le, clockIcon as $e } from "@progress/kendo-svg-icons";
import { DATA_ACTION as W } from "./constants/index.mjs";
import { AgendaView as et, agendaViewDefaultProps as tt } from "./views/agenda/AgendaView.mjs";
import { MonthView as rt, monthViewDefaultProps as at } from "./views/month/MonthView.mjs";
import { WeekView as nt, weekViewDefaultProps as ot } from "./views/week/WeekView.mjs";
import { WorkWeekView as lt, workWeekDefaultProps as ct } from "./views/week/WorkWeekView.mjs";
import { TimelineView as st, timeLineViewDefaultProps as it } from "./views/time/TimelineView.mjs";
const ut = "{0:D}", dt = "{0:d}", mt = "application", k = /* @__PURE__ */ new Map();
k.set(et, tt);
k.set(P, Xe);
k.set(rt, at);
k.set(nt, ot);
k.set(lt, ct);
k.set(st, it);
const se = a.forwardRef((r, ie) => {
var J, Q, X;
const ue = !Oe(Ye, { component: "Scheduler" }), { timezone: V, onDataChange: A } = r, f = a.useRef(null), b = a.useRef(null);
a.useImperativeHandle(b, () => ({ props: r, element: f.current })), a.useImperativeHandle(ie, () => b.current);
const I = Ne(f), F = ze(), C = _e(), { fields: t } = a.useMemo(() => Me(r.modelFields), [r.modelFields]), [p, g] = N(
r.defaultDate || h.defaultDate,
r.date,
r.onDateChange
), x = a.Children.toArray(r.children || []).map(
(e) => {
var l;
return a.isValidElement(e) ? a.cloneElement(e, { ...k.get(e.type), ...(l = e.props) != null ? l : {} }) : e;
}
), de = a.cloneElement(/* @__PURE__ */ a.createElement(P, null), k.get(P)), [H, z] = N(
r.defaultView || x[0] && x[0].props.name || "day",
r.view,
r.onViewChange
), [S, _] = N(!0), i = x.find((e) => e.props.name === H) || x[0] || de, D = ((J = r.data) != null ? J : h.data) || h.data, me = Le(r.group, r.resources), fe = r.group && r.group.orientation ? r.group.orientation : "horizontal", ge = i.props.selectedDateFormat || ut, he = i.props.selectedShortDateFormat || dt, B = i.props.slotDuration, pe = i.props.dateRange !== void 0 ? typeof i.props.dateRange == "function" ? i.props.dateRange.call(void 0, {
intl: F,
date: p,
timezone: V,
numberOfDays: i.props.numberOfDays,
workWeekStart: i.props.workWeekStart || F.firstDay(),
workWeekEnd: i.props.workWeekEnd || (F.firstDay() + i.props.numberOfDays) % 6
}) : i.props.dateRange : { start: h.defaultDate, end: h.defaultDate }, v = a.useCallback(
({
created: e = [],
updated: l = [],
deleted: m = []
}) => {
if (A) {
const o = {
created: e,
updated: l,
deleted: m
};
A.call(void 0, o);
}
},
[A]
), U = a.useCallback(
(e) => {
const l = [e.dataItem];
v({ created: l });
},
[v]
), G = a.useCallback(
(e) => {
const l = [], m = [];
if (e.series)
if (Array.isArray(e.dataItem))
e.dataItem.forEach((o) => {
const c = w(y(e.dataItem, t, D)), u = w(o);
d(u, t.originalStart, s(c, t.originalStart)), d(u, t.recurrenceId, s(c, t.recurrenceId)), d(
u,
t.recurrenceExceptions,
s(c, t.recurrenceExceptions)
), m.push(u);
});
else {
const o = w(y(e.dataItem, t, D)), c = w(e.dataItem);
d(c, t.originalStart, s(o, t.originalStart)), d(c, t.recurrenceId, s(o, t.recurrenceId)), d(
c,
t.recurrenceExceptions,
s(o, t.recurrenceExceptions)
), m.push(c);
}
else if (Array.isArray(e.dataItem))
e.dataItem.forEach((o) => {
const c = s(o, t.recurrenceRule) !== null && s(o, t.recurrenceRule) !== void 0;
if (s(o, t.recurrenceId) !== null && s(o, t.recurrenceId) !== void 0 && c) {
const E = w(y(o, t, D)), O = s(o, t.originalStart), Fe = s(E, t.recurrenceExceptions) || [];
d(E, t.recurrenceExceptions, [...Fe, O]), d(o, t.recurrenceRule, null), m.push(E), l.push(o);
} else
m.push(o);
});
else {
const o = s(e.dataItem, t.recurrenceRule) !== null && s(e.dataItem, t.recurrenceRule) !== void 0;
if (s(e.dataItem, t.recurrenceId) !== null && s(e.dataItem, t.recurrenceId) !== void 0 && o) {
const u = w(y(e.dataItem, t, D)), E = s(e.dataItem, t.originalStart), O = s(u, t.recurrenceExceptions) || [];
d(u, t.recurrenceExceptions, [...O, E]), d(e.dataItem, t.recurrenceRule, null), m.push(u), l.push(e.dataItem);
} else
m.push(e.dataItem);
}
v({ updated: m, created: l });
},
[v, t, D]
), K = a.useCallback(
(e) => {
const l = [], m = [];
if (e.series) {
const o = w(y(e.dataItem, t, D)), c = w(e.dataItem);
d(c, t.originalStart, s(o, t.originalStart)), d(c, t.recurrenceId, s(o, t.recurrenceId)), d(c, t.recurrenceRule, s(o, t.recurrenceRule)), d(c, t.recurrenceExceptions, s(o, t.recurrenceExceptions)), m.push(c);
} else if (!(s(e.dataItem, t.recurrenceRule) !== null && s(e.dataItem, t.recurrenceRule) !== void 0))
m.push(e.dataItem);
else {
const c = w(y(e.dataItem, t, D)), u = s(e.dataItem, t.originalStart), E = s(c, t.recurrenceExceptions) || [];
d(c, t.recurrenceExceptions, [...E, u]), d(e.dataItem, t.recurrenceRule, null), l.push(c);
}
v({ updated: l, deleted: m });
},
[v, t, D]
), Z = a.useCallback(
(e) => {
switch (e.type) {
case W.create:
U(e);
break;
case W.update:
G(e);
break;
case W.remove:
K(e);
break;
}
},
[U, K, G]
), De = a.useCallback(
(e, l) => {
z(e, {
...l,
target: b.current
});
},
[z, b]
), we = a.useCallback(
(e, l) => {
g(e, {
...l,
target: b.current
});
},
[g, b]
), be = a.useCallback(
(e) => {
e.value && g(e.value, {
...e,
target: b.current,
nativeEvent: e.nativeEvent
});
},
[g, b]
), ke = a.useCallback(
(e) => {
var c, u;
e.preventDefault();
const l = (u = (c = i.props.step) != null ? c : i.props.numberOfDays) != null ? u : 1, o = l > 27 ? Y(p, Math.round(l / 27)) : $(p, l);
g(o, e);
},
[p, g, i.props.numberOfDays, i.props.step]
), Ie = a.useCallback(
(e) => {
var c, u;
e.preventDefault();
const l = (u = (c = i.props.step) != null ? c : i.props.numberOfDays) != null ? u : 1, o = l > 27 ? Y(p, -Math.round(l / 27)) : $(p, -l);
g(o, e);
},
[p, g, i.props.numberOfDays, i.props.step]
), Ee = a.useCallback(
(e) => {
e.preventDefault();
const l = Ge.fromLocalDate(/* @__PURE__ */ new Date(), V);
g(new Date(l.getTime()), e);
},
[g, V]
), ve = a.useCallback(() => {
_(!S);
}, [_, S]), ye = a.useCallback(() => {
f.current && (f.current.style.boxShadow = "0 0.5px 0.5px 0.5px rgba(0, 0, 0, .12)");
}, [f]), xe = a.useCallback(() => {
f.current && (f.current.style.boxShadow = "");
}, [f]), Se = a.useMemo(
() => {
var e;
return { ...r.style, height: (e = r.height) != null ? e : h.height };
},
[r.height, r.style]
), Ce = a.useMemo(
() => We(
{ "k-rtl": r.rtl !== void 0 ? r.rtl : I === "rtl" },
"k-scheduler",
r.className
),
[r.className, r.rtl, I]
), M = C.toLanguageString(ee, T[ee]), j = C.toLanguageString(te, T[te]), q = C.toLanguageString(re, T[re]), Re = i.props.header || r.header || h.header, Te = i.props.footer || r.footer || h.footer, Ve = ce, [L, Ae] = a.useState(null);
return /* @__PURE__ */ a.createElement(
He,
{
element: f,
props: r,
views: x,
fields: t,
groups: me,
dateRange: pe,
orientation: fe,
dateFormat: { dateFormat: ge, shortDateFormat: he },
date: [p, we],
activeView: [H, De],
selection: [L, Ae],
data: [D, Z]
},
/* @__PURE__ */ a.createElement(
"div",
{
ref: f,
id: r.id,
style: Se,
className: Ce,
tabIndex: (Q = r.tabIndex) != null ? Q : h.tabIndex,
dir: I,
role: r.role || mt,
"aria-label": r.ariaLabel,
"aria-labelledby": r.ariaLabelledby,
"aria-activedescendant": L && L.props.id || void 0,
onFocus: ye,
onBlur: xe
},
/* @__PURE__ */ a.createElement(Re, null, /* @__PURE__ */ a.createElement(Ve, null, /* @__PURE__ */ a.createElement(Ze, { className: "k-scheduler-navigation" }, /* @__PURE__ */ a.createElement(
R,
{
role: "button",
tabIndex: -1,
title: M,
"aria-label": M,
onClick: Ee
},
M
), /* @__PURE__ */ a.createElement(
R,
{
role: "button",
tabIndex: -1,
icon: I === "rtl" ? "caret-alt-right" : "caret-alt-left",
svgIcon: I === "rtl" ? oe : le,
title: j,
"aria-label": j,
onClick: Ie
}
), /* @__PURE__ */ a.createElement(
R,
{
role: "button",
tabIndex: -1,
icon: I === "rtl" ? "caret-alt-left" : "caret-alt-right",
svgIcon: I === "rtl" ? le : oe,
title: q,
"aria-label": q,
onClick: ke
}
))), /* @__PURE__ */ a.createElement(qe, { value: p, onChange: be }), /* @__PURE__ */ a.createElement(je, null), /* @__PURE__ */ a.createElement(Je, null)),
i && /* @__PURE__ */ a.createElement(
i.type,
{
editable: (X = r.editable) != null ? X : h.editable,
key: i.props.name,
item: r.item,
viewItem: r.viewItem,
editItem: r.editItem,
task: r.task,
viewTask: r.viewTask,
editTask: r.viewTask,
slot: r.slot,
viewSlot: r.viewSlot,
editSlot: r.editSlot,
form: r.form,
onDataAction: Z,
showWorkHours: S,
...i.props
}
),
/* @__PURE__ */ a.createElement(Te, null, B && B < 24 * 60 && /* @__PURE__ */ a.createElement(Qe, null, /* @__PURE__ */ a.createElement(R, { tabIndex: -1, onClick: ve, icon: "clock", svgIcon: $e }, C.toLanguageString(
S ? ae : ne,
T[S ? ae : ne]
)))),
ue && /* @__PURE__ */ a.createElement(Pe, null)
)
);
}), h = {
data: [],
height: 600,
tabIndex: -1,
editable: !1,
defaultDate: /* @__PURE__ */ new Date(),
header: Be,
footer: Ke,
navigation: ce,
viewSelector: Ue
};
se.propTypes = {
data: n.array,
editable: n.oneOfType([
n.bool,
n.shape({
add: n.bool,
drag: n.bool,
edit: n.bool,
remove: n.bool,
resize: n.bool
})
]),
view: n.string,
defaultView: n.string,
date: n.any,
defaultDate: n.any,
rtl: n.bool,
height: n.oneOfType([n.number, n.string]),
children: n.any,
timezone: n.string,
group: n.any,
resources: n.any,
modelFields: n.shape({
id: n.string,
start: n.string,
startTimezone: n.string,
end: n.string,
endTimezone: n.string,
isAllDay: n.string,
title: n.string,
description: n.string,
recurrenceRule: n.string,
recurrenceId: n.string,
recurrenceException: n.string
})
};
se.displayName = "KendoReactScheduler";
export {
se as Scheduler,
h as schedulerDefaultProps
};