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

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
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const he=require("react"),u=require("prop-types"),S=require("@progress/kendo-date-math"),ve=require("../../components/BaseView.js"),L=require("../common/HorizontalResourceIterator.js"),ce=require("./DayViewGroupRowContent.js"),me=require("../common/VerticalResourceIterator.js"),j=require("./DayViewAllDayRowContent.js"),ue=require("./DayViewRowContent.js"),de=require("@progress/kendo-react-common"),s=require("../../utils/index.js"),Me=require("@progress/kendo-react-intl"),be=require("../../constants/index.js"),xe=require("../../slots/SchedulerEditSlot.js"),$e=require("../../items/SchedulerEditItem.js"),I=require("../../context/SchedulerContext.js"),H=require("../../context/SchedulerResourceIteratorContext.js"),De=require("../../components/CurrentTimeMarket.js"),Ae=require("../../components/DateHeaderCell.js"),ge=require("../../services/rangeService.js"),we=require("../../services/slotsService.js"),ze=require("../../services/occurrenceService.js"),ye=require("../../services/itemsService.js");function We(e){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const k=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(g,o,k.get?k:{enumerable:!0,get:()=>e[o]})}}return g.default=e,Object.freeze(g)}const a=We(he),O=0,F=1,qe=a.createElement("div",{className:"k-scheduler-cell k-side-cell"}),G=e=>{var Q,p,ee,te,ae,ne,re,oe,ie,se,le;const{group:g,timezone:o,resources:k}=I.useSchedulerPropsContext(),b=Me.useInternationalization(),V=e.editItem||$e.SchedulerEditItem,T=e.editSlot||xe.SchedulerEditSlot,x=e.showWorkHours,d=(Q=e.numberOfDays)!=null?Q:y.numberOfDays,f=(p=e.slotDivisions)!=null?p:y.slotDivisions,U=(ee=e.slotDuration)!=null?ee:y.slotDuration,R=(te=e.workWeekStart)!=null?te:y.workWeekStart,N=(ae=e.workWeekEnd)!=null?ae:y.workWeekEnd,Y=e.currentTimeMarker===!1?!1:y.currentTimeMarker,A=b.parseDate((re=(ne=e.workDayStart)!=null?ne:e.isWorkDayStart)!=null?re:y.isWorkDayStart),z=b.parseDate((ie=(oe=e.workDayEnd)!=null?oe:e.isWorkDayEnd)!=null?ie:y.isWorkDayEnd),Z=b.parseDate((se=e.startTime)!=null?se:y.startTime),B=b.parseDate((le=e.endTime)!=null?le:y.endTime),[K]=I.useSchedulerDataContext(),C=I.useSchedulerGroupsContext(),P=I.useSchedulerOrientationContext(),X=I.useSchedulerFieldsContext(),l=I.useSchedulerDateRangeContext(),h=a.useMemo(()=>x?A:Z,[x,A,Z]),v=a.useMemo(()=>x?z:B,[x,z,B]),$=a.useMemo(()=>ge.toRanges(l,{step:S.MS_PER_DAY*d,timezone:o}).map(t=>({...t,isAllDay:!0})),[l.start.getTime(),l.end.getTime(),d]),c=a.useMemo(()=>ge.toRanges(l,{step:S.MS_PER_DAY,timezone:o}).map(t=>({...t,isAllDay:!1})),[l.start.getTime(),l.end.getTime(),o]),M=a.useMemo(()=>we.toSlots(l,{step:S.MS_PER_DAY},{groups:C,ranges:$}),[l.start.getTime(),l.end.getTime(),o,$,C]),D=a.useMemo(()=>we.toSlots(l,{step:U*be.MS_PER_MINUTE/f},{groups:C,ranges:c}).filter(t=>v.getTime()===h.getTime()||s.isInTimeRange(t.zonedStart,h,v)),[l.start.getTime(),l.end.getTime(),U,f,h.getTime(),v.getTime(),C,c]),W=a.useMemo(()=>ze.toOccurrences(K,{dateRange:l,fields:X,timezone:o}),[K,l.start.getTime(),l.end.getTime(),X,o]),Se=a.useMemo(()=>W.filter(t=>t.isAllDay),[W]),ke=a.useMemo(()=>W.filter(t=>!t.isAllDay),[W]),q=a.useMemo(()=>ye.toItems(Se,{timezone:o},{groups:C,ranges:$}),[W,o,C,$]),_=a.useMemo(()=>ye.toItems(ke,{timezone:o},{groups:C,ranges:c}).filter(t=>h.getTime()===v.getTime()||s.isInTimeRange(t.zonedStart,h,v)||s.isInTimeRange(t.zonedEnd,h,v)||s.isInTimeRange(new Date(t.zonedEnd.getTime()-(t.zonedEnd.getTime()-t.zonedStart.getTime())/2),h,v)),[W,o,C,c,h.getTime(),v.getTime()]);a.useMemo(()=>s.mapItemsToSlots(q,M,!1),[q,M]),a.useMemo(()=>s.mapSlotsToItems(q,M,!1),[q,M]),a.useMemo(()=>s.mapItemsToSlots(_,D,!1),[_,D]),a.useMemo(()=>s.mapSlotsToItems(_,D,!1),[_,D]);const J=a.createElement(H.SchedulerResourceIteratorContext.Consumer,null,({groupIndex:t})=>a.createElement("div",{className:"k-scheduler-row",key:t},c.map((n,i)=>a.createElement(Ae.DateHeaderCell,{as:e.dateHeaderCell,key:i,date:S.ZonedDate.fromLocalDate(new Date(n.zonedEnd.getTime()-(n.zonedEnd.getTime()-n.zonedStart.getTime())/2),o),start:n.start,end:n.end,format:{skeleton:"MEd"}})))),Te=a.createElement(H.SchedulerResourceIteratorContext.Consumer,null,({groupIndex:t})=>a.createElement("div",{key:t,className:"k-scheduler-row"},$.map((n,i)=>M.filter(r=>r.group.index===t&&r.range.index===i).map((r,w,m)=>a.createElement(T,{...r,onDataAction:e.onDataAction,form:e.form,slot:e.slot,viewSlot:e.viewSlot,key:`${r.start.getTime()}:${r.group.index}`,row:0,col:P==="horizontal"?m.length*(t||0)+w:w,isWorkDay:0<=r.zonedStart.getDay()+(d-R)&&(r.zonedStart.getDay()+(d-R))%d<=N+(d-R),expandable:!0}))))),Ee=a.useMemo(()=>de.classNames(e.name==="week"?"k-scheduler-weekview":"k-scheduler-dayview",e.className),[e.name,e.className]),fe=a.useCallback((t,n,i)=>c.map((r,w)=>D.filter(m=>m.index===t.index&&m.range.index===w&&m.group.index===i).map(m=>a.createElement(T,{key:`${m.start.getTime()}:${m.group.index}`,...m,onDataAction:e.onDataAction,slot:e.slot,viewSlot:e.viewSlot,form:e.form,row:n+F,col:c.length*(i||0)+w,isWorkHour:s.isInTimeRange(m.zonedStart,A,z),isWorkDay:s.isInDaysRange(m.zonedEnd.getDay(),R,N),editable:e.editable}))),[c,T,e.editable,e.form,e.onDataAction,e.slot,e.viewSlot,D,z,A,N,R]),Re=a.useCallback((t,n,i)=>M.filter(r=>r.group.index===n&&r.range.index===i).map((r,w)=>a.createElement(T,{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)*F,col:w,expandable:!0})),[T,M,e.form,e.onDataAction,e.slot,e.viewSlot]),Ce=a.useCallback((t,n,i,r)=>c.map((w,m)=>D.filter(E=>E.index===t.index&&E.group.index===i&&E.range.index===m).map(E=>a.createElement(T,{slot:e.slot,viewSlot:e.viewSlot,form:e.form,onDataAction:e.onDataAction,...E,key:`${E.start.getTime()}:${E.group.index}`,row:n.length*(i||0)+r+(i||0)*F+F,col:m,editable:e.editable,isWorkHour:s.isInTimeRange(E.zonedStart,A,z),isWorkDay:0<=E.zonedStart.getDay()+(d-R)&&(E.zonedStart.getDay()+(d-R))%d<=N+(d-R)}))),[T,d,e.editable,e.form,e.onDataAction,e.slot,e.viewSlot,c,D,z,A,N,R]);return a.createElement(ve.BaseView,{id:e.id,props:e,style:e.style,className:Ee,ranges:[...$,...c],slots:[...M,...D]},a.createElement("div",{className:"k-scheduler-head"},P==="horizontal"?a.createElement(a.Fragment,null,a.createElement(L.HorizontalResourceIterator,{nested:!0,group:g,resources:k,rowContent:ce.DayViewGroupRowContent,childRowContent:ce.DayViewGroupRowContent},J),a.createElement(L.HorizontalResourceIterator,{group:g,resources:k,rowContent:j.DayViewAllDayRowContent,childRowContent:j.DayViewAllDayRowContent},Te),q.map(t=>a.createElement(V,{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}))):a.createElement(me.VerticalResourceIterator,{group:g,resources:k,cellContent:qe},J)),a.createElement("div",{className:"k-scheduler-body"},P==="horizontal"?a.createElement(a.Fragment,null,D.filter(t=>t.group.index===O&&t.range.index===O).map((t,n)=>a.createElement(a.Fragment,{key:t.index},a.createElement(L.HorizontalResourceIterator,{nested:!1,group:g,resources:k,rowContent:ue.DayViewRowContent,rowContentProps:{timeHeaderCell:e.timeHeaderCell,isMaster:n%f===0,isLast:(n+1)%f===0,slot:t}},a.createElement(H.SchedulerResourceIteratorContext.Consumer,null,({groupIndex:i})=>a.createElement("div",{className:de.classNames("k-scheduler-row",{"k-middle-row":(n+1)%f!==0})},fe(t,n,i)))))),Y!==!1&&s.intersects(s.first(c).start,s.last(c).end,new Date,new Date,!0)&&a.createElement(De.CurrentTimeMarker,null)):a.createElement(a.Fragment,null,a.createElement(me.VerticalResourceIterator,{nested:!0,group:g,resources:k},a.createElement(H.SchedulerResourceIteratorContext.Consumer,null,({groupIndex:t})=>a.createElement(a.Fragment,{key:t},a.createElement("div",{className:"k-scheduler-row"},a.createElement(j.DayViewAllDayRowContent,{groupIndex:t},$.map((n,i)=>{const r=D.filter(w=>w.group.index===t&&w.range.index===O).length;return Re(r,t,i)}))),D.filter(n=>n.group.index===t&&n.range.index===O).map((n,i,r)=>a.createElement("div",{className:"k-scheduler-row",key:n.index},a.createElement(ue.DayViewRowContent,{slot:n,isMaster:i%f===0,isLast:(i+1)%f===0,timeHeaderCell:e.timeHeaderCell},Ce(n,r,t,i)))),Y!==!1&&s.intersects(s.first(c).start,s.last(c).end,new Date,new Date,!0)&&a.createElement(De.CurrentTimeMarker,{groupIndex:t})))),q.map(t=>a.createElement(V,{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}))),_.map(t=>a.createElement(V,{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}))))},Ie=({date:e,numberOfDays:g=1,timezone:o})=>{const k=S.ZonedDate.fromLocalDate(e,o),b=S.getDate(k),V=S.addDays(b,g),T=S.ZonedDate.fromUTCDate(s.toUTCDateTime(b),o),x=S.ZonedDate.fromUTCDate(s.toUTCDateTime(V),o),d=new Date(T.getTime()),f=new Date(x.getTime());return{start:d,end:f,zonedStart:T,zonedEnd:x}},y={name:"multi-day",title:"Multi Day",currentTimeMarker:!0,dateRange:Ie,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:S.Day.Monday,workWeekEnd:S.Day.Friday,slotDivisions:2,slotDuration:60,showCurrentTime:!0,defaultShowWorkHours:!0};G.propTypes={currentTimeMarker:u.bool,name:u.string,numberOfDays:u.number,startTime:u.string,endTime:u.string,workDayStart:u.string,workDayEnd:u.string,workWeekStart:u.number,workWeekEnd:u.any,slotDivisions:u.number,slotDuration:u.number,showWorkHours:u.bool,selectedDateFormat:u.string,selectedShortDateFormat:u.string};G.displayName="KendoReactSchedulerMultiDayView";exports.MultiDayView=G;exports.multiDayViewDefaultProps=y;