@fullcalendar/resource-timegrid 6.1.15 → 7.0.0-beta.0

package/index.cjs

@@ -9,9 +9,10 @@ var timeGridPlugin = require('@fullcalendar/timegrid/index.cjs');
 var internalCommon = require('./internal.cjs');
 require('@fullcalendar/core/internal.cjs');
 require('@fullcalendar/core/preact.cjs');
-require('@fullcalendar/timegrid/internal.cjs');
-require('@fullcalendar/resource/internal.cjs');
+require('@fullcalendar/daygrid/internal.cjs');
 require('@fullcalendar/resource-daygrid/internal.cjs');
+require('@fullcalendar/resource/internal.cjs');
+require('@fullcalendar/timegrid/internal.cjs');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,7 +22,7 @@ var timeGridPlugin__default = /*#__PURE__*/_interopDefaultLegacy(timeGridPlugin)
 
 var index = index_cjs.createPlugin({
     name: '@fullcalendar/resource-timegrid',
-    premiumReleaseDate: '2024-07-12',
+    premiumReleaseDate: '2024-10-01',
     deps: [
         premiumCommonPlugin__default["default"],
         resourcePlugin__default["default"],
@@ -31,7 +32,7 @@ var index = index_cjs.createPlugin({
     views: {
         resourceTimeGrid: {
             type: 'timeGrid',
-            component: internalCommon.ResourceDayTimeColsView,
+            component: internalCommon.ResourceTimeGridView,
             needsResourceData: true,
         },
         resourceTimeGridDay: {

package/index.global.js

@@ -1,9 +1,9 @@
 /*!
-FullCalendar Resource Time Grid Plugin v6.1.15
+FullCalendar Resource Time Grid Plugin v7.0.0-beta.0
 Docs & License: https://fullcalendar.io/docs/vertical-resource-view
 (c) 2024 Adam Shaw
 */
-FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, resourcePlugin, timeGridPlugin, internal$2, preact, internal$3, internal$1, internal$4) {
+FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, resourcePlugin, timeGridPlugin, internal$2, preact, internal$5, internal$4, internal$1, internal$3) {
     'use strict';
 
     function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -20,65 +20,129 @@ FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, r
         }
     }
 
-    class ResourceDayTimeCols extends internal$2.DateComponent {
+    class ResourceTimeGridView extends internal$2.DateComponent {
         constructor() {
             super(...arguments);
+            this.flattenResources = internal$2.memoize(internal$1.flattenResources);
+            this.buildResourceTimeColsModel = internal$2.memoize(buildResourceTimeColsModel);
+            this.allDaySplitter = new internal$3.AllDaySplitter();
+            // for all-day-resource props
+            this.allDayResourceSplitter = new internal$1.VResourceSplitter();
+            this.allDayResourceSlicers = {};
+            this.allDayResourceJoiner = new internal$4.ResourceDayTableJoiner();
+            // for timed resource props
             this.buildDayRanges = internal$2.memoize(internal$3.buildDayRanges);
-            this.splitter = new internal$1.VResourceSplitter();
-            this.slicers = {};
-            this.joiner = new ResourceDayTimeColsJoiner();
-            this.timeColsRef = preact.createRef();
+            this.timedResourceSplitter = new internal$1.VResourceSplitter();
+            this.timedResourceSlicers = {};
+            this.timedResourceJoiner = new ResourceDayTimeColsJoiner();
+            // timed-only column splitting
+            this.splitFgEventSegs = internal$2.memoize(internal$3.splitSegsByCol);
+            this.splitBgEventSegs = internal$2.memoize(internal$3.splitSegsByCol);
+            this.splitBusinessHourSegs = internal$2.memoize(internal$3.splitSegsByCol);
+            this.splitNowIndicatorSegs = internal$2.memoize(internal$3.splitSegsByCol);
+            this.splitDateSelectionSegs = internal$2.memoize(internal$3.splitSegsByCol);
+            this.splitEventDrag = internal$2.memoize(internal$3.splitInteractionByCol);
+            this.splitEventResize = internal$2.memoize(internal$3.splitInteractionByCol);
+            // other memo
+            this.createDayHeaderFormatter = internal$2.memoize(internal$5.createDayHeaderFormatter);
             this.isHitComboAllowed = (hit0, hit1) => {
                 let allowAcrossResources = this.dayRanges.length === 1;
                 return allowAcrossResources || hit0.dateSpan.resourceId === hit1.dateSpan.resourceId;
             };
         }
-        render() {
-            let { props, context } = this;
-            let { dateEnv, options } = context;
-            let { dateProfile, resourceDayTableModel } = props;
-            let dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
-            let splitProps = this.splitter.splitProps(props);
-            this.slicers = internal$2.mapHash(splitProps, (split, resourceId) => this.slicers[resourceId] || new internal$3.DayTimeColsSlicer());
-            let slicedProps = internal$2.mapHash(this.slicers, (slicer, resourceId) => slicer.sliceProps(splitProps[resourceId], dateProfile, null, context, dayRanges));
-            return ( // TODO: would move this further down hierarchy, but sliceNowDate needs it
-            preact.createElement(internal$2.NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' }, (nowDate, todayRange) => (preact.createElement(internal$3.TimeCols, Object.assign({ ref: this.timeColsRef }, this.joiner.joinProps(slicedProps, resourceDayTableModel), { dateProfile: dateProfile, axis: props.axis, slotDuration: props.slotDuration, slatMetas: props.slatMetas, cells: resourceDayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: options.nowIndicator && this.buildNowIndicatorSegs(nowDate), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest, forPrint: props.forPrint, onSlatCoords: props.onSlatCoords, isHitComboAllowed: this.isHitComboAllowed })))));
-        }
-        buildNowIndicatorSegs(date) {
-            let nonResourceSegs = this.slicers[''].sliceNowDate(date, this.props.dateProfile, this.context.options.nextDayThreshold, this.context, this.dayRanges);
-            return this.joiner.expandSegs(this.props.resourceDayTableModel, nonResourceSegs);
-        }
-    }
-
-    class ResourceDayTimeColsView extends internal$3.TimeColsView {
-        constructor() {
-            super(...arguments);
-            this.flattenResources = internal$2.memoize(internal$1.flattenResources);
-            this.buildResourceTimeColsModel = internal$2.memoize(buildResourceTimeColsModel);
-            this.buildSlatMetas = internal$2.memoize(internal$3.buildSlatMetas);
-        }
         render() {
             let { props, context } = this;
             let { options, dateEnv } = context;
             let { dateProfile } = props;
-            let splitProps = this.allDaySplitter.splitProps(props);
             let resourceOrderSpecs = options.resourceOrder || internal$1.DEFAULT_RESOURCE_ORDER;
             let resources = this.flattenResources(props.resourceStore, resourceOrderSpecs);
             let resourceDayTableModel = this.buildResourceTimeColsModel(dateProfile, context.dateProfileGenerator, resources, options.datesAboveResources, context);
-            let slatMetas = this.buildSlatMetas(dateProfile.slotMinTime, dateProfile.slotMaxTime, options.slotLabelInterval, options.slotDuration, dateEnv);
-            let { dayMinWidth } = options;
-            let hasAttachedAxis = !dayMinWidth;
-            let hasDetachedAxis = dayMinWidth;
-            let headerContent = options.dayHeaders && (preact.createElement(internal$1.ResourceDayHeader, { resources: resources, dates: resourceDayTableModel.dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: hasAttachedAxis ? this.renderHeadAxis : null }));
-            let allDayContent = (options.allDaySlot !== false) && ((contentArg) => (preact.createElement(internal$4.ResourceDayTable, Object.assign({}, splitProps.allDay, { dateProfile: dateProfile, resourceDayTableModel: resourceDayTableModel, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, renderRowIntro: hasAttachedAxis ? this.renderTableRowAxis : null, showWeekNumbers: false, expandRows: false, headerAlignElRef: this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint }, this.getAllDayMaxEventProps()))));
-            let timeGridContent = (contentArg) => (preact.createElement(ResourceDayTimeCols, Object.assign({}, splitProps.timed, { dateProfile: dateProfile, axis: hasAttachedAxis, slotDuration: options.slotDuration, slatMetas: slatMetas, resourceDayTableModel: resourceDayTableModel, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, onSlatCoords: this.handleSlatCoords, expandRows: contentArg.expandRows, forPrint: props.forPrint, onScrollTopRequest: this.handleScrollTopRequest })));
-            return hasDetachedAxis
-                ? this.renderHScrollLayout(headerContent, allDayContent, timeGridContent, resourceDayTableModel.colCnt, dayMinWidth, slatMetas, this.state.slatCoords)
-                : this.renderSimpleLayout(headerContent, allDayContent, timeGridContent);
+            // split seg by all-day/timed
+            let splitProps = this.allDaySplitter.splitProps(props);
+            // split the all-day segs by resource
+            let allDayResourceSplitProps = this.allDayResourceSplitter.splitProps({
+                businessHours: splitProps.allDay.businessHours,
+                dateSelection: splitProps.allDay.dateSelection,
+                eventStore: splitProps.allDay.eventStore,
+                eventUiBases: splitProps.allDay.eventUiBases,
+                eventSelection: splitProps.allDay.eventSelection,
+                eventDrag: splitProps.allDay.eventDrag,
+                eventResize: splitProps.allDay.eventResize,
+                resourceDayTableModel,
+            });
+            this.allDayResourceSlicers = internal$2.mapHash(allDayResourceSplitProps, (split, resourceId) => this.allDayResourceSlicers[resourceId] || new internal$5.DayTableSlicer());
+            let allDayResourceSlicedProps = internal$2.mapHash(this.allDayResourceSlicers, (slicer, resourceId) => slicer.sliceProps(allDayResourceSplitProps[resourceId], dateProfile, options.nextDayThreshold, context, resourceDayTableModel.dayTableModel));
+            let allDayResourceJoinedProps = this.allDayResourceJoiner.joinProps(allDayResourceSlicedProps, resourceDayTableModel);
+            // split the timed segs by resource
+            let dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
+            let timedResourceSplitProps = this.timedResourceSplitter.splitProps({
+                businessHours: splitProps.timed.businessHours,
+                dateSelection: splitProps.timed.dateSelection,
+                eventStore: splitProps.timed.eventStore,
+                eventUiBases: splitProps.timed.eventUiBases,
+                eventSelection: splitProps.timed.eventSelection,
+                eventDrag: splitProps.timed.eventDrag,
+                eventResize: splitProps.timed.eventResize,
+                resourceDayTableModel,
+            });
+            this.timedResourceSlicers = internal$2.mapHash(timedResourceSplitProps, (split, resourceId) => this.timedResourceSlicers[resourceId] || new internal$3.DayTimeColsSlicer());
+            let timedResourceSlicedProps = internal$2.mapHash(this.timedResourceSlicers, (slicer, resourceId) => slicer.sliceProps(timedResourceSplitProps[resourceId], dateProfile, null, context, dayRanges));
+            let timedResourceJoinedProps = this.timedResourceJoiner.joinProps(timedResourceSlicedProps, resourceDayTableModel);
+            let datesRepDistinctDays = resourceDayTableModel.dayTableModel.rowCnt === 1;
+            let headerTiers = internal$4.buildResourceHeaderTiers(// TODO: memoize
+            resources, resourceDayTableModel.dayTableModel.headerDates, options.datesAboveResources, datesRepDistinctDays, context);
+            let dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, resourceDayTableModel.colCnt);
+            return (preact.createElement(internal$2.NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' /* hacky */ }, (nowDate, todayRange) => {
+                // timed-only column splitting
+                let colCnt = resourceDayTableModel.colCnt;
+                let fgEventSegsByCol = this.splitFgEventSegs(timedResourceJoinedProps.fgEventSegs, colCnt);
+                let bgEventSegsByCol = this.splitBgEventSegs(timedResourceJoinedProps.bgEventSegs, colCnt);
+                let businessHourSegsByCol = this.splitBusinessHourSegs(timedResourceJoinedProps.businessHourSegs, colCnt);
+                let nowIndicatorSegsByCol = this.splitNowIndicatorSegs((() => {
+                    // was buildNowIndicatorSegs
+                    let nonResourceSegs = this.timedResourceSlicers[''].sliceNowDate(nowDate, this.props.dateProfile, this.context.options.nextDayThreshold, this.context, this.dayRanges);
+                    return this.timedResourceJoiner.expandSegs(resourceDayTableModel, nonResourceSegs);
+                })(), colCnt);
+                let dateSelectionSegsByCol = this.splitDateSelectionSegs(timedResourceJoinedProps.dateSelectionSegs, colCnt);
+                let eventDragByCol = this.splitEventDrag(timedResourceJoinedProps.eventDrag, colCnt);
+                let eventResizeByCol = this.splitEventResize(timedResourceJoinedProps.eventResize, colCnt);
+                return (preact.createElement(internal$3.TimeGridLayout, { dateProfile: dateProfile, nowDate: nowDate, todayRange: todayRange, cells: resourceDayTableModel.cells[0], forPrint: props.forPrint, isHitComboAllowed: this.isHitComboAllowed, className: 'fc-resource-timegrid-view', 
+                    // header content
+                    headerTiers: headerTiers, renderHeaderLabel: (tierNum, innerWidthRef, innerHeightRef, width) => ((options.weekNumbers && tierNum === headerTiers.length - 1) ? (preact.createElement(internal$3.TimeGridWeekNumber // .fc-cell
+                    , { dateProfile: dateProfile, innerWidthRef: innerWidthRef, innerHeightRef: innerHeightRef, width: width })) : (preact.createElement("div", { className: 'fc-cell', style: { width } }))), 
+                    // TODO: DRY
+                    renderHeaderContent: (model, tierNum, innerHeightRef, colWidth) => {
+                        if (model.resource) {
+                            return (preact.createElement(internal$4.ResourceHeaderCell, Object.assign({}, model, { innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth, isSticky: tierNum < headerTiers.length - 1 })));
+                        }
+                        else if (model.date) {
+                            return (preact.createElement(internal$5.DateHeaderCell, Object.assign({}, model, { navLink: resourceDayTableModel.dayTableModel.colCnt > 1, dateProfile: props.dateProfile, todayRange: todayRange, dayHeaderFormat: dayHeaderFormat, innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth })));
+                        }
+                        else {
+                            preact.createElement(internal$5.DayOfWeekHeaderCell, Object.assign({}, model, { dayHeaderFormat: dayHeaderFormat, innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth }));
+                        }
+                    }, getHeaderModelKey: (model) => (model.resource
+                        ? model.resource.id
+                        : model.date
+                            ? model.date.toISOString()
+                            : model.dow), 
+                    // all-day content
+                    fgEventSegs: allDayResourceJoinedProps.fgEventSegs, bgEventSegs: allDayResourceJoinedProps.bgEventSegs, businessHourSegs: allDayResourceJoinedProps.businessHourSegs, dateSelectionSegs: allDayResourceJoinedProps.dateSelectionSegs, eventDrag: allDayResourceJoinedProps.eventDrag, eventResize: allDayResourceJoinedProps.eventResize, 
+                    // timed content
+                    fgEventSegsByCol: fgEventSegsByCol, bgEventSegsByCol: bgEventSegsByCol, businessHourSegsByCol: businessHourSegsByCol, nowIndicatorSegsByCol: nowIndicatorSegsByCol, dateSelectionSegsByCol: dateSelectionSegsByCol, eventDragByCol: eventDragByCol, eventResizeByCol: eventResizeByCol, 
+                    // universal content
+                    eventSelection: allDayResourceJoinedProps.eventSelection }));
+            }));
         }
     }
+    /*
+    TODO: kill this and DayResourceTableModel/ResourceDayTableModel
+    */
     function buildResourceTimeColsModel(dateProfile, dateProfileGenerator, resources, datesAboveResources, context) {
         let dayTable = internal$3.buildTimeColsModel(dateProfile, dateProfileGenerator);
+        if (!resources.length) {
+            return new internal$1.ResourcelessDayTableModel(dayTable);
+        }
         return datesAboveResources ?
             new internal$1.DayResourceTableModel(dayTable, resources, context) :
             new internal$1.ResourceDayTableModel(dayTable, resources, context);
@@ -86,7 +150,7 @@ FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, r
 
     var plugin = core.createPlugin({
         name: '@fullcalendar/resource-timegrid',
-        premiumReleaseDate: '2024-07-12',
+        premiumReleaseDate: '2024-10-01',
         deps: [
             premiumCommonPlugin__default["default"],
             resourcePlugin__default["default"],
@@ -96,7 +160,7 @@ FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, r
         views: {
             resourceTimeGrid: {
                 type: 'timeGrid',
-                component: ResourceDayTimeColsView,
+                component: ResourceTimeGridView,
                 needsResourceData: true,
             },
             resourceTimeGridDay: {
@@ -112,8 +176,7 @@ FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, r
 
     var internal = {
         __proto__: null,
-        ResourceDayTimeColsView: ResourceDayTimeColsView,
-        ResourceDayTimeCols: ResourceDayTimeCols
+        ResourceTimeGridView: ResourceTimeGridView
     };
 
     core.globalPlugins.push(plugin);
@@ -125,4 +188,4 @@ FullCalendar.ResourceTimeGrid = (function (exports, core, premiumCommonPlugin, r
 
     return exports;
 
-})({}, FullCalendar, FullCalendar.PremiumCommon, FullCalendar.Resource, FullCalendar.TimeGrid, FullCalendar.Internal, FullCalendar.Preact, FullCalendar.TimeGrid.Internal, FullCalendar.Resource.Internal, FullCalendar.ResourceDayGrid.Internal);
+})({}, FullCalendar, FullCalendar.PremiumCommon, FullCalendar.Resource, FullCalendar.TimeGrid, FullCalendar.Internal, FullCalendar.Preact, FullCalendar.DayGrid.Internal, FullCalendar.ResourceDayGrid.Internal, FullCalendar.Resource.Internal, FullCalendar.TimeGrid.Internal);

package/index.global.min.js

@@ -1,6 +1,6 @@
 /*!
-FullCalendar Resource Time Grid Plugin v6.1.15
+FullCalendar Resource Time Grid Plugin v7.0.0-beta.0
 Docs & License: https://fullcalendar.io/docs/vertical-resource-view
 (c) 2024 Adam Shaw
 */
-FullCalendar.ResourceTimeGrid=function(e,t,l,o,r,s,i,a,n,d){"use strict";function u(e){return e&&e.__esModule?e:{default:e}}var c=u(l),h=u(o),m=u(r);class p extends n.VResourceJoiner{transformSeg(e,t,l){return[Object.assign(Object.assign({},e),{col:t.computeCol(e.col,l)})]}}class R extends s.DateComponent{constructor(){super(...arguments),this.buildDayRanges=s.memoize(a.buildDayRanges),this.splitter=new n.VResourceSplitter,this.slicers={},this.joiner=new p,this.timeColsRef=i.createRef(),this.isHitComboAllowed=(e,t)=>1===this.dayRanges.length||e.dateSpan.resourceId===t.dateSpan.resourceId}render(){let{props:e,context:t}=this,{dateEnv:l,options:o}=t,{dateProfile:r,resourceDayTableModel:n}=e,d=this.dayRanges=this.buildDayRanges(n.dayTableModel,r,l),u=this.splitter.splitProps(e);this.slicers=s.mapHash(u,(e,t)=>this.slicers[t]||new a.DayTimeColsSlicer);let c=s.mapHash(this.slicers,(e,l)=>e.sliceProps(u[l],r,null,t,d));return i.createElement(s.NowTimer,{unit:o.nowIndicator?"minute":"day"},(t,l)=>i.createElement(a.TimeCols,Object.assign({ref:this.timeColsRef},this.joiner.joinProps(c,n),{dateProfile:r,axis:e.axis,slotDuration:e.slotDuration,slatMetas:e.slatMetas,cells:n.cells[0],tableColGroupNode:e.tableColGroupNode,tableMinWidth:e.tableMinWidth,clientWidth:e.clientWidth,clientHeight:e.clientHeight,expandRows:e.expandRows,nowDate:t,nowIndicatorSegs:o.nowIndicator&&this.buildNowIndicatorSegs(t),todayRange:l,onScrollTopRequest:e.onScrollTopRequest,forPrint:e.forPrint,onSlatCoords:e.onSlatCoords,isHitComboAllowed:this.isHitComboAllowed})))}buildNowIndicatorSegs(e){let t=this.slicers[""].sliceNowDate(e,this.props.dateProfile,this.context.options.nextDayThreshold,this.context,this.dayRanges);return this.joiner.expandSegs(this.props.resourceDayTableModel,t)}}class b extends a.TimeColsView{constructor(){super(...arguments),this.flattenResources=s.memoize(n.flattenResources),this.buildResourceTimeColsModel=s.memoize(y),this.buildSlatMetas=s.memoize(a.buildSlatMetas)}render(){let{props:e,context:t}=this,{options:l,dateEnv:o}=t,{dateProfile:r}=e,s=this.allDaySplitter.splitProps(e),a=l.resourceOrder||n.DEFAULT_RESOURCE_ORDER,u=this.flattenResources(e.resourceStore,a),c=this.buildResourceTimeColsModel(r,t.dateProfileGenerator,u,l.datesAboveResources,t),h=this.buildSlatMetas(r.slotMinTime,r.slotMaxTime,l.slotLabelInterval,l.slotDuration,o),{dayMinWidth:m}=l,p=!m,b=m,y=l.dayHeaders&&i.createElement(n.ResourceDayHeader,{resources:u,dates:c.dayTableModel.headerDates,dateProfile:r,datesRepDistinctDays:!0,renderIntro:p?this.renderHeadAxis:null}),D=!1!==l.allDaySlot&&(t=>i.createElement(d.ResourceDayTable,Object.assign({},s.allDay,{dateProfile:r,resourceDayTableModel:c,nextDayThreshold:l.nextDayThreshold,tableMinWidth:t.tableMinWidth,colGroupNode:t.tableColGroupNode,renderRowIntro:p?this.renderTableRowAxis:null,showWeekNumbers:!1,expandRows:!1,headerAlignElRef:this.headerElRef,clientWidth:t.clientWidth,clientHeight:t.clientHeight,forPrint:e.forPrint},this.getAllDayMaxEventProps()))),C=t=>i.createElement(R,Object.assign({},s.timed,{dateProfile:r,axis:p,slotDuration:l.slotDuration,slatMetas:h,resourceDayTableModel:c,tableColGroupNode:t.tableColGroupNode,tableMinWidth:t.tableMinWidth,clientWidth:t.clientWidth,clientHeight:t.clientHeight,onSlatCoords:this.handleSlatCoords,expandRows:t.expandRows,forPrint:e.forPrint,onScrollTopRequest:this.handleScrollTopRequest}));return b?this.renderHScrollLayout(y,D,C,c.colCnt,m,h,this.state.slatCoords):this.renderSimpleLayout(y,D,C)}}function y(e,t,l,o,r){let s=a.buildTimeColsModel(e,t);return o?new n.DayResourceTableModel(s,l,r):new n.ResourceDayTableModel(s,l,r)}var D=t.createPlugin({name:"@fullcalendar/resource-timegrid",premiumReleaseDate:"2024-07-12",deps:[c.default,h.default,m.default],initialView:"resourceTimeGridDay",views:{resourceTimeGrid:{type:"timeGrid",component:b,needsResourceData:!0},resourceTimeGridDay:{type:"resourceTimeGrid",duration:{days:1}},resourceTimeGridWeek:{type:"resourceTimeGrid",duration:{weeks:1}}}}),C={__proto__:null,ResourceDayTimeColsView:b,ResourceDayTimeCols:R};return t.globalPlugins.push(D),e.Internal=C,e.default=D,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,FullCalendar.PremiumCommon,FullCalendar.Resource,FullCalendar.TimeGrid,FullCalendar.Internal,FullCalendar.Preact,FullCalendar.TimeGrid.Internal,FullCalendar.Resource.Internal,FullCalendar.ResourceDayGrid.Internal);
+FullCalendar.ResourceTimeGrid=function(e,t,s,i,l,r,a,o,n,d,c){"use strict";function u(e){return e&&e.__esModule?e:{default:e}}var m=u(s),S=u(i),g=u(l);class h extends d.VResourceJoiner{transformSeg(e,t,s){return[Object.assign(Object.assign({},e),{col:t.computeCol(e.col,s)})]}}class y extends r.DateComponent{constructor(){super(...arguments),this.flattenResources=r.memoize(d.flattenResources),this.buildResourceTimeColsModel=r.memoize(p),this.allDaySplitter=new c.AllDaySplitter,this.allDayResourceSplitter=new d.VResourceSplitter,this.allDayResourceSlicers={},this.allDayResourceJoiner=new n.ResourceDayTableJoiner,this.buildDayRanges=r.memoize(c.buildDayRanges),this.timedResourceSplitter=new d.VResourceSplitter,this.timedResourceSlicers={},this.timedResourceJoiner=new h,this.splitFgEventSegs=r.memoize(c.splitSegsByCol),this.splitBgEventSegs=r.memoize(c.splitSegsByCol),this.splitBusinessHourSegs=r.memoize(c.splitSegsByCol),this.splitNowIndicatorSegs=r.memoize(c.splitSegsByCol),this.splitDateSelectionSegs=r.memoize(c.splitSegsByCol),this.splitEventDrag=r.memoize(c.splitInteractionByCol),this.splitEventResize=r.memoize(c.splitInteractionByCol),this.createDayHeaderFormatter=r.memoize(o.createDayHeaderFormatter),this.isHitComboAllowed=(e,t)=>1===this.dayRanges.length||e.dateSpan.resourceId===t.dateSpan.resourceId}render(){let{props:e,context:t}=this,{options:s,dateEnv:i}=t,{dateProfile:l}=e,u=s.resourceOrder||d.DEFAULT_RESOURCE_ORDER,m=this.flattenResources(e.resourceStore,u),S=this.buildResourceTimeColsModel(l,t.dateProfileGenerator,m,s.datesAboveResources,t),g=this.allDaySplitter.splitProps(e),h=this.allDayResourceSplitter.splitProps({businessHours:g.allDay.businessHours,dateSelection:g.allDay.dateSelection,eventStore:g.allDay.eventStore,eventUiBases:g.allDay.eventUiBases,eventSelection:g.allDay.eventSelection,eventDrag:g.allDay.eventDrag,eventResize:g.allDay.eventResize,resourceDayTableModel:S});this.allDayResourceSlicers=r.mapHash(h,(e,t)=>this.allDayResourceSlicers[t]||new o.DayTableSlicer);let y=r.mapHash(this.allDayResourceSlicers,(e,i)=>e.sliceProps(h[i],l,s.nextDayThreshold,t,S.dayTableModel)),p=this.allDayResourceJoiner.joinProps(y,S),R=this.dayRanges=this.buildDayRanges(S.dayTableModel,l,i),D=this.timedResourceSplitter.splitProps({businessHours:g.timed.businessHours,dateSelection:g.timed.dateSelection,eventStore:g.timed.eventStore,eventUiBases:g.timed.eventUiBases,eventSelection:g.timed.eventSelection,eventDrag:g.timed.eventDrag,eventResize:g.timed.eventResize,resourceDayTableModel:S});this.timedResourceSlicers=r.mapHash(D,(e,t)=>this.timedResourceSlicers[t]||new c.DayTimeColsSlicer);let v=r.mapHash(this.timedResourceSlicers,(e,s)=>e.sliceProps(D[s],l,null,t,R)),b=this.timedResourceJoiner.joinProps(v,S),C=1===S.dayTableModel.rowCnt,f=n.buildResourceHeaderTiers(m,S.dayTableModel.headerDates,s.datesAboveResources,C,t),H=this.createDayHeaderFormatter(t.options.dayHeaderFormat,C,S.colCnt);return a.createElement(r.NowTimer,{unit:s.nowIndicator?"minute":"day"},(t,i)=>{let r=S.colCnt,d=this.splitFgEventSegs(b.fgEventSegs,r),u=this.splitBgEventSegs(b.bgEventSegs,r),m=this.splitBusinessHourSegs(b.businessHourSegs,r),g=this.splitNowIndicatorSegs((()=>{let e=this.timedResourceSlicers[""].sliceNowDate(t,this.props.dateProfile,this.context.options.nextDayThreshold,this.context,this.dayRanges);return this.timedResourceJoiner.expandSegs(S,e)})(),r),h=this.splitDateSelectionSegs(b.dateSelectionSegs,r),y=this.splitEventDrag(b.eventDrag,r),R=this.splitEventResize(b.eventResize,r);return a.createElement(c.TimeGridLayout,{dateProfile:l,nowDate:t,todayRange:i,cells:S.cells[0],forPrint:e.forPrint,isHitComboAllowed:this.isHitComboAllowed,className:"fc-resource-timegrid-view",headerTiers:f,renderHeaderLabel:(e,t,i,r)=>s.weekNumbers&&e===f.length-1?a.createElement(c.TimeGridWeekNumber,{dateProfile:l,innerWidthRef:t,innerHeightRef:i,width:r}):a.createElement("div",{className:"fc-cell",style:{width:r}}),renderHeaderContent:(t,s,l,r)=>t.resource?a.createElement(n.ResourceHeaderCell,Object.assign({},t,{innerHeightRef:l,colSpan:t.colSpan,colWidth:r,isSticky:s<f.length-1})):t.date?a.createElement(o.DateHeaderCell,Object.assign({},t,{navLink:S.dayTableModel.colCnt>1,dateProfile:e.dateProfile,todayRange:i,dayHeaderFormat:H,innerHeightRef:l,colSpan:t.colSpan,colWidth:r})):void a.createElement(o.DayOfWeekHeaderCell,Object.assign({},t,{dayHeaderFormat:H,innerHeightRef:l,colSpan:t.colSpan,colWidth:r})),getHeaderModelKey:e=>e.resource?e.resource.id:e.date?e.date.toISOString():e.dow,fgEventSegs:p.fgEventSegs,bgEventSegs:p.bgEventSegs,businessHourSegs:p.businessHourSegs,dateSelectionSegs:p.dateSelectionSegs,eventDrag:p.eventDrag,eventResize:p.eventResize,fgEventSegsByCol:d,bgEventSegsByCol:u,businessHourSegsByCol:m,nowIndicatorSegsByCol:g,dateSelectionSegsByCol:h,eventDragByCol:y,eventResizeByCol:R,eventSelection:p.eventSelection})})}}function p(e,t,s,i,l){let r=c.buildTimeColsModel(e,t);return s.length?i?new d.DayResourceTableModel(r,s,l):new d.ResourceDayTableModel(r,s,l):new d.ResourcelessDayTableModel(r)}var R=t.createPlugin({name:"@fullcalendar/resource-timegrid",premiumReleaseDate:"2024-10-01",deps:[m.default,S.default,g.default],initialView:"resourceTimeGridDay",views:{resourceTimeGrid:{type:"timeGrid",component:y,needsResourceData:!0},resourceTimeGridDay:{type:"resourceTimeGrid",duration:{days:1}},resourceTimeGridWeek:{type:"resourceTimeGrid",duration:{weeks:1}}}}),D={__proto__:null,ResourceTimeGridView:y};return t.globalPlugins.push(R),e.Internal=D,e.default=R,Object.defineProperty(e,"__esModule",{value:!0}),e}({},FullCalendar,FullCalendar.PremiumCommon,FullCalendar.Resource,FullCalendar.TimeGrid,FullCalendar.Internal,FullCalendar.Preact,FullCalendar.DayGrid.Internal,FullCalendar.ResourceDayGrid.Internal,FullCalendar.Resource.Internal,FullCalendar.TimeGrid.Internal);

package/index.js

@@ -2,16 +2,17 @@ import { createPlugin } from '@fullcalendar/core/index.js';
 import premiumCommonPlugin from '@fullcalendar/premium-common/index.js';
 import resourcePlugin from '@fullcalendar/resource/index.js';
 import timeGridPlugin from '@fullcalendar/timegrid/index.js';
-import { ResourceDayTimeColsView } from './internal.js';
+import { ResourceTimeGridView } from './internal.js';
 import '@fullcalendar/core/internal.js';
 import '@fullcalendar/core/preact.js';
-import '@fullcalendar/timegrid/internal.js';
-import '@fullcalendar/resource/internal.js';
+import '@fullcalendar/daygrid/internal.js';
 import '@fullcalendar/resource-daygrid/internal.js';
+import '@fullcalendar/resource/internal.js';
+import '@fullcalendar/timegrid/internal.js';
 
 var index = createPlugin({
     name: '@fullcalendar/resource-timegrid',
-    premiumReleaseDate: '2024-07-12',
+    premiumReleaseDate: '2024-10-01',
     deps: [
         premiumCommonPlugin,
         resourcePlugin,
@@ -21,7 +22,7 @@ var index = createPlugin({
     views: {
         resourceTimeGrid: {
             type: 'timeGrid',
-            component: ResourceDayTimeColsView,
+            component: ResourceTimeGridView,
             needsResourceData: true,
         },
         resourceTimeGridDay: {

package/internal.cjs

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var internal_cjs$1 = require('@fullcalendar/core/internal.cjs');
 var preact_cjs = require('@fullcalendar/core/preact.cjs');
-var internal_cjs$2 = require('@fullcalendar/timegrid/internal.cjs');
-var internal_cjs = require('@fullcalendar/resource/internal.cjs');
+var internal_cjs$4 = require('@fullcalendar/daygrid/internal.cjs');
 var internal_cjs$3 = require('@fullcalendar/resource-daygrid/internal.cjs');
+var internal_cjs = require('@fullcalendar/resource/internal.cjs');
+var internal_cjs$2 = require('@fullcalendar/timegrid/internal.cjs');
 
 class ResourceDayTimeColsJoiner extends internal_cjs.VResourceJoiner {
     transformSeg(seg, resourceDayTable, resourceI) {
@@ -16,69 +17,132 @@ class ResourceDayTimeColsJoiner extends internal_cjs.VResourceJoiner {
     }
 }
 
-class ResourceDayTimeCols extends internal_cjs$1.DateComponent {
+class ResourceTimeGridView extends internal_cjs$1.DateComponent {
     constructor() {
         super(...arguments);
+        this.flattenResources = internal_cjs$1.memoize(internal_cjs.flattenResources);
+        this.buildResourceTimeColsModel = internal_cjs$1.memoize(buildResourceTimeColsModel);
+        this.allDaySplitter = new internal_cjs$2.AllDaySplitter();
+        // for all-day-resource props
+        this.allDayResourceSplitter = new internal_cjs.VResourceSplitter();
+        this.allDayResourceSlicers = {};
+        this.allDayResourceJoiner = new internal_cjs$3.ResourceDayTableJoiner();
+        // for timed resource props
         this.buildDayRanges = internal_cjs$1.memoize(internal_cjs$2.buildDayRanges);
-        this.splitter = new internal_cjs.VResourceSplitter();
-        this.slicers = {};
-        this.joiner = new ResourceDayTimeColsJoiner();
-        this.timeColsRef = preact_cjs.createRef();
+        this.timedResourceSplitter = new internal_cjs.VResourceSplitter();
+        this.timedResourceSlicers = {};
+        this.timedResourceJoiner = new ResourceDayTimeColsJoiner();
+        // timed-only column splitting
+        this.splitFgEventSegs = internal_cjs$1.memoize(internal_cjs$2.splitSegsByCol);
+        this.splitBgEventSegs = internal_cjs$1.memoize(internal_cjs$2.splitSegsByCol);
+        this.splitBusinessHourSegs = internal_cjs$1.memoize(internal_cjs$2.splitSegsByCol);
+        this.splitNowIndicatorSegs = internal_cjs$1.memoize(internal_cjs$2.splitSegsByCol);
+        this.splitDateSelectionSegs = internal_cjs$1.memoize(internal_cjs$2.splitSegsByCol);
+        this.splitEventDrag = internal_cjs$1.memoize(internal_cjs$2.splitInteractionByCol);
+        this.splitEventResize = internal_cjs$1.memoize(internal_cjs$2.splitInteractionByCol);
+        // other memo
+        this.createDayHeaderFormatter = internal_cjs$1.memoize(internal_cjs$4.createDayHeaderFormatter);
         this.isHitComboAllowed = (hit0, hit1) => {
             let allowAcrossResources = this.dayRanges.length === 1;
             return allowAcrossResources || hit0.dateSpan.resourceId === hit1.dateSpan.resourceId;
         };
     }
-    render() {
-        let { props, context } = this;
-        let { dateEnv, options } = context;
-        let { dateProfile, resourceDayTableModel } = props;
-        let dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
-        let splitProps = this.splitter.splitProps(props);
-        this.slicers = internal_cjs$1.mapHash(splitProps, (split, resourceId) => this.slicers[resourceId] || new internal_cjs$2.DayTimeColsSlicer());
-        let slicedProps = internal_cjs$1.mapHash(this.slicers, (slicer, resourceId) => slicer.sliceProps(splitProps[resourceId], dateProfile, null, context, dayRanges));
-        return ( // TODO: would move this further down hierarchy, but sliceNowDate needs it
-        preact_cjs.createElement(internal_cjs$1.NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' }, (nowDate, todayRange) => (preact_cjs.createElement(internal_cjs$2.TimeCols, Object.assign({ ref: this.timeColsRef }, this.joiner.joinProps(slicedProps, resourceDayTableModel), { dateProfile: dateProfile, axis: props.axis, slotDuration: props.slotDuration, slatMetas: props.slatMetas, cells: resourceDayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: options.nowIndicator && this.buildNowIndicatorSegs(nowDate), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest, forPrint: props.forPrint, onSlatCoords: props.onSlatCoords, isHitComboAllowed: this.isHitComboAllowed })))));
-    }
-    buildNowIndicatorSegs(date) {
-        let nonResourceSegs = this.slicers[''].sliceNowDate(date, this.props.dateProfile, this.context.options.nextDayThreshold, this.context, this.dayRanges);
-        return this.joiner.expandSegs(this.props.resourceDayTableModel, nonResourceSegs);
-    }
-}
-
-class ResourceDayTimeColsView extends internal_cjs$2.TimeColsView {
-    constructor() {
-        super(...arguments);
-        this.flattenResources = internal_cjs$1.memoize(internal_cjs.flattenResources);
-        this.buildResourceTimeColsModel = internal_cjs$1.memoize(buildResourceTimeColsModel);
-        this.buildSlatMetas = internal_cjs$1.memoize(internal_cjs$2.buildSlatMetas);
-    }
     render() {
         let { props, context } = this;
         let { options, dateEnv } = context;
         let { dateProfile } = props;
-        let splitProps = this.allDaySplitter.splitProps(props);
         let resourceOrderSpecs = options.resourceOrder || internal_cjs.DEFAULT_RESOURCE_ORDER;
         let resources = this.flattenResources(props.resourceStore, resourceOrderSpecs);
         let resourceDayTableModel = this.buildResourceTimeColsModel(dateProfile, context.dateProfileGenerator, resources, options.datesAboveResources, context);
-        let slatMetas = this.buildSlatMetas(dateProfile.slotMinTime, dateProfile.slotMaxTime, options.slotLabelInterval, options.slotDuration, dateEnv);
-        let { dayMinWidth } = options;
-        let hasAttachedAxis = !dayMinWidth;
-        let hasDetachedAxis = dayMinWidth;
-        let headerContent = options.dayHeaders && (preact_cjs.createElement(internal_cjs.ResourceDayHeader, { resources: resources, dates: resourceDayTableModel.dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: hasAttachedAxis ? this.renderHeadAxis : null }));
-        let allDayContent = (options.allDaySlot !== false) && ((contentArg) => (preact_cjs.createElement(internal_cjs$3.ResourceDayTable, Object.assign({}, splitProps.allDay, { dateProfile: dateProfile, resourceDayTableModel: resourceDayTableModel, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, renderRowIntro: hasAttachedAxis ? this.renderTableRowAxis : null, showWeekNumbers: false, expandRows: false, headerAlignElRef: this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint }, this.getAllDayMaxEventProps()))));
-        let timeGridContent = (contentArg) => (preact_cjs.createElement(ResourceDayTimeCols, Object.assign({}, splitProps.timed, { dateProfile: dateProfile, axis: hasAttachedAxis, slotDuration: options.slotDuration, slatMetas: slatMetas, resourceDayTableModel: resourceDayTableModel, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, onSlatCoords: this.handleSlatCoords, expandRows: contentArg.expandRows, forPrint: props.forPrint, onScrollTopRequest: this.handleScrollTopRequest })));
-        return hasDetachedAxis
-            ? this.renderHScrollLayout(headerContent, allDayContent, timeGridContent, resourceDayTableModel.colCnt, dayMinWidth, slatMetas, this.state.slatCoords)
-            : this.renderSimpleLayout(headerContent, allDayContent, timeGridContent);
+        // split seg by all-day/timed
+        let splitProps = this.allDaySplitter.splitProps(props);
+        // split the all-day segs by resource
+        let allDayResourceSplitProps = this.allDayResourceSplitter.splitProps({
+            businessHours: splitProps.allDay.businessHours,
+            dateSelection: splitProps.allDay.dateSelection,
+            eventStore: splitProps.allDay.eventStore,
+            eventUiBases: splitProps.allDay.eventUiBases,
+            eventSelection: splitProps.allDay.eventSelection,
+            eventDrag: splitProps.allDay.eventDrag,
+            eventResize: splitProps.allDay.eventResize,
+            resourceDayTableModel,
+        });
+        this.allDayResourceSlicers = internal_cjs$1.mapHash(allDayResourceSplitProps, (split, resourceId) => this.allDayResourceSlicers[resourceId] || new internal_cjs$4.DayTableSlicer());
+        let allDayResourceSlicedProps = internal_cjs$1.mapHash(this.allDayResourceSlicers, (slicer, resourceId) => slicer.sliceProps(allDayResourceSplitProps[resourceId], dateProfile, options.nextDayThreshold, context, resourceDayTableModel.dayTableModel));
+        let allDayResourceJoinedProps = this.allDayResourceJoiner.joinProps(allDayResourceSlicedProps, resourceDayTableModel);
+        // split the timed segs by resource
+        let dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
+        let timedResourceSplitProps = this.timedResourceSplitter.splitProps({
+            businessHours: splitProps.timed.businessHours,
+            dateSelection: splitProps.timed.dateSelection,
+            eventStore: splitProps.timed.eventStore,
+            eventUiBases: splitProps.timed.eventUiBases,
+            eventSelection: splitProps.timed.eventSelection,
+            eventDrag: splitProps.timed.eventDrag,
+            eventResize: splitProps.timed.eventResize,
+            resourceDayTableModel,
+        });
+        this.timedResourceSlicers = internal_cjs$1.mapHash(timedResourceSplitProps, (split, resourceId) => this.timedResourceSlicers[resourceId] || new internal_cjs$2.DayTimeColsSlicer());
+        let timedResourceSlicedProps = internal_cjs$1.mapHash(this.timedResourceSlicers, (slicer, resourceId) => slicer.sliceProps(timedResourceSplitProps[resourceId], dateProfile, null, context, dayRanges));
+        let timedResourceJoinedProps = this.timedResourceJoiner.joinProps(timedResourceSlicedProps, resourceDayTableModel);
+        let datesRepDistinctDays = resourceDayTableModel.dayTableModel.rowCnt === 1;
+        let headerTiers = internal_cjs$3.buildResourceHeaderTiers(// TODO: memoize
+        resources, resourceDayTableModel.dayTableModel.headerDates, options.datesAboveResources, datesRepDistinctDays, context);
+        let dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, resourceDayTableModel.colCnt);
+        return (preact_cjs.createElement(internal_cjs$1.NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' /* hacky */ }, (nowDate, todayRange) => {
+            // timed-only column splitting
+            let colCnt = resourceDayTableModel.colCnt;
+            let fgEventSegsByCol = this.splitFgEventSegs(timedResourceJoinedProps.fgEventSegs, colCnt);
+            let bgEventSegsByCol = this.splitBgEventSegs(timedResourceJoinedProps.bgEventSegs, colCnt);
+            let businessHourSegsByCol = this.splitBusinessHourSegs(timedResourceJoinedProps.businessHourSegs, colCnt);
+            let nowIndicatorSegsByCol = this.splitNowIndicatorSegs((() => {
+                // was buildNowIndicatorSegs
+                let nonResourceSegs = this.timedResourceSlicers[''].sliceNowDate(nowDate, this.props.dateProfile, this.context.options.nextDayThreshold, this.context, this.dayRanges);
+                return this.timedResourceJoiner.expandSegs(resourceDayTableModel, nonResourceSegs);
+            })(), colCnt);
+            let dateSelectionSegsByCol = this.splitDateSelectionSegs(timedResourceJoinedProps.dateSelectionSegs, colCnt);
+            let eventDragByCol = this.splitEventDrag(timedResourceJoinedProps.eventDrag, colCnt);
+            let eventResizeByCol = this.splitEventResize(timedResourceJoinedProps.eventResize, colCnt);
+            return (preact_cjs.createElement(internal_cjs$2.TimeGridLayout, { dateProfile: dateProfile, nowDate: nowDate, todayRange: todayRange, cells: resourceDayTableModel.cells[0], forPrint: props.forPrint, isHitComboAllowed: this.isHitComboAllowed, className: 'fc-resource-timegrid-view', 
+                // header content
+                headerTiers: headerTiers, renderHeaderLabel: (tierNum, innerWidthRef, innerHeightRef, width) => ((options.weekNumbers && tierNum === headerTiers.length - 1) ? (preact_cjs.createElement(internal_cjs$2.TimeGridWeekNumber // .fc-cell
+                , { dateProfile: dateProfile, innerWidthRef: innerWidthRef, innerHeightRef: innerHeightRef, width: width })) : (preact_cjs.createElement("div", { className: 'fc-cell', style: { width } }))), 
+                // TODO: DRY
+                renderHeaderContent: (model, tierNum, innerHeightRef, colWidth) => {
+                    if (model.resource) {
+                        return (preact_cjs.createElement(internal_cjs$3.ResourceHeaderCell, Object.assign({}, model, { innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth, isSticky: tierNum < headerTiers.length - 1 })));
+                    }
+                    else if (model.date) {
+                        return (preact_cjs.createElement(internal_cjs$4.DateHeaderCell, Object.assign({}, model, { navLink: resourceDayTableModel.dayTableModel.colCnt > 1, dateProfile: props.dateProfile, todayRange: todayRange, dayHeaderFormat: dayHeaderFormat, innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth })));
+                    }
+                    else {
+                        preact_cjs.createElement(internal_cjs$4.DayOfWeekHeaderCell, Object.assign({}, model, { dayHeaderFormat: dayHeaderFormat, innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth }));
+                    }
+                }, getHeaderModelKey: (model) => (model.resource
+                    ? model.resource.id
+                    : model.date
+                        ? model.date.toISOString()
+                        : model.dow), 
+                // all-day content
+                fgEventSegs: allDayResourceJoinedProps.fgEventSegs, bgEventSegs: allDayResourceJoinedProps.bgEventSegs, businessHourSegs: allDayResourceJoinedProps.businessHourSegs, dateSelectionSegs: allDayResourceJoinedProps.dateSelectionSegs, eventDrag: allDayResourceJoinedProps.eventDrag, eventResize: allDayResourceJoinedProps.eventResize, 
+                // timed content
+                fgEventSegsByCol: fgEventSegsByCol, bgEventSegsByCol: bgEventSegsByCol, businessHourSegsByCol: businessHourSegsByCol, nowIndicatorSegsByCol: nowIndicatorSegsByCol, dateSelectionSegsByCol: dateSelectionSegsByCol, eventDragByCol: eventDragByCol, eventResizeByCol: eventResizeByCol, 
+                // universal content
+                eventSelection: allDayResourceJoinedProps.eventSelection }));
+        }));
     }
 }
+/*
+TODO: kill this and DayResourceTableModel/ResourceDayTableModel
+*/
 function buildResourceTimeColsModel(dateProfile, dateProfileGenerator, resources, datesAboveResources, context) {
     let dayTable = internal_cjs$2.buildTimeColsModel(dateProfile, dateProfileGenerator);
+    if (!resources.length) {
+        return new internal_cjs.ResourcelessDayTableModel(dayTable);
+    }
     return datesAboveResources ?
         new internal_cjs.DayResourceTableModel(dayTable, resources, context) :
         new internal_cjs.ResourceDayTableModel(dayTable, resources, context);
 }
 
-exports.ResourceDayTimeCols = ResourceDayTimeCols;
-exports.ResourceDayTimeColsView = ResourceDayTimeColsView;
+exports.ResourceTimeGridView = ResourceTimeGridView;

package/internal.d.ts

@@ -1,49 +1,33 @@
-import { createElement, VNode } from '@fullcalendar/core/preact';
-import { TimeColsView, TimeSlatMeta, TimeColsSlatsCoords } from '@fullcalendar/timegrid/internal';
-import { ResourceViewProps, AbstractResourceDayTableModel } from '@fullcalendar/resource/internal';
-import { Duration, CssDimValue } from '@fullcalendar/core';
-import { DateComponent, Hit, DateMarker, DateProfile, EventStore, EventUiHash, DateSpan, EventInteractionState } from '@fullcalendar/core/internal';
+import { DateComponent, Hit } from '@fullcalendar/core/internal';
+import { createElement } from '@fullcalendar/core/preact';
+import { ResourceViewProps } from '@fullcalendar/resource/internal';
 
-declare class ResourceDayTimeColsView extends TimeColsView {
-    props: ResourceViewProps;
+interface ResourceTimeGridViewState {
+    axisWidth?: number;
+    slatHeight?: number;
+}
+declare class ResourceTimeGridView extends DateComponent<ResourceViewProps, ResourceTimeGridViewState> {
     private flattenResources;
     private buildResourceTimeColsModel;
-    private buildSlatMetas;
-    render(): createElement.JSX.Element;
-}
-
-interface ResourceDayTimeColsProps {
-    dateProfile: DateProfile;
-    resourceDayTableModel: AbstractResourceDayTableModel;
-    axis: boolean;
-    slotDuration: Duration;
-    slatMetas: TimeSlatMeta[];
-    businessHours: EventStore;
-    eventStore: EventStore;
-    eventUiBases: EventUiHash;
-    dateSelection: DateSpan | null;
-    eventSelection: string;
-    eventDrag: EventInteractionState | null;
-    eventResize: EventInteractionState | null;
-    tableColGroupNode: VNode;
-    tableMinWidth: CssDimValue;
-    clientWidth: number | null;
-    clientHeight: number | null;
-    expandRows: boolean;
-    onScrollTopRequest?: (scrollTop: number) => void;
-    forPrint: boolean;
-    onSlatCoords?: (slatCoords: TimeColsSlatsCoords) => void;
-}
-declare class ResourceDayTimeCols extends DateComponent<ResourceDayTimeColsProps> {
+    private allDaySplitter;
+    private allDayResourceSplitter;
+    private allDayResourceSlicers;
+    private allDayResourceJoiner;
     private buildDayRanges;
     private dayRanges;
-    private splitter;
-    private slicers;
-    private joiner;
-    private timeColsRef;
+    private timedResourceSplitter;
+    private timedResourceSlicers;
+    private timedResourceJoiner;
+    private splitFgEventSegs;
+    private splitBgEventSegs;
+    private splitBusinessHourSegs;
+    private splitNowIndicatorSegs;
+    private splitDateSelectionSegs;
+    private splitEventDrag;
+    private splitEventResize;
+    private createDayHeaderFormatter;
     render(): createElement.JSX.Element;
     isHitComboAllowed: (hit0: Hit, hit1: Hit) => boolean;
-    buildNowIndicatorSegs(date: DateMarker): any[];
 }
 
-export { ResourceDayTimeCols, ResourceDayTimeColsView };
+export { ResourceTimeGridView };

package/internal.js

@@ -1,8 +1,9 @@
 import { DateComponent, memoize, mapHash, NowTimer } from '@fullcalendar/core/internal.js';
-import { createRef, createElement } from '@fullcalendar/core/preact.js';
-import { buildDayRanges, DayTimeColsSlicer, TimeCols, TimeColsView, buildSlatMetas, buildTimeColsModel } from '@fullcalendar/timegrid/internal.js';
-import { VResourceJoiner, VResourceSplitter, flattenResources, DEFAULT_RESOURCE_ORDER, ResourceDayHeader, DayResourceTableModel, ResourceDayTableModel } from '@fullcalendar/resource/internal.js';
-import { ResourceDayTable } from '@fullcalendar/resource-daygrid/internal.js';
+import { createElement } from '@fullcalendar/core/preact.js';
+import { createDayHeaderFormatter, DayTableSlicer, DateHeaderCell, DayOfWeekHeaderCell } from '@fullcalendar/daygrid/internal.js';
+import { ResourceDayTableJoiner, buildResourceHeaderTiers, ResourceHeaderCell } from '@fullcalendar/resource-daygrid/internal.js';
+import { VResourceJoiner, flattenResources, VResourceSplitter, DEFAULT_RESOURCE_ORDER, ResourcelessDayTableModel, DayResourceTableModel, ResourceDayTableModel } from '@fullcalendar/resource/internal.js';
+import { AllDaySplitter, buildDayRanges, splitSegsByCol, splitInteractionByCol, DayTimeColsSlicer, TimeGridLayout, TimeGridWeekNumber, buildTimeColsModel } from '@fullcalendar/timegrid/internal.js';
 
 class ResourceDayTimeColsJoiner extends VResourceJoiner {
     transformSeg(seg, resourceDayTable, resourceI) {
@@ -12,68 +13,132 @@ class ResourceDayTimeColsJoiner extends VResourceJoiner {
     }
 }
 
-class ResourceDayTimeCols extends DateComponent {
+class ResourceTimeGridView extends DateComponent {
     constructor() {
         super(...arguments);
+        this.flattenResources = memoize(flattenResources);
+        this.buildResourceTimeColsModel = memoize(buildResourceTimeColsModel);
+        this.allDaySplitter = new AllDaySplitter();
+        // for all-day-resource props
+        this.allDayResourceSplitter = new VResourceSplitter();
+        this.allDayResourceSlicers = {};
+        this.allDayResourceJoiner = new ResourceDayTableJoiner();
+        // for timed resource props
         this.buildDayRanges = memoize(buildDayRanges);
-        this.splitter = new VResourceSplitter();
-        this.slicers = {};
-        this.joiner = new ResourceDayTimeColsJoiner();
-        this.timeColsRef = createRef();
+        this.timedResourceSplitter = new VResourceSplitter();
+        this.timedResourceSlicers = {};
+        this.timedResourceJoiner = new ResourceDayTimeColsJoiner();
+        // timed-only column splitting
+        this.splitFgEventSegs = memoize(splitSegsByCol);
+        this.splitBgEventSegs = memoize(splitSegsByCol);
+        this.splitBusinessHourSegs = memoize(splitSegsByCol);
+        this.splitNowIndicatorSegs = memoize(splitSegsByCol);
+        this.splitDateSelectionSegs = memoize(splitSegsByCol);
+        this.splitEventDrag = memoize(splitInteractionByCol);
+        this.splitEventResize = memoize(splitInteractionByCol);
+        // other memo
+        this.createDayHeaderFormatter = memoize(createDayHeaderFormatter);
         this.isHitComboAllowed = (hit0, hit1) => {
             let allowAcrossResources = this.dayRanges.length === 1;
             return allowAcrossResources || hit0.dateSpan.resourceId === hit1.dateSpan.resourceId;
         };
     }
-    render() {
-        let { props, context } = this;
-        let { dateEnv, options } = context;
-        let { dateProfile, resourceDayTableModel } = props;
-        let dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
-        let splitProps = this.splitter.splitProps(props);
-        this.slicers = mapHash(splitProps, (split, resourceId) => this.slicers[resourceId] || new DayTimeColsSlicer());
-        let slicedProps = mapHash(this.slicers, (slicer, resourceId) => slicer.sliceProps(splitProps[resourceId], dateProfile, null, context, dayRanges));
-        return ( // TODO: would move this further down hierarchy, but sliceNowDate needs it
-        createElement(NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' }, (nowDate, todayRange) => (createElement(TimeCols, Object.assign({ ref: this.timeColsRef }, this.joiner.joinProps(slicedProps, resourceDayTableModel), { dateProfile: dateProfile, axis: props.axis, slotDuration: props.slotDuration, slatMetas: props.slatMetas, cells: resourceDayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: options.nowIndicator && this.buildNowIndicatorSegs(nowDate), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest, forPrint: props.forPrint, onSlatCoords: props.onSlatCoords, isHitComboAllowed: this.isHitComboAllowed })))));
-    }
-    buildNowIndicatorSegs(date) {
-        let nonResourceSegs = this.slicers[''].sliceNowDate(date, this.props.dateProfile, this.context.options.nextDayThreshold, this.context, this.dayRanges);
-        return this.joiner.expandSegs(this.props.resourceDayTableModel, nonResourceSegs);
-    }
-}
-
-class ResourceDayTimeColsView extends TimeColsView {
-    constructor() {
-        super(...arguments);
-        this.flattenResources = memoize(flattenResources);
-        this.buildResourceTimeColsModel = memoize(buildResourceTimeColsModel);
-        this.buildSlatMetas = memoize(buildSlatMetas);
-    }
     render() {
         let { props, context } = this;
         let { options, dateEnv } = context;
         let { dateProfile } = props;
-        let splitProps = this.allDaySplitter.splitProps(props);
         let resourceOrderSpecs = options.resourceOrder || DEFAULT_RESOURCE_ORDER;
         let resources = this.flattenResources(props.resourceStore, resourceOrderSpecs);
         let resourceDayTableModel = this.buildResourceTimeColsModel(dateProfile, context.dateProfileGenerator, resources, options.datesAboveResources, context);
-        let slatMetas = this.buildSlatMetas(dateProfile.slotMinTime, dateProfile.slotMaxTime, options.slotLabelInterval, options.slotDuration, dateEnv);
-        let { dayMinWidth } = options;
-        let hasAttachedAxis = !dayMinWidth;
-        let hasDetachedAxis = dayMinWidth;
-        let headerContent = options.dayHeaders && (createElement(ResourceDayHeader, { resources: resources, dates: resourceDayTableModel.dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: hasAttachedAxis ? this.renderHeadAxis : null }));
-        let allDayContent = (options.allDaySlot !== false) && ((contentArg) => (createElement(ResourceDayTable, Object.assign({}, splitProps.allDay, { dateProfile: dateProfile, resourceDayTableModel: resourceDayTableModel, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, renderRowIntro: hasAttachedAxis ? this.renderTableRowAxis : null, showWeekNumbers: false, expandRows: false, headerAlignElRef: this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint }, this.getAllDayMaxEventProps()))));
-        let timeGridContent = (contentArg) => (createElement(ResourceDayTimeCols, Object.assign({}, splitProps.timed, { dateProfile: dateProfile, axis: hasAttachedAxis, slotDuration: options.slotDuration, slatMetas: slatMetas, resourceDayTableModel: resourceDayTableModel, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, onSlatCoords: this.handleSlatCoords, expandRows: contentArg.expandRows, forPrint: props.forPrint, onScrollTopRequest: this.handleScrollTopRequest })));
-        return hasDetachedAxis
-            ? this.renderHScrollLayout(headerContent, allDayContent, timeGridContent, resourceDayTableModel.colCnt, dayMinWidth, slatMetas, this.state.slatCoords)
-            : this.renderSimpleLayout(headerContent, allDayContent, timeGridContent);
+        // split seg by all-day/timed
+        let splitProps = this.allDaySplitter.splitProps(props);
+        // split the all-day segs by resource
+        let allDayResourceSplitProps = this.allDayResourceSplitter.splitProps({
+            businessHours: splitProps.allDay.businessHours,
+            dateSelection: splitProps.allDay.dateSelection,
+            eventStore: splitProps.allDay.eventStore,
+            eventUiBases: splitProps.allDay.eventUiBases,
+            eventSelection: splitProps.allDay.eventSelection,
+            eventDrag: splitProps.allDay.eventDrag,
+            eventResize: splitProps.allDay.eventResize,
+            resourceDayTableModel,
+        });
+        this.allDayResourceSlicers = mapHash(allDayResourceSplitProps, (split, resourceId) => this.allDayResourceSlicers[resourceId] || new DayTableSlicer());
+        let allDayResourceSlicedProps = mapHash(this.allDayResourceSlicers, (slicer, resourceId) => slicer.sliceProps(allDayResourceSplitProps[resourceId], dateProfile, options.nextDayThreshold, context, resourceDayTableModel.dayTableModel));
+        let allDayResourceJoinedProps = this.allDayResourceJoiner.joinProps(allDayResourceSlicedProps, resourceDayTableModel);
+        // split the timed segs by resource
+        let dayRanges = this.dayRanges = this.buildDayRanges(resourceDayTableModel.dayTableModel, dateProfile, dateEnv);
+        let timedResourceSplitProps = this.timedResourceSplitter.splitProps({
+            businessHours: splitProps.timed.businessHours,
+            dateSelection: splitProps.timed.dateSelection,
+            eventStore: splitProps.timed.eventStore,
+            eventUiBases: splitProps.timed.eventUiBases,
+            eventSelection: splitProps.timed.eventSelection,
+            eventDrag: splitProps.timed.eventDrag,
+            eventResize: splitProps.timed.eventResize,
+            resourceDayTableModel,
+        });
+        this.timedResourceSlicers = mapHash(timedResourceSplitProps, (split, resourceId) => this.timedResourceSlicers[resourceId] || new DayTimeColsSlicer());
+        let timedResourceSlicedProps = mapHash(this.timedResourceSlicers, (slicer, resourceId) => slicer.sliceProps(timedResourceSplitProps[resourceId], dateProfile, null, context, dayRanges));
+        let timedResourceJoinedProps = this.timedResourceJoiner.joinProps(timedResourceSlicedProps, resourceDayTableModel);
+        let datesRepDistinctDays = resourceDayTableModel.dayTableModel.rowCnt === 1;
+        let headerTiers = buildResourceHeaderTiers(// TODO: memoize
+        resources, resourceDayTableModel.dayTableModel.headerDates, options.datesAboveResources, datesRepDistinctDays, context);
+        let dayHeaderFormat = this.createDayHeaderFormatter(context.options.dayHeaderFormat, datesRepDistinctDays, resourceDayTableModel.colCnt);
+        return (createElement(NowTimer, { unit: options.nowIndicator ? 'minute' : 'day' /* hacky */ }, (nowDate, todayRange) => {
+            // timed-only column splitting
+            let colCnt = resourceDayTableModel.colCnt;
+            let fgEventSegsByCol = this.splitFgEventSegs(timedResourceJoinedProps.fgEventSegs, colCnt);
+            let bgEventSegsByCol = this.splitBgEventSegs(timedResourceJoinedProps.bgEventSegs, colCnt);
+            let businessHourSegsByCol = this.splitBusinessHourSegs(timedResourceJoinedProps.businessHourSegs, colCnt);
+            let nowIndicatorSegsByCol = this.splitNowIndicatorSegs((() => {
+                // was buildNowIndicatorSegs
+                let nonResourceSegs = this.timedResourceSlicers[''].sliceNowDate(nowDate, this.props.dateProfile, this.context.options.nextDayThreshold, this.context, this.dayRanges);
+                return this.timedResourceJoiner.expandSegs(resourceDayTableModel, nonResourceSegs);
+            })(), colCnt);
+            let dateSelectionSegsByCol = this.splitDateSelectionSegs(timedResourceJoinedProps.dateSelectionSegs, colCnt);
+            let eventDragByCol = this.splitEventDrag(timedResourceJoinedProps.eventDrag, colCnt);
+            let eventResizeByCol = this.splitEventResize(timedResourceJoinedProps.eventResize, colCnt);
+            return (createElement(TimeGridLayout, { dateProfile: dateProfile, nowDate: nowDate, todayRange: todayRange, cells: resourceDayTableModel.cells[0], forPrint: props.forPrint, isHitComboAllowed: this.isHitComboAllowed, className: 'fc-resource-timegrid-view', 
+                // header content
+                headerTiers: headerTiers, renderHeaderLabel: (tierNum, innerWidthRef, innerHeightRef, width) => ((options.weekNumbers && tierNum === headerTiers.length - 1) ? (createElement(TimeGridWeekNumber // .fc-cell
+                , { dateProfile: dateProfile, innerWidthRef: innerWidthRef, innerHeightRef: innerHeightRef, width: width })) : (createElement("div", { className: 'fc-cell', style: { width } }))), 
+                // TODO: DRY
+                renderHeaderContent: (model, tierNum, innerHeightRef, colWidth) => {
+                    if (model.resource) {
+                        return (createElement(ResourceHeaderCell, Object.assign({}, model, { innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth, isSticky: tierNum < headerTiers.length - 1 })));
+                    }
+                    else if (model.date) {
+                        return (createElement(DateHeaderCell, Object.assign({}, model, { navLink: resourceDayTableModel.dayTableModel.colCnt > 1, dateProfile: props.dateProfile, todayRange: todayRange, dayHeaderFormat: dayHeaderFormat, innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth })));
+                    }
+                    else {
+                        createElement(DayOfWeekHeaderCell, Object.assign({}, model, { dayHeaderFormat: dayHeaderFormat, innerHeightRef: innerHeightRef, colSpan: model.colSpan, colWidth: colWidth }));
+                    }
+                }, getHeaderModelKey: (model) => (model.resource
+                    ? model.resource.id
+                    : model.date
+                        ? model.date.toISOString()
+                        : model.dow), 
+                // all-day content
+                fgEventSegs: allDayResourceJoinedProps.fgEventSegs, bgEventSegs: allDayResourceJoinedProps.bgEventSegs, businessHourSegs: allDayResourceJoinedProps.businessHourSegs, dateSelectionSegs: allDayResourceJoinedProps.dateSelectionSegs, eventDrag: allDayResourceJoinedProps.eventDrag, eventResize: allDayResourceJoinedProps.eventResize, 
+                // timed content
+                fgEventSegsByCol: fgEventSegsByCol, bgEventSegsByCol: bgEventSegsByCol, businessHourSegsByCol: businessHourSegsByCol, nowIndicatorSegsByCol: nowIndicatorSegsByCol, dateSelectionSegsByCol: dateSelectionSegsByCol, eventDragByCol: eventDragByCol, eventResizeByCol: eventResizeByCol, 
+                // universal content
+                eventSelection: allDayResourceJoinedProps.eventSelection }));
+        }));
     }
 }
+/*
+TODO: kill this and DayResourceTableModel/ResourceDayTableModel
+*/
 function buildResourceTimeColsModel(dateProfile, dateProfileGenerator, resources, datesAboveResources, context) {
     let dayTable = buildTimeColsModel(dateProfile, dateProfileGenerator);
+    if (!resources.length) {
+        return new ResourcelessDayTableModel(dayTable);
+    }
     return datesAboveResources ?
         new DayResourceTableModel(dayTable, resources, context) :
         new ResourceDayTableModel(dayTable, resources, context);
 }
 
-export { ResourceDayTimeCols, ResourceDayTimeColsView };
+export { ResourceTimeGridView };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullcalendar/resource-timegrid",
-  "version": "6.1.15",
+  "version": "7.0.0-beta.0",
   "title": "FullCalendar Resource Time Grid Plugin",
   "description": "Displays events on a vertical resource view with time slots",
   "keywords": [
@@ -15,13 +15,14 @@
   ],
   "homepage": "https://fullcalendar.io/docs/vertical-resource-view",
   "dependencies": {
-    "@fullcalendar/premium-common": "~6.1.15",
-    "@fullcalendar/resource-daygrid": "~6.1.15",
-    "@fullcalendar/timegrid": "~6.1.15"
+    "@fullcalendar/daygrid": "7.0.0-beta.0",
+    "@fullcalendar/premium-common": "7.0.0-beta.0",
+    "@fullcalendar/resource-daygrid": "7.0.0-beta.0",
+    "@fullcalendar/timegrid": "7.0.0-beta.0"
   },
   "peerDependencies": {
-    "@fullcalendar/core": "~6.1.15",
-    "@fullcalendar/resource": "~6.1.15"
+    "@fullcalendar/core": "7.0.0-beta.0",
+    "@fullcalendar/resource": "7.0.0-beta.0"
   },
   "type": "module",
   "bugs": "https://fullcalendar.io/reporting-bugs",