@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) • 13.5 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 c } 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) => a.isValidElement(e) ? a.cloneElement(e, { ...k.get(e.type), ...e.props }) : 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), s = 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 = s.props.selectedDateFormat || ut, he = s.props.selectedShortDateFormat || dt, B = s.props.slotDuration, pe = s.props.dateRange !== void 0 ? typeof s.props.dateRange == "function" ? s.props.dateRange.call(void 0, {
intl: F,
date: p,
timezone: V,
numberOfDays: s.props.numberOfDays,
workWeekStart: s.props.workWeekStart || F.firstDay(),
workWeekEnd: s.props.workWeekEnd || (F.firstDay() + s.props.numberOfDays) % 6
}) : s.props.dateRange : { start: h.defaultDate, end: h.defaultDate }, v = a.useCallback(
({
created: e = [],
updated: i = [],
deleted: m = []
}) => {
if (A) {
const o = {
created: e,
updated: i,
deleted: m
};
A.call(void 0, o);
}
},
[A]
), U = a.useCallback(
(e) => {
const i = [e.dataItem];
v({ created: i });
},
[v]
), G = a.useCallback(
(e) => {
const i = [], m = [];
if (e.series)
if (Array.isArray(e.dataItem))
e.dataItem.map((o) => {
const l = w(y(e.dataItem, t, D)), u = w(o);
d(u, t.originalStart, c(l, t.originalStart)), d(u, t.recurrenceId, c(l, t.recurrenceId)), d(
u,
t.recurrenceExceptions,
c(l, t.recurrenceExceptions)
), m.push(u);
});
else {
const o = w(y(e.dataItem, t, D)), l = w(e.dataItem);
d(l, t.originalStart, c(o, t.originalStart)), d(l, t.recurrenceId, c(o, t.recurrenceId)), d(
l,
t.recurrenceExceptions,
c(o, t.recurrenceExceptions)
), m.push(l);
}
else if (Array.isArray(e.dataItem))
e.dataItem.map((o) => {
const l = c(o, t.recurrenceRule) !== null && c(o, t.recurrenceRule) !== void 0;
if (c(o, t.recurrenceId) !== null && c(o, t.recurrenceId) !== void 0 && l) {
const E = w(y(o, t, D)), O = c(o, t.originalStart), Fe = c(E, t.recurrenceExceptions) || [];
d(E, t.recurrenceExceptions, [...Fe, O]), d(o, t.recurrenceRule, null), m.push(E), i.push(o);
} else
m.push(o);
});
else {
const o = c(e.dataItem, t.recurrenceRule) !== null && c(e.dataItem, t.recurrenceRule) !== void 0;
if (c(e.dataItem, t.recurrenceId) !== null && c(e.dataItem, t.recurrenceId) !== void 0 && o) {
const u = w(y(e.dataItem, t, D)), E = c(e.dataItem, t.originalStart), O = c(u, t.recurrenceExceptions) || [];
d(u, t.recurrenceExceptions, [...O, E]), d(e.dataItem, t.recurrenceRule, null), m.push(u), i.push(e.dataItem);
} else
m.push(e.dataItem);
}
v({ updated: m, created: i });
},
[v, t, D]
), K = a.useCallback(
(e) => {
const i = [], m = [];
if (e.series) {
const o = w(y(e.dataItem, t, D)), l = w(e.dataItem);
d(l, t.originalStart, c(o, t.originalStart)), d(l, t.recurrenceId, c(o, t.recurrenceId)), d(l, t.recurrenceRule, c(o, t.recurrenceRule)), d(l, t.recurrenceExceptions, c(o, t.recurrenceExceptions)), m.push(l);
} else if (!(c(e.dataItem, t.recurrenceRule) !== null && c(e.dataItem, t.recurrenceRule) !== void 0))
m.push(e.dataItem);
else {
const l = w(y(e.dataItem, t, D)), u = c(e.dataItem, t.originalStart), E = c(l, t.recurrenceExceptions) || [];
d(l, t.recurrenceExceptions, [...E, u]), d(e.dataItem, t.recurrenceRule, null), i.push(l);
}
v({ updated: i, 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, i) => {
z(e, {
...i,
target: b.current
});
},
[z, b]
), we = a.useCallback(
(e, i) => {
g(e, {
...i,
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 l, u;
e.preventDefault();
const i = (u = (l = s.props.step) != null ? l : s.props.numberOfDays) != null ? u : 1, o = i > 27 ? Y(p, Math.round(i / 27)) : $(p, i);
g(o, e);
},
[p, g, s.props.numberOfDays, s.props.step]
), Ie = a.useCallback(
(e) => {
var l, u;
e.preventDefault();
const i = (u = (l = s.props.step) != null ? l : s.props.numberOfDays) != null ? u : 1, o = i > 27 ? Y(p, -Math.round(i / 27)) : $(p, -i);
g(o, e);
},
[p, g, s.props.numberOfDays, s.props.step]
), Ee = a.useCallback(
(e) => {
e.preventDefault();
const i = Ge.fromLocalDate(/* @__PURE__ */ new Date(), V);
g(new Date(i.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 = s.props.header || r.header || h.header, Te = s.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)),
s && /* @__PURE__ */ a.createElement(
s.type,
{
editable: (X = r.editable) != null ? X : h.editable,
key: s.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,
...s.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
};