UNPKG

@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
/** * @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 };