internal.js 51 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985
  1. import { DateComponent, getStickyHeaderDates, ViewContainer, SimpleScrollGrid, getStickyFooterScrollbar, renderScrollShim, createFormatter, BaseComponent, StandardEvent, buildSegTimeText, EventContainer, getSegAnchorAttrs, memoize, MoreLinkContainer, getSegMeta, getUniqueDomId, setRef, DayCellContainer, WeekNumberContainer, buildNavLinkAttrs, hasCustomDayCellContent, addMs, intersectRanges, addDays, SegHierarchy, buildEntryKey, intersectSpans, RefMap, sortEventSegs, isPropsEqual, buildEventRangeKey, BgEvent, renderFill, PositionCache, NowTimer, formatIsoMonthStr, formatDayString, Slicer, DayHeader, DaySeriesModel, DayTableModel, DateProfileGenerator, addWeeks, diffWeeks, injectStyles } from '@fullcalendar/core/internal.js';
  2. import { createRef, createElement, Fragment } from '@fullcalendar/core/preact.js';
  3. /* An abstract class for the daygrid views, as well as month view. Renders one or more rows of day cells.
  4. ----------------------------------------------------------------------------------------------------------------------*/
  5. // It is a manager for a Table subcomponent, which does most of the heavy lifting.
  6. // It is responsible for managing width/height.
  7. class TableView extends DateComponent {
  8. constructor() {
  9. super(...arguments);
  10. this.headerElRef = createRef();
  11. }
  12. renderSimpleLayout(headerRowContent, bodyContent) {
  13. let { props, context } = this;
  14. let sections = [];
  15. let stickyHeaderDates = getStickyHeaderDates(context.options);
  16. if (headerRowContent) {
  17. sections.push({
  18. type: 'header',
  19. key: 'header',
  20. isSticky: stickyHeaderDates,
  21. chunk: {
  22. elRef: this.headerElRef,
  23. tableClassName: 'fc-col-header',
  24. rowContent: headerRowContent,
  25. },
  26. });
  27. }
  28. sections.push({
  29. type: 'body',
  30. key: 'body',
  31. liquid: true,
  32. chunk: { content: bodyContent },
  33. });
  34. return (createElement(ViewContainer, { elClasses: ['fc-daygrid'], viewSpec: context.viewSpec },
  35. createElement(SimpleScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, collapsibleWidth: props.forPrint, cols: [] /* TODO: make optional? */, sections: sections })));
  36. }
  37. renderHScrollLayout(headerRowContent, bodyContent, colCnt, dayMinWidth) {
  38. let ScrollGrid = this.context.pluginHooks.scrollGridImpl;
  39. if (!ScrollGrid) {
  40. throw new Error('No ScrollGrid implementation');
  41. }
  42. let { props, context } = this;
  43. let stickyHeaderDates = !props.forPrint && getStickyHeaderDates(context.options);
  44. let stickyFooterScrollbar = !props.forPrint && getStickyFooterScrollbar(context.options);
  45. let sections = [];
  46. if (headerRowContent) {
  47. sections.push({
  48. type: 'header',
  49. key: 'header',
  50. isSticky: stickyHeaderDates,
  51. chunks: [{
  52. key: 'main',
  53. elRef: this.headerElRef,
  54. tableClassName: 'fc-col-header',
  55. rowContent: headerRowContent,
  56. }],
  57. });
  58. }
  59. sections.push({
  60. type: 'body',
  61. key: 'body',
  62. liquid: true,
  63. chunks: [{
  64. key: 'main',
  65. content: bodyContent,
  66. }],
  67. });
  68. if (stickyFooterScrollbar) {
  69. sections.push({
  70. type: 'footer',
  71. key: 'footer',
  72. isSticky: true,
  73. chunks: [{
  74. key: 'main',
  75. content: renderScrollShim,
  76. }],
  77. });
  78. }
  79. return (createElement(ViewContainer, { elClasses: ['fc-daygrid'], viewSpec: context.viewSpec },
  80. createElement(ScrollGrid, { liquid: !props.isHeightAuto && !props.forPrint, forPrint: props.forPrint, collapsibleWidth: props.forPrint, colGroups: [{ cols: [{ span: colCnt, minWidth: dayMinWidth }] }], sections: sections })));
  81. }
  82. }
  83. function splitSegsByRow(segs, rowCnt) {
  84. let byRow = [];
  85. for (let i = 0; i < rowCnt; i += 1) {
  86. byRow[i] = [];
  87. }
  88. for (let seg of segs) {
  89. byRow[seg.row].push(seg);
  90. }
  91. return byRow;
  92. }
  93. function splitSegsByFirstCol(segs, colCnt) {
  94. let byCol = [];
  95. for (let i = 0; i < colCnt; i += 1) {
  96. byCol[i] = [];
  97. }
  98. for (let seg of segs) {
  99. byCol[seg.firstCol].push(seg);
  100. }
  101. return byCol;
  102. }
  103. function splitInteractionByRow(ui, rowCnt) {
  104. let byRow = [];
  105. if (!ui) {
  106. for (let i = 0; i < rowCnt; i += 1) {
  107. byRow[i] = null;
  108. }
  109. }
  110. else {
  111. for (let i = 0; i < rowCnt; i += 1) {
  112. byRow[i] = {
  113. affectedInstances: ui.affectedInstances,
  114. isEvent: ui.isEvent,
  115. segs: [],
  116. };
  117. }
  118. for (let seg of ui.segs) {
  119. byRow[seg.row].segs.push(seg);
  120. }
  121. }
  122. return byRow;
  123. }
  124. const DEFAULT_TABLE_EVENT_TIME_FORMAT = createFormatter({
  125. hour: 'numeric',
  126. minute: '2-digit',
  127. omitZeroMinute: true,
  128. meridiem: 'narrow',
  129. });
  130. function hasListItemDisplay(seg) {
  131. let { display } = seg.eventRange.ui;
  132. return display === 'list-item' || (display === 'auto' &&
  133. !seg.eventRange.def.allDay &&
  134. seg.firstCol === seg.lastCol && // can't be multi-day
  135. seg.isStart && // "
  136. seg.isEnd // "
  137. );
  138. }
  139. class TableBlockEvent extends BaseComponent {
  140. render() {
  141. let { props } = this;
  142. return (createElement(StandardEvent, Object.assign({}, props, { elClasses: ['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 })));
  143. }
  144. }
  145. class TableListItemEvent extends BaseComponent {
  146. render() {
  147. let { props, context } = this;
  148. let { options } = context;
  149. let { seg } = props;
  150. let timeFormat = options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT;
  151. let timeText = buildSegTimeText(seg, timeFormat, context, true, props.defaultDisplayEventEnd);
  152. return (createElement(EventContainer, Object.assign({}, props, { elTag: "a", elClasses: ['fc-daygrid-event', 'fc-daygrid-dot-event'], elAttrs: getSegAnchorAttrs(props.seg, context), defaultGenerator: renderInnerContent, timeText: timeText, isResizing: false, isDateSelecting: false })));
  153. }
  154. }
  155. function renderInnerContent(renderProps) {
  156. return (createElement(Fragment, null,
  157. createElement("div", { className: "fc-daygrid-event-dot", style: { borderColor: renderProps.borderColor || renderProps.backgroundColor } }),
  158. renderProps.timeText && (createElement("div", { className: "fc-event-time" }, renderProps.timeText)),
  159. createElement("div", { className: "fc-event-title" }, renderProps.event.title || createElement(Fragment, null, "\u00A0"))));
  160. }
  161. class TableCellMoreLink extends BaseComponent {
  162. constructor() {
  163. super(...arguments);
  164. this.compileSegs = memoize(compileSegs);
  165. }
  166. render() {
  167. let { props } = this;
  168. let { allSegs, invisibleSegs } = this.compileSegs(props.singlePlacements);
  169. return (createElement(MoreLinkContainer, { elClasses: ['fc-daygrid-more-link'], 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: () => {
  170. let isForcedInvisible = (props.eventDrag ? props.eventDrag.affectedInstances : null) ||
  171. (props.eventResize ? props.eventResize.affectedInstances : null) ||
  172. {};
  173. return (createElement(Fragment, null, allSegs.map((seg) => {
  174. let instanceId = seg.eventRange.instance.instanceId;
  175. return (createElement("div", { className: "fc-daygrid-event-harness", key: instanceId, style: {
  176. visibility: isForcedInvisible[instanceId] ? 'hidden' : '',
  177. } }, hasListItemDisplay(seg) ? (createElement(TableListItemEvent, Object.assign({ seg: seg, isDragging: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange)))) : (createElement(TableBlockEvent, Object.assign({ seg: seg, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection, defaultDisplayEventEnd: false }, getSegMeta(seg, props.todayRange))))));
  178. })));
  179. } }));
  180. }
  181. }
  182. function compileSegs(singlePlacements) {
  183. let allSegs = [];
  184. let invisibleSegs = [];
  185. for (let placement of singlePlacements) {
  186. allSegs.push(placement.seg);
  187. if (!placement.isVisible) {
  188. invisibleSegs.push(placement.seg);
  189. }
  190. }
  191. return { allSegs, invisibleSegs };
  192. }
  193. const DEFAULT_WEEK_NUM_FORMAT = createFormatter({ week: 'narrow' });
  194. class TableCell extends DateComponent {
  195. constructor() {
  196. super(...arguments);
  197. this.rootElRef = createRef();
  198. this.state = {
  199. dayNumberId: getUniqueDomId(),
  200. };
  201. this.handleRootEl = (el) => {
  202. setRef(this.rootElRef, el);
  203. setRef(this.props.elRef, el);
  204. };
  205. }
  206. render() {
  207. let { context, props, state, rootElRef } = this;
  208. let { options, dateEnv } = context;
  209. let { date, dateProfile } = props;
  210. // TODO: memoize this?
  211. const isMonthStart = props.showDayNumber &&
  212. shouldDisplayMonthStart(date, dateProfile.currentRange, dateEnv);
  213. return (createElement(DayCellContainer, { elTag: "td", elRef: this.handleRootEl, elClasses: [
  214. 'fc-daygrid-day',
  215. ...(props.extraClassNames || []),
  216. ], elAttrs: Object.assign(Object.assign(Object.assign({}, props.extraDataAttrs), (props.showDayNumber ? { 'aria-labelledby': state.dayNumberId } : {})), { role: 'gridcell' }), defaultGenerator: renderTopInner, date: date, dateProfile: dateProfile, todayRange: props.todayRange, showDayNumber: props.showDayNumber, isMonthStart: isMonthStart, extraRenderProps: props.extraRenderProps }, (InnerContent, renderProps) => (createElement("div", { ref: props.innerElRef, className: "fc-daygrid-day-frame fc-scrollgrid-sync-inner", style: { minHeight: props.minHeight } },
  217. props.showWeekNumber && (createElement(WeekNumberContainer, { elTag: "a", elClasses: ['fc-daygrid-week-number'], elAttrs: buildNavLinkAttrs(context, date, 'week'), date: date, defaultFormat: DEFAULT_WEEK_NUM_FORMAT })),
  218. !renderProps.isDisabled &&
  219. (props.showDayNumber || hasCustomDayCellContent(options) || props.forceDayTop) ? (createElement("div", { className: "fc-daygrid-day-top" },
  220. createElement(InnerContent, { elTag: "a", elClasses: [
  221. 'fc-daygrid-day-number',
  222. isMonthStart && 'fc-daygrid-month-start',
  223. ], elAttrs: Object.assign(Object.assign({}, buildNavLinkAttrs(context, date)), { id: state.dayNumberId }) }))) : props.showDayNumber ? (
  224. // for creating correct amount of space (see issue #7162)
  225. createElement("div", { className: "fc-daygrid-day-top", style: { visibility: 'hidden' } },
  226. createElement("a", { className: "fc-daygrid-day-number" }, "\u00A0"))) : undefined,
  227. createElement("div", { className: "fc-daygrid-day-events", ref: props.fgContentElRef },
  228. props.fgContent,
  229. createElement("div", { className: "fc-daygrid-day-bottom", style: { marginTop: props.moreMarginTop } },
  230. 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 }))),
  231. createElement("div", { className: "fc-daygrid-day-bg" }, props.bgContent)))));
  232. }
  233. }
  234. function renderTopInner(props) {
  235. return props.dayNumberText || createElement(Fragment, null, "\u00A0");
  236. }
  237. function shouldDisplayMonthStart(date, currentRange, dateEnv) {
  238. const { start: currentStart, end: currentEnd } = currentRange;
  239. const currentEndIncl = addMs(currentEnd, -1);
  240. const currentFirstYear = dateEnv.getYear(currentStart);
  241. const currentFirstMonth = dateEnv.getMonth(currentStart);
  242. const currentLastYear = dateEnv.getYear(currentEndIncl);
  243. const currentLastMonth = dateEnv.getMonth(currentEndIncl);
  244. // spans more than one month?
  245. return !(currentFirstYear === currentLastYear && currentFirstMonth === currentLastMonth) &&
  246. Boolean(
  247. // first date in current view?
  248. date.valueOf() === currentStart.valueOf() ||
  249. // a month-start that's within the current range?
  250. (dateEnv.getDay(date) === 1 && date.valueOf() < currentEnd.valueOf()));
  251. }
  252. function generateSegKey(seg) {
  253. return seg.eventRange.instance.instanceId + ':' + seg.firstCol;
  254. }
  255. function generateSegUid(seg) {
  256. return generateSegKey(seg) + ':' + seg.lastCol;
  257. }
  258. function computeFgSegPlacement(segs, // assumed already sorted
  259. dayMaxEvents, dayMaxEventRows, strictOrder, segHeights, maxContentHeight, cells) {
  260. let hierarchy = new DayGridSegHierarchy((segEntry) => {
  261. // TODO: more DRY with generateSegUid
  262. let segUid = segs[segEntry.index].eventRange.instance.instanceId +
  263. ':' + segEntry.span.start +
  264. ':' + (segEntry.span.end - 1);
  265. // if no thickness known, assume 1 (if 0, so small it always fits)
  266. return segHeights[segUid] || 1;
  267. });
  268. hierarchy.allowReslicing = true;
  269. hierarchy.strictOrder = strictOrder;
  270. if (dayMaxEvents === true || dayMaxEventRows === true) {
  271. hierarchy.maxCoord = maxContentHeight;
  272. hierarchy.hiddenConsumes = true;
  273. }
  274. else if (typeof dayMaxEvents === 'number') {
  275. hierarchy.maxStackCnt = dayMaxEvents;
  276. }
  277. else if (typeof dayMaxEventRows === 'number') {
  278. hierarchy.maxStackCnt = dayMaxEventRows;
  279. hierarchy.hiddenConsumes = true;
  280. }
  281. // create segInputs only for segs with known heights
  282. let segInputs = [];
  283. let unknownHeightSegs = [];
  284. for (let i = 0; i < segs.length; i += 1) {
  285. let seg = segs[i];
  286. let segUid = generateSegUid(seg);
  287. let eventHeight = segHeights[segUid];
  288. if (eventHeight != null) {
  289. segInputs.push({
  290. index: i,
  291. span: {
  292. start: seg.firstCol,
  293. end: seg.lastCol + 1,
  294. },
  295. });
  296. }
  297. else {
  298. unknownHeightSegs.push(seg);
  299. }
  300. }
  301. let hiddenEntries = hierarchy.addSegs(segInputs);
  302. let segRects = hierarchy.toRects();
  303. let { singleColPlacements, multiColPlacements, leftoverMargins } = placeRects(segRects, segs, cells);
  304. let moreCnts = [];
  305. let moreMarginTops = [];
  306. // add segs with unknown heights
  307. for (let seg of unknownHeightSegs) {
  308. multiColPlacements[seg.firstCol].push({
  309. seg,
  310. isVisible: false,
  311. isAbsolute: true,
  312. absoluteTop: 0,
  313. marginTop: 0,
  314. });
  315. for (let col = seg.firstCol; col <= seg.lastCol; col += 1) {
  316. singleColPlacements[col].push({
  317. seg: resliceSeg(seg, col, col + 1, cells),
  318. isVisible: false,
  319. isAbsolute: false,
  320. absoluteTop: 0,
  321. marginTop: 0,
  322. });
  323. }
  324. }
  325. // add the hidden entries
  326. for (let col = 0; col < cells.length; col += 1) {
  327. moreCnts.push(0);
  328. }
  329. for (let hiddenEntry of hiddenEntries) {
  330. let seg = segs[hiddenEntry.index];
  331. let hiddenSpan = hiddenEntry.span;
  332. multiColPlacements[hiddenSpan.start].push({
  333. seg: resliceSeg(seg, hiddenSpan.start, hiddenSpan.end, cells),
  334. isVisible: false,
  335. isAbsolute: true,
  336. absoluteTop: 0,
  337. marginTop: 0,
  338. });
  339. for (let col = hiddenSpan.start; col < hiddenSpan.end; col += 1) {
  340. moreCnts[col] += 1;
  341. singleColPlacements[col].push({
  342. seg: resliceSeg(seg, col, col + 1, cells),
  343. isVisible: false,
  344. isAbsolute: false,
  345. absoluteTop: 0,
  346. marginTop: 0,
  347. });
  348. }
  349. }
  350. // deal with leftover margins
  351. for (let col = 0; col < cells.length; col += 1) {
  352. moreMarginTops.push(leftoverMargins[col]);
  353. }
  354. return { singleColPlacements, multiColPlacements, moreCnts, moreMarginTops };
  355. }
  356. // rects ordered by top coord, then left
  357. function placeRects(allRects, segs, cells) {
  358. let rectsByEachCol = groupRectsByEachCol(allRects, cells.length);
  359. let singleColPlacements = [];
  360. let multiColPlacements = [];
  361. let leftoverMargins = [];
  362. for (let col = 0; col < cells.length; col += 1) {
  363. let rects = rectsByEachCol[col];
  364. // compute all static segs in singlePlacements
  365. let singlePlacements = [];
  366. let currentHeight = 0;
  367. let currentMarginTop = 0;
  368. for (let rect of rects) {
  369. let seg = segs[rect.index];
  370. singlePlacements.push({
  371. seg: resliceSeg(seg, col, col + 1, cells),
  372. isVisible: true,
  373. isAbsolute: false,
  374. absoluteTop: rect.levelCoord,
  375. marginTop: rect.levelCoord - currentHeight,
  376. });
  377. currentHeight = rect.levelCoord + rect.thickness;
  378. }
  379. // compute mixed static/absolute segs in multiPlacements
  380. let multiPlacements = [];
  381. currentHeight = 0;
  382. currentMarginTop = 0;
  383. for (let rect of rects) {
  384. let seg = segs[rect.index];
  385. let isAbsolute = rect.span.end - rect.span.start > 1; // multi-column?
  386. let isFirstCol = rect.span.start === col;
  387. currentMarginTop += rect.levelCoord - currentHeight; // amount of space since bottom of previous seg
  388. currentHeight = rect.levelCoord + rect.thickness; // height will now be bottom of current seg
  389. if (isAbsolute) {
  390. currentMarginTop += rect.thickness;
  391. if (isFirstCol) {
  392. multiPlacements.push({
  393. seg: resliceSeg(seg, rect.span.start, rect.span.end, cells),
  394. isVisible: true,
  395. isAbsolute: true,
  396. absoluteTop: rect.levelCoord,
  397. marginTop: 0,
  398. });
  399. }
  400. }
  401. else if (isFirstCol) {
  402. multiPlacements.push({
  403. seg: resliceSeg(seg, rect.span.start, rect.span.end, cells),
  404. isVisible: true,
  405. isAbsolute: false,
  406. absoluteTop: rect.levelCoord,
  407. marginTop: currentMarginTop, // claim the margin
  408. });
  409. currentMarginTop = 0;
  410. }
  411. }
  412. singleColPlacements.push(singlePlacements);
  413. multiColPlacements.push(multiPlacements);
  414. leftoverMargins.push(currentMarginTop);
  415. }
  416. return { singleColPlacements, multiColPlacements, leftoverMargins };
  417. }
  418. function groupRectsByEachCol(rects, colCnt) {
  419. let rectsByEachCol = [];
  420. for (let col = 0; col < colCnt; col += 1) {
  421. rectsByEachCol.push([]);
  422. }
  423. for (let rect of rects) {
  424. for (let col = rect.span.start; col < rect.span.end; col += 1) {
  425. rectsByEachCol[col].push(rect);
  426. }
  427. }
  428. return rectsByEachCol;
  429. }
  430. function resliceSeg(seg, spanStart, spanEnd, cells) {
  431. if (seg.firstCol === spanStart && seg.lastCol === spanEnd - 1) {
  432. return seg;
  433. }
  434. let eventRange = seg.eventRange;
  435. let origRange = eventRange.range;
  436. let slicedRange = intersectRanges(origRange, {
  437. start: cells[spanStart].date,
  438. end: addDays(cells[spanEnd - 1].date, 1),
  439. });
  440. return Object.assign(Object.assign({}, seg), { firstCol: spanStart, lastCol: spanEnd - 1, eventRange: {
  441. def: eventRange.def,
  442. ui: Object.assign(Object.assign({}, eventRange.ui), { durationEditable: false }),
  443. instance: eventRange.instance,
  444. range: slicedRange,
  445. }, isStart: seg.isStart && slicedRange.start.valueOf() === origRange.start.valueOf(), isEnd: seg.isEnd && slicedRange.end.valueOf() === origRange.end.valueOf() });
  446. }
  447. class DayGridSegHierarchy extends SegHierarchy {
  448. constructor() {
  449. super(...arguments);
  450. // config
  451. this.hiddenConsumes = false;
  452. // allows us to keep hidden entries in the hierarchy so they take up space
  453. this.forceHidden = {};
  454. }
  455. addSegs(segInputs) {
  456. const hiddenSegs = super.addSegs(segInputs);
  457. const { entriesByLevel } = this;
  458. const excludeHidden = (entry) => !this.forceHidden[buildEntryKey(entry)];
  459. // remove the forced-hidden segs
  460. for (let level = 0; level < entriesByLevel.length; level += 1) {
  461. entriesByLevel[level] = entriesByLevel[level].filter(excludeHidden);
  462. }
  463. return hiddenSegs;
  464. }
  465. handleInvalidInsertion(insertion, entry, hiddenEntries) {
  466. const { entriesByLevel, forceHidden } = this;
  467. const { touchingEntry, touchingLevel, touchingLateral } = insertion;
  468. // the entry that the new insertion is touching must be hidden
  469. if (this.hiddenConsumes && touchingEntry) {
  470. const touchingEntryId = buildEntryKey(touchingEntry);
  471. if (!forceHidden[touchingEntryId]) {
  472. if (this.allowReslicing) {
  473. // split up the touchingEntry, reinsert it
  474. const hiddenEntry = Object.assign(Object.assign({}, touchingEntry), { span: intersectSpans(touchingEntry.span, entry.span) });
  475. // reinsert the area that turned into a "more" link (so no other entries try to
  476. // occupy the space) but mark it forced-hidden
  477. const hiddenEntryId = buildEntryKey(hiddenEntry);
  478. forceHidden[hiddenEntryId] = true;
  479. entriesByLevel[touchingLevel][touchingLateral] = hiddenEntry;
  480. hiddenEntries.push(hiddenEntry);
  481. this.splitEntry(touchingEntry, entry, hiddenEntries);
  482. }
  483. else {
  484. forceHidden[touchingEntryId] = true;
  485. hiddenEntries.push(touchingEntry);
  486. }
  487. }
  488. }
  489. // will try to reslice...
  490. super.handleInvalidInsertion(insertion, entry, hiddenEntries);
  491. }
  492. }
  493. class TableRow extends DateComponent {
  494. constructor() {
  495. super(...arguments);
  496. this.cellElRefs = new RefMap(); // the <td>
  497. this.frameElRefs = new RefMap(); // the fc-daygrid-day-frame
  498. this.fgElRefs = new RefMap(); // the fc-daygrid-day-events
  499. this.segHarnessRefs = new RefMap(); // indexed by "instanceId:firstCol"
  500. this.rootElRef = createRef();
  501. this.state = {
  502. framePositions: null,
  503. maxContentHeight: null,
  504. segHeights: {},
  505. };
  506. this.handleResize = (isForced) => {
  507. if (isForced) {
  508. this.updateSizing(true); // isExternal=true
  509. }
  510. };
  511. }
  512. render() {
  513. let { props, state, context } = this;
  514. let { options } = context;
  515. let colCnt = props.cells.length;
  516. let businessHoursByCol = splitSegsByFirstCol(props.businessHourSegs, colCnt);
  517. let bgEventSegsByCol = splitSegsByFirstCol(props.bgEventSegs, colCnt);
  518. let highlightSegsByCol = splitSegsByFirstCol(this.getHighlightSegs(), colCnt);
  519. let mirrorSegsByCol = splitSegsByFirstCol(this.getMirrorSegs(), colCnt);
  520. let { singleColPlacements, multiColPlacements, moreCnts, moreMarginTops } = computeFgSegPlacement(sortEventSegs(props.fgEventSegs, options.eventOrder), props.dayMaxEvents, props.dayMaxEventRows, options.eventOrderStrict, state.segHeights, state.maxContentHeight, props.cells);
  521. let isForcedInvisible = // TODO: messy way to compute this
  522. (props.eventDrag && props.eventDrag.affectedInstances) ||
  523. (props.eventResize && props.eventResize.affectedInstances) ||
  524. {};
  525. return (createElement("tr", { ref: this.rootElRef, role: "row" },
  526. props.renderIntro && props.renderIntro(),
  527. props.cells.map((cell, col) => {
  528. let normalFgNodes = this.renderFgSegs(col, props.forPrint ? singleColPlacements[col] : multiColPlacements[col], props.todayRange, isForcedInvisible);
  529. let mirrorFgNodes = this.renderFgSegs(col, buildMirrorPlacements(mirrorSegsByCol[col], multiColPlacements), props.todayRange, {}, Boolean(props.eventDrag), Boolean(props.eventResize), false);
  530. return (createElement(TableCell, { key: cell.key, elRef: this.cellElRefs.createRef(cell.key), innerElRef: this.frameElRefs.createRef(cell.key) /* FF <td> 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, extraRenderProps: cell.extraRenderProps, 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
  531. createElement(Fragment, null,
  532. createElement(Fragment, null, normalFgNodes),
  533. createElement(Fragment, null, mirrorFgNodes))), bgContent: ( // Fragment scopes the keys
  534. createElement(Fragment, null,
  535. this.renderFillSegs(highlightSegsByCol[col], 'highlight'),
  536. this.renderFillSegs(businessHoursByCol[col], 'non-business'),
  537. this.renderFillSegs(bgEventSegsByCol[col], 'bg-event'))), minHeight: props.cellMinHeight }));
  538. })));
  539. }
  540. componentDidMount() {
  541. this.updateSizing(true);
  542. this.context.addResizeHandler(this.handleResize);
  543. }
  544. componentDidUpdate(prevProps, prevState) {
  545. let currentProps = this.props;
  546. this.updateSizing(!isPropsEqual(prevProps, currentProps));
  547. }
  548. componentWillUnmount() {
  549. this.context.removeResizeHandler(this.handleResize);
  550. }
  551. getHighlightSegs() {
  552. let { props } = this;
  553. if (props.eventDrag && props.eventDrag.segs.length) { // messy check
  554. return props.eventDrag.segs;
  555. }
  556. if (props.eventResize && props.eventResize.segs.length) { // messy check
  557. return props.eventResize.segs;
  558. }
  559. return props.dateSelectionSegs;
  560. }
  561. getMirrorSegs() {
  562. let { props } = this;
  563. if (props.eventResize && props.eventResize.segs.length) { // messy check
  564. return props.eventResize.segs;
  565. }
  566. return [];
  567. }
  568. renderFgSegs(col, segPlacements, todayRange, isForcedInvisible, isDragging, isResizing, isDateSelecting) {
  569. let { context } = this;
  570. let { eventSelection } = this.props;
  571. let { framePositions } = this.state;
  572. let defaultDisplayEventEnd = this.props.cells.length === 1; // colCnt === 1
  573. let isMirror = isDragging || isResizing || isDateSelecting;
  574. let nodes = [];
  575. if (framePositions) {
  576. for (let placement of segPlacements) {
  577. let { seg } = placement;
  578. let { instanceId } = seg.eventRange.instance;
  579. let isVisible = placement.isVisible && !isForcedInvisible[instanceId];
  580. let isAbsolute = placement.isAbsolute;
  581. let left = '';
  582. let right = '';
  583. if (isAbsolute) {
  584. if (context.isRtl) {
  585. right = 0;
  586. left = framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol];
  587. }
  588. else {
  589. left = 0;
  590. right = framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol];
  591. }
  592. }
  593. /*
  594. known bug: events that are force to be list-item but span multiple days still take up space in later columns
  595. todo: in print view, for multi-day events, don't display title within non-start/end segs
  596. */
  597. nodes.push(createElement("div", { className: 'fc-daygrid-event-harness' + (isAbsolute ? ' fc-daygrid-event-harness-abs' : ''), key: generateSegKey(seg), ref: isMirror ? null : this.segHarnessRefs.createRef(generateSegUid(seg)), style: {
  598. visibility: isVisible ? '' : 'hidden',
  599. marginTop: isAbsolute ? '' : placement.marginTop,
  600. top: isAbsolute ? placement.absoluteTop : '',
  601. left,
  602. right,
  603. } }, hasListItemDisplay(seg) ? (createElement(TableListItemEvent, Object.assign({ seg: seg, isDragging: isDragging, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange)))) : (createElement(TableBlockEvent, Object.assign({ seg: seg, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === eventSelection, defaultDisplayEventEnd: defaultDisplayEventEnd }, getSegMeta(seg, todayRange))))));
  604. }
  605. }
  606. return nodes;
  607. }
  608. renderFillSegs(segs, fillType) {
  609. let { isRtl } = this.context;
  610. let { todayRange } = this.props;
  611. let { framePositions } = this.state;
  612. let nodes = [];
  613. if (framePositions) {
  614. for (let seg of segs) {
  615. let leftRightCss = isRtl ? {
  616. right: 0,
  617. left: framePositions.lefts[seg.lastCol] - framePositions.lefts[seg.firstCol],
  618. } : {
  619. left: 0,
  620. right: framePositions.rights[seg.firstCol] - framePositions.rights[seg.lastCol],
  621. };
  622. nodes.push(createElement("div", { key: buildEventRangeKey(seg.eventRange), className: "fc-daygrid-bg-harness", style: leftRightCss }, fillType === 'bg-event' ?
  623. createElement(BgEvent, Object.assign({ seg: seg }, getSegMeta(seg, todayRange))) :
  624. renderFill(fillType)));
  625. }
  626. }
  627. return createElement(Fragment, {}, ...nodes);
  628. }
  629. updateSizing(isExternalSizingChange) {
  630. let { props, state, frameElRefs } = this;
  631. if (!props.forPrint &&
  632. props.clientWidth !== null // positioning ready?
  633. ) {
  634. if (isExternalSizingChange) {
  635. let frameEls = props.cells.map((cell) => frameElRefs.currentMap[cell.key]);
  636. if (frameEls.length) {
  637. let originEl = this.rootElRef.current;
  638. let newPositionCache = new PositionCache(originEl, frameEls, true, // isHorizontal
  639. false);
  640. if (!state.framePositions || !state.framePositions.similarTo(newPositionCache)) {
  641. this.setState({
  642. framePositions: new PositionCache(originEl, frameEls, true, // isHorizontal
  643. false),
  644. });
  645. }
  646. }
  647. }
  648. const oldSegHeights = this.state.segHeights;
  649. const newSegHeights = this.querySegHeights();
  650. const limitByContentHeight = props.dayMaxEvents === true || props.dayMaxEventRows === true;
  651. this.safeSetState({
  652. // HACK to prevent oscillations of events being shown/hidden from max-event-rows
  653. // Essentially, once you compute an element's height, never null-out.
  654. // TODO: always display all events, as visibility:hidden?
  655. segHeights: Object.assign(Object.assign({}, oldSegHeights), newSegHeights),
  656. maxContentHeight: limitByContentHeight ? this.computeMaxContentHeight() : null,
  657. });
  658. }
  659. }
  660. querySegHeights() {
  661. let segElMap = this.segHarnessRefs.currentMap;
  662. let segHeights = {};
  663. // get the max height amongst instance segs
  664. for (let segUid in segElMap) {
  665. let height = Math.round(segElMap[segUid].getBoundingClientRect().height);
  666. segHeights[segUid] = Math.max(segHeights[segUid] || 0, height);
  667. }
  668. return segHeights;
  669. }
  670. computeMaxContentHeight() {
  671. let firstKey = this.props.cells[0].key;
  672. let cellEl = this.cellElRefs.currentMap[firstKey];
  673. let fcContainerEl = this.fgElRefs.currentMap[firstKey];
  674. return cellEl.getBoundingClientRect().bottom - fcContainerEl.getBoundingClientRect().top;
  675. }
  676. getCellEls() {
  677. let elMap = this.cellElRefs.currentMap;
  678. return this.props.cells.map((cell) => elMap[cell.key]);
  679. }
  680. }
  681. TableRow.addStateEquality({
  682. segHeights: isPropsEqual,
  683. });
  684. function buildMirrorPlacements(mirrorSegs, colPlacements) {
  685. if (!mirrorSegs.length) {
  686. return [];
  687. }
  688. let topsByInstanceId = buildAbsoluteTopHash(colPlacements); // TODO: cache this at first render?
  689. return mirrorSegs.map((seg) => ({
  690. seg,
  691. isVisible: true,
  692. isAbsolute: true,
  693. absoluteTop: topsByInstanceId[seg.eventRange.instance.instanceId],
  694. marginTop: 0,
  695. }));
  696. }
  697. function buildAbsoluteTopHash(colPlacements) {
  698. let topsByInstanceId = {};
  699. for (let placements of colPlacements) {
  700. for (let placement of placements) {
  701. topsByInstanceId[placement.seg.eventRange.instance.instanceId] = placement.absoluteTop;
  702. }
  703. }
  704. return topsByInstanceId;
  705. }
  706. class TableRows extends DateComponent {
  707. constructor() {
  708. super(...arguments);
  709. this.splitBusinessHourSegs = memoize(splitSegsByRow);
  710. this.splitBgEventSegs = memoize(splitSegsByRow);
  711. this.splitFgEventSegs = memoize(splitSegsByRow);
  712. this.splitDateSelectionSegs = memoize(splitSegsByRow);
  713. this.splitEventDrag = memoize(splitInteractionByRow);
  714. this.splitEventResize = memoize(splitInteractionByRow);
  715. this.rowRefs = new RefMap();
  716. }
  717. render() {
  718. let { props, context } = this;
  719. let rowCnt = props.cells.length;
  720. let businessHourSegsByRow = this.splitBusinessHourSegs(props.businessHourSegs, rowCnt);
  721. let bgEventSegsByRow = this.splitBgEventSegs(props.bgEventSegs, rowCnt);
  722. let fgEventSegsByRow = this.splitFgEventSegs(props.fgEventSegs, rowCnt);
  723. let dateSelectionSegsByRow = this.splitDateSelectionSegs(props.dateSelectionSegs, rowCnt);
  724. let eventDragByRow = this.splitEventDrag(props.eventDrag, rowCnt);
  725. let eventResizeByRow = this.splitEventResize(props.eventResize, rowCnt);
  726. // for DayGrid view with many rows, force a min-height on cells so doesn't appear squished
  727. // choose 7 because a month view will have max 6 rows
  728. let cellMinHeight = (rowCnt >= 7 && props.clientWidth) ?
  729. props.clientWidth / context.options.aspectRatio / 6 :
  730. null;
  731. return (createElement(NowTimer, { unit: "day" }, (nowDate, todayRange) => (createElement(Fragment, null, props.cells.map((cells, row) => (createElement(TableRow, { ref: this.rowRefs.createRef(row), key: cells.length
  732. ? cells[0].date.toISOString() /* best? or put key on cell? or use diff formatter? */
  733. : row // in case there are no cells (like when resource view is loading)
  734. , showDayNumbers: rowCnt > 1, showWeekNumbers: props.showWeekNumbers, todayRange: todayRange, dateProfile: props.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: props.dayMaxEvents, dayMaxEventRows: props.dayMaxEventRows, clientWidth: props.clientWidth, clientHeight: props.clientHeight, cellMinHeight: cellMinHeight, forPrint: props.forPrint })))))));
  735. }
  736. componentDidMount() {
  737. this.registerInteractiveComponent();
  738. }
  739. componentDidUpdate() {
  740. // for if started with zero cells
  741. this.registerInteractiveComponent();
  742. }
  743. registerInteractiveComponent() {
  744. if (!this.rootEl) {
  745. // HACK: need a daygrid wrapper parent to do positioning
  746. // NOTE: a daygrid resource view w/o resources can have zero cells
  747. const firstCellEl = this.rowRefs.currentMap[0].getCellEls()[0];
  748. const rootEl = firstCellEl ? firstCellEl.closest('.fc-daygrid-body') : null;
  749. if (rootEl) {
  750. this.rootEl = rootEl;
  751. this.context.registerInteractiveComponent(this, {
  752. el: rootEl,
  753. isHitComboAllowed: this.props.isHitComboAllowed,
  754. });
  755. }
  756. }
  757. }
  758. componentWillUnmount() {
  759. if (this.rootEl) {
  760. this.context.unregisterInteractiveComponent(this);
  761. this.rootEl = null;
  762. }
  763. }
  764. // Hit System
  765. // ----------------------------------------------------------------------------------------------------
  766. prepareHits() {
  767. this.rowPositions = new PositionCache(this.rootEl, this.rowRefs.collect().map((rowObj) => rowObj.getCellEls()[0]), // first cell el in each row. TODO: not optimal
  768. false, true);
  769. this.colPositions = new PositionCache(this.rootEl, this.rowRefs.currentMap[0].getCellEls(), // cell els in first row
  770. true, // horizontal
  771. false);
  772. }
  773. queryHit(positionLeft, positionTop) {
  774. let { colPositions, rowPositions } = this;
  775. let col = colPositions.leftToIndex(positionLeft);
  776. let row = rowPositions.topToIndex(positionTop);
  777. if (row != null && col != null) {
  778. let cell = this.props.cells[row][col];
  779. return {
  780. dateProfile: this.props.dateProfile,
  781. dateSpan: Object.assign({ range: this.getCellRange(row, col), allDay: true }, cell.extraDateSpan),
  782. dayEl: this.getCellEl(row, col),
  783. rect: {
  784. left: colPositions.lefts[col],
  785. right: colPositions.rights[col],
  786. top: rowPositions.tops[row],
  787. bottom: rowPositions.bottoms[row],
  788. },
  789. layer: 0,
  790. };
  791. }
  792. return null;
  793. }
  794. getCellEl(row, col) {
  795. return this.rowRefs.currentMap[row].getCellEls()[col]; // TODO: not optimal
  796. }
  797. getCellRange(row, col) {
  798. let start = this.props.cells[row][col].date;
  799. let end = addDays(start, 1);
  800. return { start, end };
  801. }
  802. }
  803. function isSegAllDay(seg) {
  804. return seg.eventRange.def.allDay;
  805. }
  806. class Table extends DateComponent {
  807. constructor() {
  808. super(...arguments);
  809. this.elRef = createRef();
  810. this.needsScrollReset = false;
  811. }
  812. render() {
  813. let { props } = this;
  814. let { dayMaxEventRows, dayMaxEvents, expandRows } = props;
  815. let limitViaBalanced = dayMaxEvents === true || dayMaxEventRows === true;
  816. // if rows can't expand to fill fixed height, can't do balanced-height event limit
  817. // TODO: best place to normalize these options?
  818. if (limitViaBalanced && !expandRows) {
  819. limitViaBalanced = false;
  820. dayMaxEventRows = null;
  821. dayMaxEvents = null;
  822. }
  823. let classNames = [
  824. 'fc-daygrid-body',
  825. limitViaBalanced ? 'fc-daygrid-body-balanced' : 'fc-daygrid-body-unbalanced',
  826. expandRows ? '' : 'fc-daygrid-body-natural', // will height of one row depend on the others?
  827. ];
  828. return (createElement("div", { ref: this.elRef, className: classNames.join(' '), style: {
  829. // these props are important to give this wrapper correct dimensions for interactions
  830. // TODO: if we set it here, can we avoid giving to inner tables?
  831. width: props.clientWidth,
  832. minWidth: props.tableMinWidth,
  833. } },
  834. createElement("table", { role: "presentation", className: "fc-scrollgrid-sync-table", style: {
  835. width: props.clientWidth,
  836. minWidth: props.tableMinWidth,
  837. height: expandRows ? props.clientHeight : '',
  838. } },
  839. props.colGroupNode,
  840. createElement("tbody", { role: "presentation" },
  841. createElement(TableRows, { dateProfile: props.dateProfile, cells: props.cells, renderRowIntro: props.renderRowIntro, showWeekNumbers: props.showWeekNumbers, clientWidth: props.clientWidth, clientHeight: props.clientHeight, businessHourSegs: props.businessHourSegs, bgEventSegs: props.bgEventSegs, fgEventSegs: props.fgEventSegs, dateSelectionSegs: props.dateSelectionSegs, eventSelection: props.eventSelection, eventDrag: props.eventDrag, eventResize: props.eventResize, dayMaxEvents: dayMaxEvents, dayMaxEventRows: dayMaxEventRows, forPrint: props.forPrint, isHitComboAllowed: props.isHitComboAllowed })))));
  842. }
  843. componentDidMount() {
  844. this.requestScrollReset();
  845. }
  846. componentDidUpdate(prevProps) {
  847. if (prevProps.dateProfile !== this.props.dateProfile) {
  848. this.requestScrollReset();
  849. }
  850. else {
  851. this.flushScrollReset();
  852. }
  853. }
  854. requestScrollReset() {
  855. this.needsScrollReset = true;
  856. this.flushScrollReset();
  857. }
  858. flushScrollReset() {
  859. if (this.needsScrollReset &&
  860. this.props.clientWidth // sizes computed?
  861. ) {
  862. const subjectEl = getScrollSubjectEl(this.elRef.current, this.props.dateProfile);
  863. if (subjectEl) {
  864. const originEl = subjectEl.closest('.fc-daygrid-body');
  865. const scrollEl = originEl.closest('.fc-scroller');
  866. const scrollTop = subjectEl.getBoundingClientRect().top -
  867. originEl.getBoundingClientRect().top;
  868. scrollEl.scrollTop = scrollTop ? (scrollTop + 1) : 0; // overcome border
  869. }
  870. this.needsScrollReset = false;
  871. }
  872. }
  873. }
  874. function getScrollSubjectEl(containerEl, dateProfile) {
  875. let el;
  876. if (dateProfile.currentRangeUnit.match(/year|month/)) {
  877. el = containerEl.querySelector(`[data-date="${formatIsoMonthStr(dateProfile.currentDate)}-01"]`);
  878. // even if view is month-based, first-of-month might be hidden...
  879. }
  880. if (!el) {
  881. el = containerEl.querySelector(`[data-date="${formatDayString(dateProfile.currentDate)}"]`);
  882. // could still be hidden if an interior-view hidden day
  883. }
  884. return el;
  885. }
  886. class DayTableSlicer extends Slicer {
  887. constructor() {
  888. super(...arguments);
  889. this.forceDayIfListItem = true;
  890. }
  891. sliceRange(dateRange, dayTableModel) {
  892. return dayTableModel.sliceRange(dateRange);
  893. }
  894. }
  895. class DayTable extends DateComponent {
  896. constructor() {
  897. super(...arguments);
  898. this.slicer = new DayTableSlicer();
  899. this.tableRef = createRef();
  900. }
  901. render() {
  902. let { props, context } = this;
  903. return (createElement(Table, Object.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 })));
  904. }
  905. }
  906. class DayTableView extends TableView {
  907. constructor() {
  908. super(...arguments);
  909. this.buildDayTableModel = memoize(buildDayTableModel);
  910. this.headerRef = createRef();
  911. this.tableRef = createRef();
  912. // can't override any lifecycle methods from parent
  913. }
  914. render() {
  915. let { options, dateProfileGenerator } = this.context;
  916. let { props } = this;
  917. let dayTableModel = this.buildDayTableModel(props.dateProfile, dateProfileGenerator);
  918. let headerContent = options.dayHeaders && (createElement(DayHeader, { ref: this.headerRef, dateProfile: props.dateProfile, dates: dayTableModel.headerDates, datesRepDistinctDays: dayTableModel.rowCnt === 1 }));
  919. let bodyContent = (contentArg) => (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 }));
  920. return options.dayMinWidth
  921. ? this.renderHScrollLayout(headerContent, bodyContent, dayTableModel.colCnt, options.dayMinWidth)
  922. : this.renderSimpleLayout(headerContent, bodyContent);
  923. }
  924. }
  925. function buildDayTableModel(dateProfile, dateProfileGenerator) {
  926. let daySeries = new DaySeriesModel(dateProfile.renderRange, dateProfileGenerator);
  927. return new DayTableModel(daySeries, /year|month|week/.test(dateProfile.currentRangeUnit));
  928. }
  929. class TableDateProfileGenerator extends DateProfileGenerator {
  930. // Computes the date range that will be rendered
  931. buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay) {
  932. let renderRange = super.buildRenderRange(currentRange, currentRangeUnit, isRangeAllDay);
  933. let { props } = this;
  934. return buildDayTableRenderRange({
  935. currentRange: renderRange,
  936. snapToWeek: /^(year|month)$/.test(currentRangeUnit),
  937. fixedWeekCount: props.fixedWeekCount,
  938. dateEnv: props.dateEnv,
  939. });
  940. }
  941. }
  942. function buildDayTableRenderRange(props) {
  943. let { dateEnv, currentRange } = props;
  944. let { start, end } = currentRange;
  945. let endOfWeek;
  946. // year and month views should be aligned with weeks. this is already done for week
  947. if (props.snapToWeek) {
  948. start = dateEnv.startOfWeek(start);
  949. // make end-of-week if not already
  950. endOfWeek = dateEnv.startOfWeek(end);
  951. if (endOfWeek.valueOf() !== end.valueOf()) {
  952. end = addWeeks(endOfWeek, 1);
  953. }
  954. }
  955. // ensure 6 weeks
  956. if (props.fixedWeekCount) {
  957. // TODO: instead of these date-math gymnastics (for multimonth view),
  958. // compute dateprofiles of all months, then use start of first and end of last.
  959. let lastMonthRenderStart = dateEnv.startOfWeek(dateEnv.startOfMonth(addDays(currentRange.end, -1)));
  960. let rowCnt = Math.ceil(// could be partial weeks due to hiddenDays
  961. diffWeeks(lastMonthRenderStart, end));
  962. end = addWeeks(end, 6 - rowCnt);
  963. }
  964. return { start, end };
  965. }
  966. var css_248z = ":root{--fc-daygrid-event-dot-width:8px}.fc-daygrid-day-events:after,.fc-daygrid-day-events:before,.fc-daygrid-day-frame:after,.fc-daygrid-day-frame:before,.fc-daygrid-event-harness:after,.fc-daygrid-event-harness:before{clear:both;content:\"\";display:table}.fc .fc-daygrid-body{position:relative;z-index:1}.fc .fc-daygrid-day.fc-day-today{background-color:var(--fc-today-bg-color)}.fc .fc-daygrid-day-frame{min-height:100%;position:relative}.fc .fc-daygrid-day-top{display:flex;flex-direction:row-reverse}.fc .fc-day-other .fc-daygrid-day-top{opacity:.3}.fc .fc-daygrid-day-number{padding:4px;position:relative;z-index:4}.fc .fc-daygrid-month-start{font-size:1.1em;font-weight:700}.fc .fc-daygrid-day-events{margin-top:1px}.fc .fc-daygrid-body-balanced .fc-daygrid-day-events{left:0;position:absolute;right:0}.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{min-height:2em;position:relative}.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin-bottom:1em}.fc .fc-daygrid-event-harness{position:relative}.fc .fc-daygrid-event-harness-abs{left:0;position:absolute;right:0;top:0}.fc .fc-daygrid-bg-harness{bottom:0;position:absolute;top:0}.fc .fc-daygrid-day-bg .fc-non-business{z-index:1}.fc .fc-daygrid-day-bg .fc-bg-event{z-index:2}.fc .fc-daygrid-day-bg .fc-highlight{z-index:3}.fc .fc-daygrid-event{margin-top:1px;z-index:6}.fc .fc-daygrid-event.fc-event-mirror{z-index:7}.fc .fc-daygrid-day-bottom{font-size:.85em;margin:0 2px}.fc .fc-daygrid-day-bottom:after,.fc .fc-daygrid-day-bottom:before{clear:both;content:\"\";display:table}.fc .fc-daygrid-more-link{border-radius:3px;cursor:pointer;line-height:1;margin-top:1px;max-width:100%;overflow:hidden;padding:2px;position:relative;white-space:nowrap;z-index:4}.fc .fc-daygrid-more-link:hover{background-color:rgba(0,0,0,.1)}.fc .fc-daygrid-week-number{background-color:var(--fc-neutral-bg-color);color:var(--fc-neutral-text-color);min-width:1.5em;padding:2px;position:absolute;text-align:center;top:0;z-index:5}.fc .fc-more-popover .fc-popover-body{min-width:220px;padding:10px}.fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end{margin-left:2px}.fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start{margin-right:2px}.fc-direction-ltr .fc-daygrid-more-link{float:left}.fc-direction-ltr .fc-daygrid-week-number{border-radius:0 0 3px 0;left:0}.fc-direction-rtl .fc-daygrid-more-link{float:right}.fc-direction-rtl .fc-daygrid-week-number{border-radius:0 0 0 3px;right:0}.fc-liquid-hack .fc-daygrid-day-frame{position:static}.fc-daygrid-event{border-radius:3px;font-size:var(--fc-small-font-size);position:relative;white-space:nowrap}.fc-daygrid-block-event .fc-event-time{font-weight:700}.fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title{padding:1px}.fc-daygrid-dot-event{align-items:center;display:flex;padding:2px 0}.fc-daygrid-dot-event .fc-event-title{flex-grow:1;flex-shrink:1;font-weight:700;min-width:0;overflow:hidden}.fc-daygrid-dot-event.fc-event-mirror,.fc-daygrid-dot-event:hover{background:rgba(0,0,0,.1)}.fc-daygrid-dot-event.fc-event-selected:before{bottom:-10px;top:-10px}.fc-daygrid-event-dot{border:calc(var(--fc-daygrid-event-dot-width)/2) solid var(--fc-event-border-color);border-radius:calc(var(--fc-daygrid-event-dot-width)/2);box-sizing:content-box;height:0;margin:0 4px;width:0}.fc-direction-ltr .fc-daygrid-event .fc-event-time{margin-right:3px}.fc-direction-rtl .fc-daygrid-event .fc-event-time{margin-left:3px}";
  967. injectStyles(css_248z);
  968. export { DayTableView as DayGridView, DayTable, DayTableSlicer, Table, TableDateProfileGenerator, TableRows, TableView, buildDayTableModel, buildDayTableRenderRange };