/*! FullCalendar v5.10.2 Docs & License: https://fullcalendar.io/ (c) 2021 Adam Shaw */ import './main.css'; import { createRef, getStickyHeaderDates, createElement, ViewRoot, SimpleScrollGrid, getStickyFooterScrollbar, renderScrollShim, DateComponent, buildNavLinkAttrs, DayCellContent, Fragment, BaseComponent, createFormatter, StandardEvent, buildSegTimeText, EventRoot, getSegAnchorAttrs, memoize, MoreLinkRoot, getSegMeta, createAriaClickAttrs, getUniqueDomId, setRef, DayCellRoot, WeekNumberRoot, buildEntryKey, intersectSpans, SegHierarchy, intersectRanges, addDays, RefMap, sortEventSegs, isPropsEqual, buildEventRangeKey, BgEvent, renderFill, PositionCache, NowTimer, Slicer, DayHeader, DaySeriesModel, DayTableModel, addWeeks, diffWeeks, DateProfileGenerator, createPlugin } from '@fullcalendar/common'; import { __extends, __assign, __spreadArray } from 'tslib'; /* An abstract class for the daygrid views, as well as month view. Renders one or more rows of day cells. ----------------------------------------------------------------------------------------------------------------------*/ // It is a manager for a Table subcomponent, which does most of the heavy lifting. // It is responsible for managing width/height. var TableView = /** @class */ (function (_super) { __extends(TableView, _super); function TableView() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.headerElRef = createRef(); return _this; } TableView.prototype.renderSimpleLayout = function (headerRowContent, bodyContent) { var _a = this, props = _a.props, context = _a.context; var sections = []; var stickyHeaderDates = getStickyHeaderDates(context.options); if (headerRowContent) { sections.push({ type: 'header', key: 'header', isSticky: stickyHeaderDates, chunk: { elRef: this.headerElRef, tableClassName: 'fc-col-header', rowContent: headerRowContent, }, }); } sections.push({ type: 'body', key: 'body', liquid: true, chunk: { content: bodyContent }, }); return (createElement(ViewRoot, { viewSpec: context.viewSpec }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: ['fc-daygrid'].concat(classNames).join(' ') }, createElement(SimpleScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, cols: [] /* TODO: make optional? */, sections: sections }))); })); }; TableView.prototype.renderHScrollLayout = function (headerRowContent, bodyContent, colCnt, dayMinWidth) { var ScrollGrid = this.context.pluginHooks.scrollGridImpl; if (!ScrollGrid) { throw new Error('No ScrollGrid implementation'); } var _a = this, props = _a.props, context = _a.context; var stickyHeaderDates = !props.forPrint && getStickyHeaderDates(context.options); var stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(context.options); var sections = []; if (headerRowContent) { sections.push({ type: 'header', key: 'header', isSticky: stickyHeaderDates, chunks: [{ key: 'main', elRef: this.headerElRef, tableClassName: 'fc-col-header', rowContent: headerRowContent, }], }); } sections.push({ type: 'body', key: 'body', liquid: true, chunks: [{ key: 'main', content: bodyContent, }], }); if (stickyFooterScrollbar) { sections.push({ type: 'footer', key: 'footer', isSticky: true, chunks: [{ key: 'main', content: renderScrollShim, }], }); } return (createElement(ViewRoot, { viewSpec: context.viewSpec }, function (rootElRef, classNames) { return (createElement("div", { ref: rootElRef, className: ['fc-daygrid'].concat(classNames).join(' ') }, createElement(ScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, colGroups: [{ cols: [{ span: colCnt, minWidth: dayMinWidth }] }], sections: sections }))); })); }; return TableView; }(DateComponent)); function splitSegsByRow(segs, rowCnt) { var byRow = []; for (var i = 0; i < rowCnt; i += 1) { byRow[i] = []; } for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) { var seg = segs_1[_i]; byRow[seg.row].push(seg); } return byRow; } function splitSegsByFirstCol(segs, colCnt) { var byCol = []; for (var i = 0; i < colCnt; i += 1) { byCol[i] = []; } for (var _i = 0, segs_2 = segs; _i < segs_2.length; _i++) { var seg = segs_2[_i]; byCol[seg.firstCol].push(seg); } return byCol; } function splitInteractionByRow(ui, rowCnt) { var byRow = []; if (!ui) { for (var i = 0; i < rowCnt; i += 1) { byRow[i] = null; } } else { for (var i = 0; i < rowCnt; i += 1) { byRow[i] = { affectedInstances: ui.affectedInstances, isEvent: ui.isEvent, segs: [], }; } for (var _i = 0, _a = ui.segs; _i < _a.length; _i++) { var seg = _a[_i]; byRow[seg.row].segs.push(seg); } } return byRow; } var TableCellTop = /** @class */ (function (_super) { __extends(TableCellTop, _super); function TableCellTop() { return _super !== null && _super.apply(this, arguments) || this; } TableCellTop.prototype.render = function () { var props = this.props; var navLinkAttrs = buildNavLinkAttrs(this.context, props.date); return (createElement(DayCellContent, { date: props.date, dateProfile: props.dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, extraHookProps: props.extraHookProps, defaultContent: renderTopInner }, function (innerElRef, innerContent) { return ((innerContent || props.forceDayTop) && (createElement("div", { className: "fc-daygrid-day-top", ref: innerElRef }, createElement("a", __assign({ id: props.dayNumberId, className: "fc-daygrid-day-number" }, navLinkAttrs), innerContent || createElement(Fragment, null, "\u00A0"))))); })); }; return TableCellTop; }(BaseComponent)); function renderTopInner(props) { return props.dayNumberText; } var DEFAULT_TABLE_EVENT_TIME_FORMAT = createFormatter({ hour: 'numeric', minute: '2-digit', omitZeroMinute: true, meridiem: 'narrow', }); function hasListItemDisplay(seg) { var display = seg.eventRange.ui.display; return display === 'list-item' || (display === 'auto' && !seg.eventRange.def.allDay && seg.firstCol === seg.lastCol && // can't be multi-day seg.isStart && // " seg.isEnd // " ); } var TableBlockEvent = /** @class */ (function (_super) { __extends(TableBlockEvent, _super); function TableBlockEvent() { return _super !== null && _super.apply(this, arguments) || this; } TableBlockEvent.prototype.render = function () { var props = this.props; return (createElement(StandardEvent, __assign({}, props, { extraClassNames: ['fc-daygrid-event', 'fc-daygrid-block-event', 'fc-h-event'], defaultTimeFormat: DEFAULT_TABLE_EVENT_TIME_FORMAT, defaultDisplayEventEnd: props.defaultDisplayEventEnd, disableResizing: !props.seg.eventRange.def.allDay }))); }; return TableBlockEvent; }(BaseComponent)); var TableListItemEvent = /** @class */ (function (_super) { __extends(TableListItemEvent, _super); function TableListItemEvent() { return _super !== null && _super.apply(this, arguments) || this; } TableListItemEvent.prototype.render = function () { var _a = this, props = _a.props, context = _a.context; var timeFormat = context.options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT; var timeText = buildSegTimeText(props.seg, timeFormat, context, true, props.defaultDisplayEventEnd); return (createElement(EventRoot, { seg: props.seg, timeText: timeText, defaultContent: renderInnerContent, isDragging: props.isDragging, isResizing: false, isDateSelecting: false, isSelected: props.isSelected, isPast: props.isPast, isFuture: props.isFuture, isToday: props.isToday }, function (rootElRef, classNames, innerElRef, innerContent) { return ( // we don't use styles! createElement("a", __assign({ className: ['fc-daygrid-event', 'fc-daygrid-dot-event'].concat(classNames).join(' '), ref: rootElRef }, getSegAnchorAttrs(props.seg, context)), innerContent)); })); }; return TableListItemEvent; }(BaseComponent)); function renderInnerContent(innerProps) { return (createElement(Fragment, null, createElement("div", { className: "fc-daygrid-event-dot", style: { borderColor: innerProps.borderColor || innerProps.backgroundColor } }), innerProps.timeText && (createElement("div", { className: "fc-event-time" }, innerProps.timeText)), createElement("div", { className: "fc-event-title" }, innerProps.event.title || createElement(Fragment, null, "\u00A0")))); } var TableCellMoreLink = /** @class */ (function (_super) { __extends(TableCellMoreLink, _super); function TableCellMoreLink() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.compileSegs = memoize(compileSegs); return _this; } TableCellMoreLink.prototype.render = function () { var props = this.props; var _a = this.compileSegs(props.singlePlacements), allSegs = _a.allSegs, invisibleSegs = _a.invisibleSegs; return (createElement(MoreLinkRoot, { dateProfile: props.dateProfile, todayRange: props.todayRange, allDayDate: props.allDayDate, moreCnt: props.moreCnt, allSegs: allSegs, hiddenSegs: invisibleSegs, alignmentElRef: props.alignmentElRef, alignGridTop: props.alignGridTop, extraDateSpan: props.extraDateSpan, popoverContent: function () { var isForcedInvisible = (props.eventDrag ? props.eventDrag.affectedInstances : null) || (props.eventResize ? props.eventResize.affectedInstances : null) || {}; return (createElement(Fragment, null, allSegs.map(function (seg) { var instanceId = seg.eventRange.instance.instanceId; return (createElement("div", { className: "fc-daygrid-event-harness", key: instanceId, style: { visibility: isForcedInvisible[instanceId] ? 'hidden' : '', } }, hasListItemDisplay(seg) ? (createElement(TableListItemEvent, __assign({ seg: seg, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange)))) : (createElement(TableBlockEvent, __assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange)))))); }))); } }, function (rootElRef, classNames, innerElRef, innerContent, handleClick, title, isExpanded, popoverId) { return (createElement("a", __assign({ ref: rootElRef, className: ['fc-daygrid-more-link'].concat(classNames).join(' '), title: title, "aria-expanded": isExpanded, "aria-controls": popoverId }, createAriaClickAttrs(handleClick)), innerContent)); })); }; return TableCellMoreLink; }(BaseComponent)); function compileSegs(singlePlacements) { var allSegs = []; var invisibleSegs = []; for (var _i = 0, singlePlacements_1 = singlePlacements; _i < singlePlacements_1.length; _i++) { var placement = singlePlacements_1[_i]; allSegs.push(placement.seg); if (!placement.isVisible) { invisibleSegs.push(placement.seg); } } return { allSegs: allSegs, invisibleSegs: invisibleSegs }; } var DEFAULT_WEEK_NUM_FORMAT = createFormatter({ week: 'narrow' }); var TableCell = /** @class */ (function (_super) { __extends(TableCell, _super); function TableCell() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.rootElRef = createRef(); _this.state = { dayNumberId: getUniqueDomId(), }; _this.handleRootEl = function (el) { setRef(_this.rootElRef, el); setRef(_this.props.elRef, el); }; return _this; } TableCell.prototype.render = function () { var _a = this, context = _a.context, props = _a.props, state = _a.state, rootElRef = _a.rootElRef; var date = props.date, dateProfile = props.dateProfile; var navLinkAttrs = buildNavLinkAttrs(context, date, 'week'); return (createElement(DayCellRoot, { date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, extraHookProps: props.extraHookProps, elRef: this.handleRootEl }, function (dayElRef, dayClassNames, rootDataAttrs, isDisabled) { return (createElement("td", __assign({ ref: dayElRef, role: "gridcell", className: ['fc-daygrid-day'].concat(dayClassNames, props.extraClassNames || []).join(' ') }, rootDataAttrs, props.extraDataAttrs, (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), createElement("div", { className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", ref: props.innerElRef /* different from hook system! RENAME */ }, props.showWeekNumber && (createElement(WeekNumberRoot, { date: date, defaultFormat: DEFAULT_WEEK_NUM_FORMAT }, function (weekElRef, weekClassNames, innerElRef, innerContent) { return (createElement("a", __assign({ ref: weekElRef, className: ['fc-daygrid-week-number'].concat(weekClassNames).join(' ') }, navLinkAttrs), innerContent)); })), !isDisabled && (createElement(TableCellTop, { date: date, dateProfile: dateProfile, showDayNumber: props.showDayNumber, dayNumberId: state.dayNumberId, forceDayTop: props.forceDayTop, todayRange: props.todayRange, extraHookProps: props.extraHookProps })), createElement("div", { className: "fc-daygrid-day-events", ref: props.fgContentElRef }, props.fgContent, createElement("div", { className: "fc-daygrid-day-bottom", style: { marginTop: props.moreMarginTop } }, createElement(TableCellMoreLink, { allDayDate: date, singlePlacements: props.singlePlacements, moreCnt: props.moreCnt, alignmentElRef: rootElRef, alignGridTop: !props.showDayNumber, extraDateSpan: props.extraDateSpan, dateProfile: props.dateProfile, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, todayRange: props.todayRange }))), createElement("div", { className: "fc-daygrid-day-bg" }, props.bgContent)))); })); }; return TableCell; }(DateComponent)); function computeFgSegPlacement(segs, // assumed already sorted dayMaxEvents, dayMaxEventRows, strictOrder, eventInstanceHeights, maxContentHeight, cells) { var hierarchy = new DayGridSegHierarchy(); hierarchy.allowReslicing = true; hierarchy.strictOrder = strictOrder; if (dayMaxEvents === true || dayMaxEventRows === true) { hierarchy.maxCoord = maxContentHeight; hierarchy.hiddenConsumes = true; } else if (typeof dayMaxEvents === 'number') { hierarchy.maxStackCnt = dayMaxEvents; } else if (typeof dayMaxEventRows === 'number') { hierarchy.maxStackCnt = dayMaxEventRows; hierarchy.hiddenConsumes = true; } // create segInputs only for segs with known heights var segInputs = []; var unknownHeightSegs = []; for (var i = 0; i < segs.length; i += 1) { var seg = segs[i]; var instanceId = seg.eventRange.instance.instanceId; var eventHeight = eventInstanceHeights[instanceId]; if (eventHeight != null) { segInputs.push({ index: i, thickness: eventHeight, span: { start: seg.firstCol, end: seg.lastCol + 1, }, }); } else { unknownHeightSegs.push(seg); } } var hiddenEntries = hierarchy.addSegs(segInputs); var segRects = hierarchy.toRects(); var _a = placeRects(segRects, segs, cells), singleColPlacements = _a.singleColPlacements, multiColPlacements = _a.multiColPlacements, leftoverMargins = _a.leftoverMargins; var moreCnts = []; var moreMarginTops = []; // add segs with unknown heights for (var _i = 0, unknownHeightSegs_1 = unknownHeightSegs; _i < unknownHeightSegs_1.length; _i++) { var seg = unknownHeightSegs_1[_i]; multiColPlacements[seg.firstCol].push({ seg: seg, isVisible: false, isAbsolute: true, absoluteTop: 0, marginTop: 0, }); for (var col = seg.firstCol; col <= seg.lastCol; col += 1) { singleColPlacements[col].push({ seg: resliceSeg(seg, col, col + 1, cells), isVisible: false, isAbsolute: false, absoluteTop: 0, marginTop: 0, }); } } // add the hidden entries for (var col = 0; col < cells.length; col += 1) { moreCnts.push(0); } for (var _b = 0, hiddenEntries_1 = hiddenEntries; _b < hiddenEntries_1.length; _b++) { var hiddenEntry = hiddenEntries_1[_b]; var seg = segs[hiddenEntry.index]; var hiddenSpan = hiddenEntry.span; multiColPlacements[hiddenSpan.start].push({ seg: resliceSeg(seg, hiddenSpan.start, hiddenSpan.end, cells), isVisible: false, isAbsolute: true, absoluteTop: 0, marginTop: 0, }); for (var col = hiddenSpan.start; col < hiddenSpan.end; col += 1) { moreCnts[col] += 1; singleColPlacements[col].push({ seg: resliceSeg(seg, col, col + 1, cells), isVisible: false, isAbsolute: false, absoluteTop: 0, marginTop: 0, }); } } // deal with leftover margins for (var col = 0; col < cells.length; col += 1) { moreMarginTops.push(leftoverMargins[col]); } return { singleColPlacements: singleColPlacements, multiColPlacements: multiColPlacements, moreCnts: moreCnts, moreMarginTops: moreMarginTops }; } // rects ordered by top coord, then left function placeRects(allRects, segs, cells) { var rectsByEachCol = groupRectsByEachCol(allRects, cells.length); var singleColPlacements = []; var multiColPlacements = []; var leftoverMargins = []; for (var col = 0; col < cells.length; col += 1) { var rects = rectsByEachCol[col]; // compute all static segs in singlePlacements var singlePlacements = []; var currentHeight = 0; var currentMarginTop = 0; for (var _i = 0, rects_1 = rects; _i < rects_1.length; _i++) { var rect = rects_1[_i]; var seg = segs[rect.index]; singlePlacements.push({ seg: resliceSeg(seg, col, col + 1, cells), isVisible: true, isAbsolute: false, absoluteTop: rect.levelCoord, marginTop: rect.levelCoord - currentHeight, }); currentHeight = rect.levelCoord + rect.thickness; } // compute mixed static/absolute segs in multiPlacements var multiPlacements = []; currentHeight = 0; currentMarginTop = 0; for (var _a = 0, rects_2 = rects; _a < rects_2.length; _a++) { var rect = rects_2[_a]; var seg = segs[rect.index]; var isAbsolute = rect.span.end - rect.span.start > 1; // multi-column? var isFirstCol = rect.span.start === col; currentMarginTop += rect.levelCoord - currentHeight; // amount of space since bottom of previous seg currentHeight = rect.levelCoord + rect.thickness; // height will now be bottom of current seg if (isAbsolute) { currentMarginTop += rect.thickness; if (isFirstCol) { multiPlacements.push({ seg: resliceSeg(seg, rect.span.start, rect.span.end, cells), isVisible: true, isAbsolute: true, absoluteTop: rect.levelCoord, marginTop: 0, }); } } else if (isFirstCol) { multiPlacements.push({ seg: resliceSeg(seg, rect.span.start, rect.span.end, cells), isVisible: true, isAbsolute: false, absoluteTop: rect.levelCoord, marginTop: currentMarginTop, // claim the margin }); currentMarginTop = 0; } } singleColPlacements.push(singlePlacements); multiColPlacements.push(multiPlacements); leftoverMargins.push(currentMarginTop); } return { singleColPlacements: singleColPlacements, multiColPlacements: multiColPlacements, leftoverMargins: leftoverMargins }; } function groupRectsByEachCol(rects, colCnt) { var rectsByEachCol = []; for (var col = 0; col < colCnt; col += 1) { rectsByEachCol.push([]); } for (var _i = 0, rects_3 = rects; _i < rects_3.length; _i++) { var rect = rects_3[_i]; for (var col = rect.span.start; col < rect.span.end; col += 1) { rectsByEachCol[col].push(rect); } } return rectsByEachCol; } function resliceSeg(seg, spanStart, spanEnd, cells) { if (seg.firstCol === spanStart && seg.lastCol === spanEnd - 1) { return seg; } var eventRange = seg.eventRange; var origRange = eventRange.range; var slicedRange = intersectRanges(origRange, { start: cells[spanStart].date, end: addDays(cells[spanEnd - 1].date, 1), }); return __assign(__assign({}, seg), { firstCol: spanStart, lastCol: spanEnd - 1, eventRange: { def: eventRange.def, ui: __assign(__assign({}, eventRange.ui), { durationEditable: false }), instance: eventRange.instance, range: slicedRange, }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() }); } var DayGridSegHierarchy = /** @class */ (function (_super) { __extends(DayGridSegHierarchy, _super); function DayGridSegHierarchy() { var _this = _super !== null && _super.apply(this, arguments) || this; // config _this.hiddenConsumes = false; // allows us to keep hidden entries in the hierarchy so they take up space _this.forceHidden = {}; return _this; } DayGridSegHierarchy.prototype.addSegs = function (segInputs) { var _this = this; var hiddenSegs = _super.prototype.addSegs.call(this, segInputs); var entriesByLevel = this.entriesByLevel; var excludeHidden = function (entry) { return !_this.forceHidden[buildEntryKey(entry)]; }; // remove the forced-hidden segs for (var level = 0; level < entriesByLevel.length; level += 1) { entriesByLevel[level] = entriesByLevel[level].filter(excludeHidden); } return hiddenSegs; }; DayGridSegHierarchy.prototype.handleInvalidInsertion = function (insertion, entry, hiddenEntries) { var _a = this, entriesByLevel = _a.entriesByLevel, forceHidden = _a.forceHidden; var touchingEntry = insertion.touchingEntry, touchingLevel = insertion.touchingLevel, touchingLateral = insertion.touchingLateral; if (this.hiddenConsumes && touchingEntry) { var touchingEntryId = buildEntryKey(touchingEntry); // if not already hidden if (!forceHidden[touchingEntryId]) { if (this.allowReslicing) { var placeholderEntry = __assign(__assign({}, touchingEntry), { span: intersectSpans(touchingEntry.span, entry.span) }); var placeholderEntryId = buildEntryKey(placeholderEntry); forceHidden[placeholderEntryId] = true; entriesByLevel[touchingLevel][touchingLateral] = placeholderEntry; // replace touchingEntry with our placeholder this.splitEntry(touchingEntry, entry, hiddenEntries); // split up the touchingEntry, reinsert it } else { forceHidden[touchingEntryId] = true; hiddenEntries.push(touchingEntry); } } } return _super.prototype.handleInvalidInsertion.call(this, insertion, entry, hiddenEntries); }; return DayGridSegHierarchy; }(SegHierarchy)); var TableRow = /** @class */ (function (_super) { __extends(TableRow, _super); function TableRow() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.cellElRefs = new RefMap(); // the _this.frameElRefs = new RefMap(); // the fc-daygrid-day-frame _this.fgElRefs = new RefMap(); // the fc-daygrid-day-events _this.segHarnessRefs = new RefMap(); // indexed by "instanceId:firstCol" _this.rootElRef = createRef(); _this.state = { framePositions: null, maxContentHeight: null, eventInstanceHeights: {}, }; return _this; } TableRow.prototype.render = function () { var _this = this; var _a = this, props = _a.props, state = _a.state, context = _a.context; var options = context.options; var colCnt = props.cells.length; var businessHoursByCol = splitSegsByFirstCol(props.businessHourSegs, colCnt); var bgEventSegsByCol = splitSegsByFirstCol(props.bgEventSegs, colCnt); var highlightSegsByCol = splitSegsByFirstCol(this.getHighlightSegs(), colCnt); var mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt); var _b = computeFgSegPlacement(sortEventSegs(props.fgEventSegs, options.eventOrder), props.dayMaxEvents, props.dayMaxEventRows, options.eventOrderStrict, state.eventInstanceHeights, state.maxContentHeight, props.cells), singleColPlacements = _b.singleColPlacements, multiColPlacements = _b.multiColPlacements, moreCnts = _b.moreCnts, moreMarginTops = _b.moreMarginTops; var isForcedInvisible = // TODO: messy way to compute this (props.eventDrag && props.eventDrag.affectedInstances) || (props.eventResize && props.eventResize.affectedInstances) || {}; return (createElement("tr", { ref: this.rootElRef, role: "row" }, props.renderIntro && props.renderIntro(), props.cells.map(function (cell, col) { var normalFgNodes = _this.renderFgSegs(col, props.forPrint ? singleColPlacements[col] : multiColPlacements[col], props.todayRange, isForcedInvisible); var mirrorFgNodes = _this.renderFgSegs(col, buildMirrorPlacements(mirrorSegsByCol[col], multiColPlacements), props.todayRange, {}, Boolean(props.eventDrag), Boolean(props.eventResize), false); return (createElement(TableCell, { key: cell.key, elRef: _this.cellElRefs.createRef(cell.key), innerElRef: _this.frameElRefs.createRef(cell.key) /* FF problem, but okay to use for left/right. TODO: rename prop */, dateProfile: props.dateProfile, date: cell.date, showDayNumber: props.showDayNumbers, showWeekNumber: props.showWeekNumbers && col === 0, forceDayTop: props.showWeekNumbers /* even displaying weeknum for row, not necessarily day */, todayRange: props.todayRange, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, extraHookProps: cell.extraHookProps, extraDataAttrs: cell.extraDataAttrs, extraClassNames: cell.extraClassNames, extraDateSpan: cell.extraDateSpan, moreCnt: moreCnts[col], moreMarginTop: moreMarginTops[col], singlePlacements: singleColPlacements[col], fgContentElRef: _this.fgElRefs.createRef(cell.key), fgContent: ( // Fragment scopes the keys createElement(Fragment, null, createElement(Fragment, null, normalFgNodes), createElement(Fragment, null, mirrorFgNodes))), bgContent: ( // Fragment scopes the keys createElement(Fragment, null, _this.renderFillSegs(highlightSegsByCol[col], 'highlight'), _this.renderFillSegs(businessHoursByCol[col], 'non-business'), _this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))) })); }))); }; TableRow.prototype.componentDidMount = function () { this.updateSizing(true); }; TableRow.prototype.componentDidUpdate = function (prevProps, prevState) { var currentProps = this.props; this.updateSizing(!isPropsEqual(prevProps, currentProps)); }; TableRow.prototype.getHighlightSegs = function () { var props = this.props; if (props.eventDrag && props.eventDrag.segs.length) { // messy check return props.eventDrag.segs; } if (props.eventResize && props.eventResize.segs.length) { // messy check return props.eventResize.segs; } return props.dateSelectionSegs; }; TableRow.prototype.getMirrorSegs = function () { var props = this.props; if (props.eventResize && props.eventResize.segs.length) { // messy check return props.eventResize.segs; } return []; }; TableRow.prototype.renderFgSegs = function (col, segPlacements, todayRange, isForcedInvisible, isDragging, isResizing, isDateSelecting) { var context = this.context; var eventSelection = this.props.eventSelection; var framePositions = this.state.framePositions; var defaultDisplayEventEnd = this.props.cells.length === 1; // colCnt === 1 var isMirror = isDragging || isResizing || isDateSelecting; var nodes = []; if (framePositions) { for (var _i = 0, segPlacements_1 = segPlacements; _i < segPlacements_1.length; _i++) { var placement = segPlacements_1[_i]; var seg = placement.seg; var instanceId = seg.eventRange.instance.instanceId; var key = instanceId + ':' + col; var isVisible = placement.isVisible && !isForcedInvisible[instanceId]; var isAbsolute = placement.isAbsolute; var left = ''; var right = ''; if (isAbsolute) { if (context.isRtl) { right = 0; left = framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol]; } else { left = 0; right = framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol]; } } /* known bug: events that are force to be list-item but span multiple days still take up space in later columns todo: in print view, for multi-day events, don't display title within non-start/end segs */ nodes.push(createElement("div", { className: 'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : ''), key: key, ref: isMirror ? null : this.segHarnessRefs.createRef(key), style: { visibility: isVisible ? '' : 'hidden', marginTop: isAbsolute ? '' : placement.marginTop, top: isAbsolute ? placement.absoluteTop : '', left: left, right: right, } }, hasListItemDisplay(seg) ? (createElement(TableListItemEvent, __assign({ seg: seg, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange)))) : (createElement(TableBlockEvent, __assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange)))))); } } return nodes; }; TableRow.prototype.renderFillSegs = function (segs, fillType) { var isRtl = this.context.isRtl; var todayRange = this.props.todayRange; var framePositions = this.state.framePositions; var nodes = []; if (framePositions) { for (var _i = 0, segs_1 = segs; _i < segs_1.length; _i++) { var seg = segs_1[_i]; var leftRightCss = isRtl ? { right: 0, left: framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol], } : { left: 0, right: framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol], }; nodes.push(createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-daygrid-bg-harness", style: leftRightCss }, fillType === 'bg-event' ? createElement(BgEvent, __assign({ seg: seg }, getSegMeta(seg, todayRange))) : renderFill(fillType))); } } return createElement.apply(void 0, __spreadArray([Fragment, {}], nodes)); }; TableRow.prototype.updateSizing = function (isExternalSizingChange) { var _a = this, props = _a.props, frameElRefs = _a.frameElRefs; if (!props.forPrint && props.clientWidth !== null // positioning ready? ) { if (isExternalSizingChange) { var frameEls = props.cells.map(function (cell) { return frameElRefs.currentMap[cell.key]; }); if (frameEls.length) { var originEl = this.rootElRef.current; this.setState({ framePositions: new PositionCache(originEl, frameEls, true, // isHorizontal false), }); } } var oldInstanceHeights = this.state.eventInstanceHeights; var newInstanceHeights = this.queryEventInstanceHeights(); var limitByContentHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true; this.setState({ // HACK to prevent oscillations of events being shown/hidden from max-event-rows // Essentially, once you compute an element's height, never null-out. // TODO: always display all events, as visibility:hidden? eventInstanceHeights: __assign(__assign({}, oldInstanceHeights), newInstanceHeights), maxContentHeight: limitByContentHeight ? this.computeMaxContentHeight() : null, }); } }; TableRow.prototype.queryEventInstanceHeights = function () { var segElMap = this.segHarnessRefs.currentMap; var eventInstanceHeights = {}; // get the max height amongst instance segs for (var key in segElMap) { var height = Math.round(segElMap[key].getBoundingClientRect().height); var instanceId = key.split(':')[0]; // deconstruct how renderFgSegs makes the key eventInstanceHeights[instanceId] = Math.max(eventInstanceHeights[instanceId] || 0, height); } return eventInstanceHeights; }; TableRow.prototype.computeMaxContentHeight = function () { var firstKey = this.props.cells[0].key; var cellEl = this.cellElRefs.currentMap[firstKey]; var fcContainerEl = this.fgElRefs.currentMap[firstKey]; return cellEl.getBoundingClientRect().bottom - fcContainerEl.getBoundingClientRect().top; }; TableRow.prototype.getCellEls = function () { var elMap = this.cellElRefs.currentMap; return this.props.cells.map(function (cell) { return elMap[cell.key]; }); }; return TableRow; }(DateComponent)); TableRow.addStateEquality({ eventInstanceHeights: isPropsEqual, }); function buildMirrorPlacements(mirrorSegs, colPlacements) { if (!mirrorSegs.length) { return []; } var topsByInstanceId = buildAbsoluteTopHash(colPlacements); // TODO: cache this at first render? return mirrorSegs.map(function (seg) { return ({ seg: seg, isVisible: true, isAbsolute: true, absoluteTop: topsByInstanceId[seg.eventRange.instance.instanceId], marginTop: 0, }); }); } function buildAbsoluteTopHash(colPlacements) { var topsByInstanceId = {}; for (var _i = 0, colPlacements_1 = colPlacements; _i < colPlacements_1.length; _i++) { var placements = colPlacements_1[_i]; for (var _a = 0, placements_1 = placements; _a < placements_1.length; _a++) { var placement = placements_1[_a]; topsByInstanceId[placement.seg.eventRange.instance.instanceId] = placement.absoluteTop; } } return topsByInstanceId; } var Table = /** @class */ (function (_super) { __extends(Table, _super); function Table() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.splitBusinessHourSegs = memoize(splitSegsByRow); _this.splitBgEventSegs = memoize(splitSegsByRow); _this.splitFgEventSegs = memoize(splitSegsByRow); _this.splitDateSelectionSegs = memoize(splitSegsByRow); _this.splitEventDrag = memoize(splitInteractionByRow); _this.splitEventResize = memoize(splitInteractionByRow); _this.rowRefs = new RefMap(); _this.handleRootEl = function (rootEl) { _this.rootEl = rootEl; if (rootEl) { _this.context.registerInteractiveComponent(_this, { el: rootEl, isHitComboAllowed: _this.props.isHitComboAllowed, }); } else { _this.context.unregisterInteractiveComponent(_this); } }; return _this; } Table.prototype.render = function () { var _this = this; var props = this.props; var dateProfile = props.dateProfile, dayMaxEventRows = props.dayMaxEventRows, dayMaxEvents = props.dayMaxEvents, expandRows = props.expandRows; var rowCnt = props.cells.length; var businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt); var bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt); var fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt); var dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt); var eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt); var eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt); var limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true; // if rows can't expand to fill fixed height, can't do balanced-height event limit // TODO: best place to normalize these options? if (limitViaBalanced && !expandRows) { limitViaBalanced = false; dayMaxEventRows = null; dayMaxEvents = null; } var classNames = [ 'fc-daygrid-body', limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced', expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others? ]; return (createElement("div", { className: classNames.join(' '), ref: this.handleRootEl, style: { // these props are important to give this wrapper correct dimensions for interactions // TODO: if we set it here, can we avoid giving to inner tables? width: props.clientWidth, minWidth: props.tableMinWidth, } }, createElement(NowTimer, { unit: "day" }, function (nowDate, todayRange) { return (createElement(Fragment, null, createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: { width: props.clientWidth, minWidth: props.tableMinWidth, height: expandRows ? props.clientHeight : '', } }, props.colGroupNode, createElement("tbody", { role: "presentation" }, props.cells.map(function (cells, row) { return (createElement(TableRow, { ref: _this.rowRefs.createRef(row), key: cells.length ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */ : row // in case there are no cells (like when resource view is loading) , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: dateProfile, cells: cells, renderIntro: props.renderRowIntro, businessHourSegs: businessHourSegsByRow[row], eventSelection: props.eventSelection, bgEventSegs: bgEventSegsByRow[row].filter(isSegAllDay) /* hack */, fgEventSegs: fgEventSegsByRow[row], dateSelectionSegs: dateSelectionSegsByRow[row], eventDrag: eventDragByRow[row], eventResize: eventResizeByRow[row], dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint })); }))))); }))); }; // Hit System // ---------------------------------------------------------------------------------------------------- Table.prototype.prepareHits = function () { this.rowPositions = new PositionCache(this.rootEl, this.rowRefs.collect().map(function (rowObj) { return rowObj.getCellEls()[0]; }), // first cell el in each row. TODO: not optimal false, true); this.colPositions = new PositionCache(this.rootEl, this.rowRefs.currentMap[0].getCellEls(), // cell els in first row true, // horizontal false); }; Table.prototype.queryHit = function (positionLeft, positionTop) { var _a = this, colPositions = _a.colPositions, rowPositions = _a.rowPositions; var col = colPositions.leftToIndex(positionLeft); var row = rowPositions.topToIndex(positionTop); if (row != null && col != null) { var cell = this.props.cells[row][col]; return { dateProfile: this.props.dateProfile, dateSpan: __assign({ range: this.getCellRange(row, col), allDay: true }, cell.extraDateSpan), dayEl: this.getCellEl(row, col), rect: { left: colPositions.lefts[col], right: colPositions.rights[col], top: rowPositions.tops[row], bottom: rowPositions.bottoms[row], }, layer: 0, }; } return null; }; Table.prototype.getCellEl = function (row, col) { return this.rowRefs.currentMap[row].getCellEls()[col]; // TODO: not optimal }; Table.prototype.getCellRange = function (row, col) { var start = this.props.cells[row][col].date; var end = addDays(start, 1); return { start: start, end: end }; }; return Table; }(DateComponent)); function isSegAllDay(seg) { return seg.eventRange.def.allDay; } var DayTableSlicer = /** @class */ (function (_super) { __extends(DayTableSlicer, _super); function DayTableSlicer() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.forceDayIfListItem = true; return _this; } DayTableSlicer.prototype.sliceRange = function (dateRange, dayTableModel) { return dayTableModel.sliceRange(dateRange); }; return DayTableSlicer; }(Slicer)); var DayTable = /** @class */ (function (_super) { __extends(DayTable, _super); function DayTable() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.slicer = new DayTableSlicer(); _this.tableRef = createRef(); return _this; } DayTable.prototype.render = function () { var _a = this, props = _a.props, context = _a.context; return (createElement(Table, __assign({ ref: this.tableRef }, this.slicer.sliceProps(props, props.dateProfile, props.nextDayThreshold, context, props.dayTableModel), { dateProfile: props.dateProfile, cells: props.dayTableModel.cells, colGroupNode: props.colGroupNode, tableMinWidth: props.tableMinWidth, renderRowIntro: props.renderRowIntro, dayMaxEvents: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, showWeekNumbers: props.showWeekNumbers, expandRows: props.expandRows, headerAlignElRef: props.headerAlignElRef, clientWidth: props.clientWidth, clientHeight: props.clientHeight, forPrint: props.forPrint }))); }; return DayTable; }(DateComponent)); var DayTableView = /** @class */ (function (_super) { __extends(DayTableView, _super); function DayTableView() { var _this = _super !== null && _super.apply(this, arguments) || this; _this.buildDayTableModel = memoize(buildDayTableModel); _this.headerRef = createRef(); _this.tableRef = createRef(); return _this; } DayTableView.prototype.render = function () { var _this = this; var _a = this.context, options = _a.options, dateProfileGenerator = _a.dateProfileGenerator; var props = this.props; var dayTableModel = this.buildDayTableModel(props.dateProfile, dateProfileGenerator); var headerContent = options.dayHeaders && (createElement(DayHeader, { ref: this.headerRef, dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: dayTableModel.rowCnt === 1 })); var bodyContent = function (contentArg) { return (createElement(DayTable, { ref: _this.tableRef, dateProfile: props.dateProfile, dayTableModel: dayTableModel, businessHours: props.businessHours, dateSelection: props.dateSelection, eventStore: props.eventStore, eventUiBases: props.eventUiBases, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, nextDayThreshold: options.nextDayThreshold, colGroupNode: contentArg.tableColGroupNode, tableMinWidth: contentArg.tableMinWidth, dayMaxEvents: options.dayMaxEvents, dayMaxEventRows: options.dayMaxEventRows, showWeekNumbers: options.weekNumbers, expandRows: !props.isHeightAuto, headerAlignElRef: _this.headerElRef, clientWidth: contentArg.clientWidth, clientHeight: contentArg.clientHeight, forPrint: props.forPrint })); }; return options.dayMinWidth ? this.renderHScrollLayout(headerContent, bodyContent, dayTableModel.colCnt, options.dayMinWidth) : this.renderSimpleLayout(headerContent, bodyContent); }; return DayTableView; }(TableView)); function buildDayTableModel(dateProfile, dateProfileGenerator) { var daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator); return new DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit)); } var TableDateProfileGenerator = /** @class */ (function (_super) { __extends(TableDateProfileGenerator, _super); function TableDateProfileGenerator() { return _super !== null && _super.apply(this, arguments) || this; } // Computes the date range that will be rendered. TableDateProfileGenerator.prototype.buildRenderRange = function (currentRange, currentRangeUnit, isRangeAllDay) { var dateEnv = this.props.dateEnv; var renderRange = _super.prototype.buildRenderRange.call(this, currentRange, currentRangeUnit, isRangeAllDay); var start = renderRange.start; var end = renderRange.end; var endOfWeek; // year and month views should be aligned with weeks. this is already done for week if (/^(year|month)$/.test(currentRangeUnit)) { start = dateEnv.startOfWeek(start); // make end-of-week if not already endOfWeek = dateEnv.startOfWeek(end); if (endOfWeek.valueOf() !== end.valueOf()) { end = addWeeks(endOfWeek, 1); } } // ensure 6 weeks if (this.props.monthMode && this.props.fixedWeekCount) { var rowCnt = Math.ceil(// could be partial weeks due to hiddenDays diffWeeks(start, end)); end = addWeeks(end, 6 - rowCnt); } return { start: start, end: end }; }; return TableDateProfileGenerator; }(DateProfileGenerator)); var main = createPlugin({ initialView: 'dayGridMonth', views: { dayGrid: { component: DayTableView, dateProfileGeneratorClass: TableDateProfileGenerator, }, dayGridDay: { type: 'dayGrid', duration: { days: 1 }, }, dayGridWeek: { type: 'dayGrid', duration: { weeks: 1 }, }, dayGridMonth: { type: 'dayGrid', duration: { months: 1 }, monthMode: true, fixedWeekCount: true, }, }, }); export default main; export { DayTableView as DayGridView, DayTable, DayTableSlicer, Table, TableView, buildDayTableModel }; //# sourceMappingURL=main.js.map