@fullcalendar/timegrid - npm Package Compare versions

Comparing version 5.0.0-beta.3 to 5.0.0-beta.4

main.js

 /*!
-FullCalendar v5.0.0-beta.3
+FullCalendar v5.0.0-beta.4
 Docs & License: https://fullcalendar.io/
@@ -8,3 +8,3 @@ (c) 2019 Adam Shaw
 
-import { hasBgRendering, Splitter, rangeContainsMarker, startOfDay, asRoughMs, createDuration, createRef, RefMap, createElement, PositionCache, BaseComponent, RenderHook, createFormatter, ViewContextType, wholeDivideDurations, formatIsoTimeString, addDurations, diffDays, buildNavLinkData, WeekNumberRoot, getStickyHeaderDates, ViewRoot, SimpleScrollGrid, getStickyFooterScrollbar, DateComponent, renderScrollShim, sortEventSegs, compareByFieldSpecs, buildSegCompareObj, StandardEvent, DayCellRoot, Fragment, getSegMeta, BgEvent, renderFill, NowIndicatorRoot, DayCellContent, memoize, multiplyDuration, NowTimer, intersectRanges, Slicer, DayHeader, DaySeriesModel, DayTableModel, createPlugin } from '@fullcalendar/common';
+import { hasBgRendering, Splitter, rangeContainsMarker, startOfDay, asRoughMs, createDuration, createRef, RefMap, createElement, isElVisible, PositionCache, BaseComponent, RenderHook, createFormatter, ViewContextType, wholeDivideDurations, formatIsoTimeString, addDurations, diffDays, buildNavLinkData, WeekNumberRoot, getStickyHeaderDates, ViewRoot, SimpleScrollGrid, getStickyFooterScrollbar, DateComponent, renderScrollShim, sortEventSegs, compareByFieldSpecs, buildSegCompareObj, StandardEvent, DayCellRoot, Fragment, getSegMeta, BgEvent, renderFill, NowIndicatorRoot, DayCellContent, memoize, multiplyDuration, NowTimer, intersectRanges, Slicer, DayHeader, DaySeriesModel, DayTableModel, createPlugin } from '@fullcalendar/common';
 import { __extends, __assign, __spreadArrays } from 'tslib';
@@ -143,5 +143,10 @@ import { DayTable } from '@fullcalendar/daygrid';
         var props = this.props;
-        if (props.onCoords && props.clientWidth !== null) { // means sizing has stabilized
-            props.onCoords(new TimeColsSlatsCoords(new PositionCache(this.rootElRef.current, collectSlatEls(this.slatElRefs.currentMap, props.slatMetas), false, true // vertical
-            ), this.props.dateProfile, props.slatMetas));
+        if (props.onCoords &&
+            props.clientWidth !== null // means sizing has stabilized
+        ) {
+            var rootEl = this.rootElRef.current;
+            if (isElVisible(rootEl)) { // not hidden by css
+                props.onCoords(new TimeColsSlatsCoords(new PositionCache(this.rootElRef.current, collectSlatEls(this.slatElRefs.currentMap, props.slatMetas), false, true // vertical
+                ), this.props.dateProfile, props.slatMetas));
+            }
         }
@@ -200,3 +205,6 @@ };
             var dateEnv = context.dateEnv, options = context.options, viewApi = context.viewApi;
-            var labelFormat = options.slotLabelFormat || DEFAULT_SLAT_LABEL_FORMAT;
+            var labelFormat = // TODO: fully pre-parse
+             options.slotLabelFormat == null ? DEFAULT_SLAT_LABEL_FORMAT :
+                Array.isArray(options.slotLabelFormat) ? createFormatter(options.slotLabelFormat[0]) :
+                    createFormatter(options.slotLabelFormat);
             var hookProps = {
@@ -337,4 +345,6 @@ time: props.time,
             sections.push({
+                type: 'body',
                 key: 'all-day-divider',
-                outerContent: (createElement("tr", { className: 'fc-scrollgrid-section fc-scrollgrid-section-body' },
+                outerContent: ( // TODO: rename to cellContent so don't need to define <tr>?
+                createElement("tr", { className: 'fc-scrollgrid-section' },
                     createElement("td", { className: 'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded') })))
@@ -354,3 +364,3 @@ });
         return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.rootElRef }, function (rootElRef, classNames) { return (createElement("div", { className: ['fc-timegrid'].concat(classNames).join(' '), ref: rootElRef },
-            createElement(SimpleScrollGrid, { forPrint: props.forPrint, liquid: !props.isHeightAuto, cols: [{ width: 'shrink' }], sections: sections }))); }));
+            createElement(SimpleScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, cols: [{ width: 'shrink' }], sections: sections }))); }));
     };
@@ -364,4 +374,4 @@ TimeColsView.prototype.renderHScrollLayout = function (headerRowContent, allDayContent, timeContent, colCnt, dayMinWidth, slatMetas) {
         var _a = this, context = _a.context, props = _a.props;
-        var stickyHeaderDates = getStickyHeaderDates(context.options);
-        var stickyFooterScrollbar = getStickyFooterScrollbar(context.options);
+        var stickyHeaderDates = !props.forPrint && getStickyHeaderDates(context.options);
+        var stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(context.options);
         var sections = [];
@@ -405,3 +415,5 @@ if (headerRowContent) {
                 key: 'all-day-divider',
-                outerContent: (createElement("tr", { className: 'fc-scrollgrid-section fc-scrollgrid-section-body' },
+                type: 'body',
+                outerContent: ( // TODO: rename to cellContent so don't need to define <tr>?
+                createElement("tr", { className: 'fc-scrollgrid-section' },
                     createElement("td", { colSpan: 2, className: 'fc-timegrid-divider fc-divider ' + context.theme.getClass('tableCellShaded') })))
@@ -418,2 +430,3 @@ });
                     key: 'axis',
+                    tableClassName: 'fc-timegrid-slot-labels',
                     rowContent: createElement(TimeBodyAxis, { slatMetas: slatMetas })
@@ -446,3 +459,3 @@ },
         return (createElement(ViewRoot, { viewSpec: context.viewSpec, elRef: this.rootElRef }, function (rootElRef, classNames) { return (createElement("div", { className: ['fc-timegrid'].concat(classNames).join(' '), ref: rootElRef },
-            createElement(ScrollGrid, { forPrint: props.forPrint, liquid: !props.isHeightAuto, colGroups: [
+            createElement(ScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, colGroups: [
                     { width: 'shrink', cols: [{ width: 'shrink' }] },
@@ -736,7 +749,18 @@ { cols: [{ span: colCnt, minWidth: dayMinWidth }] }
     TimeCol.prototype.renderFgSegs = function (segs, segIsInvisible, isDragging, isResizing, isDateSelecting) {
+        var props = this.props;
+        if (props.forPrint) {
+            return this.renderPrintFgSegs(segs);
+        }
+        else if (props.slatCoords) {
+            return this.renderPositionedFgSegs(segs, segIsInvisible, isDragging, isResizing, isDateSelecting);
+        }
+    };
+    TimeCol.prototype.renderPrintFgSegs = function (segs) {
+        var props = this.props;
+        return segs.map(function (seg) { return (createElement("div", { className: 'fc-timegrid-event-harness', key: seg.eventRange.instance.instanceId },
+            createElement(TimeColEvent, __assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: false }, getSegMeta(seg, props.todayRange, props.nowDate))))); });
+    };
+    TimeCol.prototype.renderPositionedFgSegs = function (segs, segIsInvisible, isDragging, isResizing, isDateSelecting) {
         var _this = this;
         var _a = this, context = _a.context, props = _a.props;
-        if (!props.slatCoords) {
-            return;
-        }
         // assigns TO THE SEGS THEMSELVES
@@ -870,3 +894,3 @@ // also, receives resorted array
                             createElement("td", { className: 'fc-timegrid-axis' }),
-                        props.cells.map(function (cell, i) { return (createElement(TimeCol, { key: cell.key, elRef: _this.cellElRefs.createRef(cell.key), dateProfile: props.dateProfile, date: cell.date, nowDate: props.nowDate, todayRange: props.todayRange, extraHookProps: cell.extraHookProps, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, fgEventSegs: fgEventSegsByRow[i], bgEventSegs: bgEventSegsByRow[i], businessHourSegs: businessHourSegsByRow[i], nowIndicatorSegs: nowIndicatorSegsByRow[i], dateSelectionSegs: dateSelectionSegsByRow[i], eventDrag: eventDragByRow[i], eventResize: eventResizeByRow[i], slatCoords: props.slatCoords, eventSelection: props.eventSelection })); })))),
+                        props.cells.map(function (cell, i) { return (createElement(TimeCol, { key: cell.key, elRef: _this.cellElRefs.createRef(cell.key), dateProfile: props.dateProfile, date: cell.date, nowDate: props.nowDate, todayRange: props.todayRange, extraHookProps: cell.extraHookProps, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, fgEventSegs: fgEventSegsByRow[i], bgEventSegs: bgEventSegsByRow[i], businessHourSegs: businessHourSegsByRow[i], nowIndicatorSegs: nowIndicatorSegsByRow[i], dateSelectionSegs: dateSelectionSegsByRow[i], eventDrag: eventDragByRow[i], eventResize: eventResizeByRow[i], slatCoords: props.slatCoords, eventSelection: props.eventSelection, forPrint: props.forPrint })); })))),
             typeof nowIndicatorTop === 'number' &&
@@ -883,3 +907,5 @@ createElement(NowIndicatorRoot, { isAxis: true, date: props.nowDate }, function (rootElRef, classNames, innerElRef, innerContent) { return (createElement("div", { ref: rootElRef, className: ['fc-timegrid-now-indicator-arrow'].concat(classNames).join(' '), style: { top: nowIndicatorTop } }, innerContent)); })));
         var props = this.props;
-        if (props.onColCoords && props.clientWidth !== null) { // means sizing has stabilized
+        if (props.onColCoords &&
+            props.clientWidth !== null // means sizing has stabilized
+        ) {
             props.onColCoords(new PositionCache(this.rootElRef.current, collectCellEls(this.cellElRefs.currentMap, props.cells), true, // horizontal
@@ -1020,3 +1046,3 @@ false));
         // TODO: would move this further down hierarchy, but sliceNowDate needs it
-        return (createElement(NowTimer, { unit: isNowIndicator ? 'minute' : 'day' }, function (nowDate, todayRange) { return (createElement(TimeCols, __assign({ ref: _this.timeColsRef, rootElRef: _this.handleRootEl }, _this.slicer.sliceProps(props, dateProfile, null, context, dayRanges), { axis: props.axis, dateProfile: dateProfile, slatMetas: props.slatMetas, slotDuration: props.slotDuration, cells: dayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: isNowIndicator && _this.slicer.sliceNowDate(nowDate, context, dayRanges), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest, forPrint: props.forPrint }))); }));
+        return (createElement(NowTimer, { unit: isNowIndicator ? 'minute' : 'day' }, function (nowDate, todayRange) { return (createElement(TimeCols, __assign({ ref: _this.timeColsRef, rootElRef: _this.handleRootEl }, _this.slicer.sliceProps(props, dateProfile, null, context, dayRanges), { forPrint: props.forPrint, axis: props.axis, dateProfile: dateProfile, slatMetas: props.slatMetas, slotDuration: props.slotDuration, cells: dayTableModel.cells[0], tableColGroupNode: props.tableColGroupNode, tableMinWidth: props.tableMinWidth, clientWidth: props.clientWidth, clientHeight: props.clientHeight, expandRows: props.expandRows, nowDate: nowDate, nowIndicatorSegs: isNowIndicator && _this.slicer.sliceNowDate(nowDate, context, dayRanges), todayRange: todayRange, onScrollTopRequest: props.onScrollTopRequest }))); }));
     };
@@ -1094,7 +1120,9 @@ DayTimeCols.prototype.queryHit = function (positionLeft, positionTop) {
         var dayMinWidth = options.dayMinWidth;
+        var hasAttachedAxis = !dayMinWidth;
+        var hasDetachedAxis = dayMinWidth;
         var headerContent = options.dayHeaders &&
-            createElement(DayHeader, { dates: dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: dayMinWidth ? null : this.renderHeadAxis });
-        var allDayContent = (options.allDaySlot !== false) && (function (contentArg) { return (createElement(DayTable, __assign({}, splitProps['allDay'], { dateProfile: dateProfile, dayTableModel: dayTableModel, nextDayThreshold: options.nextDayThreshold, tableMinWidth: contentArg.tableMinWidth, colGroupNode: contentArg.tableColGroupNode, renderRowIntro: dayMinWidth ? null : _this.renderTableRowAxis, showWeekNumbers: false, expandRows: false, headerAlignElRef: _this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight }, _this.getAllDayMaxEventProps()))); });
-        var timeGridContent = function (contentArg) { return (createElement(DayTimeCols, __assign({}, splitProps['timed'], { dayTableModel: dayTableModel, dateProfile: dateProfile, axis: !dayMinWidth, slotDuration: options.slotDuration, slatMetas: slatMetas, forPrint: props.forPrint, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, expandRows: contentArg.expandRows, onScrollTopRequest: _this.handleScrollTopRequest }))); };
-        return dayMinWidth
+            createElement(DayHeader, { dates: dayTableModel.headerDates, dateProfile: dateProfile, datesRepDistinctDays: true, renderIntro: hasAttachedAxis ? this.renderHeadAxis : null });
+        var allDayContent = (options.allDaySlot !== false) && (function (contentArg) { return (createElement(DayTable, __assign({}, splitProps['allDay'], { dateProfile: dateProfile, dayTableModel: dayTableModel, 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()))); });
+        var timeGridContent = function (contentArg) { return (createElement(DayTimeCols, __assign({}, splitProps['timed'], { dayTableModel: dayTableModel, dateProfile: dateProfile, axis: hasAttachedAxis, slotDuration: options.slotDuration, slatMetas: slatMetas, forPrint: props.forPrint, tableColGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, expandRows: contentArg.expandRows, onScrollTopRequest: _this.handleScrollTopRequest }))); };
+        return hasDetachedAxis
             ? this.renderHScrollLayout(headerContent, allDayContent, timeGridContent, dayTableModel.colCnt, dayMinWidth, slatMetas)
@@ -1101,0 +1129,0 @@ : this.renderSimpleLayout(headerContent, allDayContent, timeGridContent);

package.json

 {
   "name": "@fullcalendar/timegrid",
-  "version": "5.0.0-beta.3",
+  "version": "5.0.0-beta.4",
   "title": "FullCalendar Time Grid Plugin",
@@ -8,4 +8,4 @@ "description": "Display your events on a grid of time slots",
   "dependencies": {
-    "@fullcalendar/common": "5.0.0-beta.3",
-    "@fullcalendar/daygrid": "5.0.0-beta.3",
+    "@fullcalendar/common": "5.0.0-beta.4",
+    "@fullcalendar/daygrid": "5.0.0-beta.4",
     "tslib": "^1.9.3"
@@ -12,0 +12,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176762

increased by2.7%

Lines of code

1555

increased by2.1%

Dependency changes

• + Added@fullcalendar/common@5.0.0-beta.4(transitive)

• + Added@fullcalendar/daygrid@5.0.0-beta.4(transitive)

• - Removed@fullcalendar/common@5.0.0-beta.3(transitive)

• - Removed@fullcalendar/daygrid@5.0.0-beta.3(transitive)

• Updated@fullcalendar/common@5.0.0-beta.4

• Updated@fullcalendar/daygrid@5.0.0-beta.4