@progress/kendo-react-scheduler/items/SchedulerItem.js

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const be=require("react"),l=require("@progress/kendo-react-common"),G=require("@progress/kendo-react-intl"),K=require("@progress/kendo-svg-icons"),o=require("../messages/index.js"),ve=require("../utils/index.js"),fe=require("../hooks/useSchedulerItem.js"),he=require("../hooks/useEditable.js");function ze(e){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(s,r,c.get?c:{enumerable:!0,get:()=>e[r]})}}return s.default=e,Object.freeze(s)}const t=ze(be),J=t.forwardRef((e,s)=>{const{onFocus:r,onBlur:c,onMouseDown:b,onClick:v,onMouseUp:f,onMouseOut:h,onMouseOver:z,onMouseEnter:C,onMouseLeave:D,onDoubleClick:R,onRemoveClick:E,onKeyUp:M,onKeyDown:y,onKeyPress:S,onPress:I,onDrag:N,onRelease:P,onResizePress:x,onResizeEndDrag:H,onResizeRelease:q,onResizeStartDrag:O}=e,{item:a,element:F}=fe.useSchedulerItem(e,s),w=l.useDir(F),L=t.useRef(null),U=t.useRef(null),j=t.useRef(null),T=t.useRef(null),i=he.useEditable(e.editable),d=G.useInternationalization(),B=G.useLocalization(),A=B.toLanguageString(o.deleteTitle,o.messages[o.deleteTitle]),W=B.toLanguageString(o.allDay,o.messages[o.allDay]),g=e.group.resources.find(n=>!!(n.colorField&&n[n.colorField]!==""&&n[n.colorField]!==void 0)),u=g&&g.colorField&&g[g.colorField],Q=e.tabIndex!==void 0?e.tabIndex===null?void 0:e.tabIndex:e.selected?0:-1,V=t.useMemo(()=>l.classNames({"k-event":!e.resizeHint,"k-selected":e.selected&&i.select,"k-event-drag-hint":e.dragHint,"k-scheduler-marquee":e.resizeHint,"k-marquee":e.resizeHint,"k-first":e.resizeHint&&!e.tail,"k-last":e.resizeHint&&!e.head},e.className),[e.resizeHint,e.selected,e.dragHint,e.tail,e.head,e.className,i.select]),X=t.useMemo(()=>`${e.title}, ${ve.formatEventTime(d,e.zonedStart,e.zonedEnd,e.isAllDay,W)}`,[d,e.isAllDay,e.title,e.zonedEnd,e.zonedStart,W]),Y=t.useMemo(()=>({cursor:"pointer",userSelect:"none",borderColor:e.resizeHint?void 0:u,backgroundColor:e.resizeHint?void 0:u,touchAction:"none",...e.style}),[u,e.style,e.resizeHint]),Z=t.useCallback(n=>{r&&r.call(void 0,{syntheticEvent:n,target:a.current})},[r,a]),p=t.useCallback(n=>{c&&c.call(void 0,{syntheticEvent:n,target:a.current})},[c,a]),ee=t.useCallback(n=>{b&&b.call(void 0,{syntheticEvent:n,target:a.current})},[b,a]),te=t.useCallback(n=>{v&&v.call(void 0,{syntheticEvent:n,target:a.current})},[v,a]),ne=t.useCallback(n=>{f&&f.call(void 0,{syntheticEvent:n,target:a.current})},[f,a]),ae=t.useCallback(n=>{z&&z.call(void 0,{syntheticEvent:n,target:a.current})},[z,a]),le=t.useCallback(n=>{h&&h.call(void 0,{syntheticEvent:n,target:a.current})},[h,a]),re=t.useCallback(n=>{C&&C.call(void 0,{syntheticEvent:n,target:a.current})},[C,a]),ce=t.useCallback(n=>{D&&D.call(void 0,{syntheticEvent:n,target:a.current})},[D,a]),oe=t.useCallback(n=>{R&&R.call(void 0,{syntheticEvent:n,target:a.current})},[R,a]),se=t.useCallback(n=>{E&&E.call(void 0,{syntheticEvent:n,target:a.current})},[E,a]),ie=t.useCallback(n=>{y&&y.call(void 0,{syntheticEvent:n,target:a.current})},[y,a]),ue=t.useCallback(n=>{S&&S.call(void 0,{syntheticEvent:n,target:a.current})},[S,a]),de=t.useCallback(n=>{M&&M.call(void 0,{syntheticEvent:n,target:a.current})},[M,a]),ge=t.useCallback(n=>{I&&I.call(void 0,{dragEvent:n,target:a.current})},[I,a]),me=t.useCallback(n=>{N&&N.call(void 0,{dragEvent:n,target:a.current})},[N,a]),ke=t.useCallback(n=>{P&&P.call(void 0,{dragEvent:n,target:a.current})},[P,a]),m=t.useCallback(n=>{x&&x.call(void 0,{dragEvent:n,target:a.current})},[x,a]),_=t.useCallback(n=>{O&&O.call(void 0,{dragEvent:n,target:a.current})},[O,a]),$=t.useCallback(n=>{H&&H.call(void 0,{dragEvent:n,target:a.current})},[H,a]),k=t.useCallback(n=>{q&&q.call(void 0,{dragEvent:n,target:a.current})},[q,a]);return l.useDraggable(F,{onPress:ge,onDrag:me,onRelease:ke}),l.useDraggable(L,{onPress:m,onDrag:$,onRelease:k}),l.useDraggable(U,{onPress:m,onDrag:_,onRelease:k}),l.useDraggable(j,{onPress:m,onDrag:_,onRelease:k}),l.useDraggable(T,{onPress:m,onDrag:$,onRelease:k}),t.createElement("div",{ref:F,id:e.id,style:Y,tabIndex:Q,className:V,role:"button","aria-label":X,onFocus:Z,onBlur:p,onMouseUp:ne,onMouseDown:ee,onClick:te,onMouseOver:ae,onMouseOut:le,onMouseEnter:re,onMouseLeave:ce,onDoubleClick:oe,onKeyDown:ie,onKeyPress:ue,onKeyUp:de,"data-group-index":e.group.index,"data-range-index":e.range.index},e.children,!e.resizeHint&&t.createElement("span",{className:"k-event-actions"},i.remove&&t.createElement("a",{tabIndex:-1,"aria-hidden":"true",className:"k-link k-event-delete",title:A,"aria-label":A,onClick:se},t.createElement(l.IconWrap,{name:"x",icon:K.xIcon})),e.head&&t.createElement(l.IconWrap,{name:w==="rtl"?"chevron-left":"chevron-right",icon:w==="rtl"?K.chevronLeftIcon:K.chevronRightIcon})),i.resize&&e.vertical&&t.createElement(t.Fragment,null,t.createElement("span",{className:"k-resize-handle k-resize-n",ref:j}),t.createElement("span",{className:"k-resize-handle k-resize-s",ref:T})),i.resize&&!e.vertical&&t.createElement(t.Fragment,null,t.createElement("span",{className:"k-resize-handle k-resize-w",ref:U}),t.createElement("span",{className:"k-resize-handle k-resize-e",ref:L})),e.resizeHint&&t.createElement(t.Fragment,null,t.createElement("div",{className:"k-marquee-color",style:{borderColor:u,backgroundColor:u}}),t.createElement("div",{className:"k-marquee-text"},!e.tail&&t.createElement("div",{className:"k-label-top"},d.formatDate(e.zonedStart,e.format)),!e.head&&t.createElement("div",{className:"k-label-bottom"},d.formatDate(e.zonedEnd,e.format)))))});J.displayName="KendoReactSchedulerItem";exports.SchedulerItem=J;