@progress/kendo-react-scheduler/views/day/MultiDayView.mjs

React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler package

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