@fullcalendar/timeline 7.0.0-beta.1 → 7.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs +1 -1
- package/index.global.js +143 -258
- package/index.global.min.js +2 -2
- package/index.js +1 -1
- package/internal.cjs +141 -256
- package/internal.d.ts +32 -58
- package/internal.js +143 -256
- package/package.json +4 -4
package/index.global.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
FullCalendar Timeline Plugin v7.0.0-beta.
|
|
2
|
+
FullCalendar Timeline Plugin v7.0.0-beta.4
|
|
3
3
|
Docs & License: https://fullcalendar.io/docs/timeline-view-no-resources
|
|
4
4
|
(c) 2024 Adam Shaw
|
|
5
5
|
*/
|
|
@@ -456,42 +456,33 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
456
456
|
}
|
|
457
457
|
render() {
|
|
458
458
|
let { props, context } = this;
|
|
459
|
-
let { dateEnv, options
|
|
459
|
+
let { dateEnv, options } = context;
|
|
460
460
|
let { date, tDateProfile, isEm } = props;
|
|
461
461
|
let dateMeta = internal$1.getDateMeta(props.date, props.todayRange, props.nowDate, props.dateProfile);
|
|
462
462
|
let renderProps = Object.assign(Object.assign({ date: dateEnv.toDate(props.date) }, dateMeta), { view: context.viewApi });
|
|
463
|
-
return (preact.createElement(internal$1.ContentContainer, {
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
'fc-timeline-slot-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
'fc-timeline-slot-major' :
|
|
473
|
-
'fc-timeline-slot-minor') : '',
|
|
474
|
-
...(props.isDay ?
|
|
475
|
-
internal$1.getDayClassNames(dateMeta, theme) :
|
|
476
|
-
internal$1.getSlotClassNames(dateMeta, theme)),
|
|
477
|
-
], elAttrs: {
|
|
478
|
-
'data-date': dateEnv.formatIso(date, {
|
|
463
|
+
return (preact.createElement(internal$1.ContentContainer, { tag: "div",
|
|
464
|
+
// fc-align-start shrinks width of InnerContent
|
|
465
|
+
// TODO: document this semantic className fc-timeline-slot-em
|
|
466
|
+
className: internal$1.joinClassNames('fc-timeline-slot', isEm && 'fc-timeline-slot-em', tDateProfile.isTimeScale && (internal$1.isInt(dateEnv.countDurationsBetween(// best to do this here?
|
|
467
|
+
tDateProfile.normalizedRange.start, props.date, tDateProfile.labelInterval)) ?
|
|
468
|
+
'fc-timeline-slot-major' :
|
|
469
|
+
'fc-timeline-slot-minor'), 'fc-timeline-slot-lane fc-cell fc-flex-col fc-align-start', props.borderStart && 'fc-border-s', props.isDay ?
|
|
470
|
+
internal$1.getDayClassName(dateMeta) :
|
|
471
|
+
internal$1.getSlotClassName(dateMeta)), attrs: Object.assign({ 'data-date': dateEnv.formatIso(date, {
|
|
479
472
|
omitTimeZoneOffset: true,
|
|
480
473
|
omitTime: !tDateProfile.isTimeScale,
|
|
481
|
-
}),
|
|
482
|
-
}, elStyle: {
|
|
474
|
+
}) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
|
|
483
475
|
width: props.width,
|
|
484
|
-
}, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement(
|
|
485
|
-
preact.createElement(InnerContent, { elTag: "div", elClasses: ['fc-cell-inner'] })))));
|
|
476
|
+
}, renderProps: renderProps, generatorName: "slotLaneContent", customGenerator: options.slotLaneContent, classNameGenerator: options.slotLaneClassNames, didMount: options.slotLaneDidMount, willUnmount: options.slotLaneWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: 'fc-cell-inner', elRef: this.innerElRef }))));
|
|
486
477
|
}
|
|
487
478
|
componentDidMount() {
|
|
488
479
|
const innerEl = this.innerElRef.current;
|
|
489
|
-
this.
|
|
480
|
+
this.disconnectInnerWidth = internal$1.watchWidth(innerEl, (width) => {
|
|
490
481
|
internal$1.setRef(this.props.innerWidthRef, width);
|
|
491
482
|
});
|
|
492
483
|
}
|
|
493
484
|
componentWillUnmount() {
|
|
494
|
-
this.
|
|
485
|
+
this.disconnectInnerWidth();
|
|
495
486
|
internal$1.setRef(this.props.innerWidthRef, null);
|
|
496
487
|
}
|
|
497
488
|
}
|
|
@@ -517,9 +508,9 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
517
508
|
let { tDateProfile, slotWidth } = props;
|
|
518
509
|
let { slotDates, isWeekStarts } = tDateProfile;
|
|
519
510
|
let isDay = !tDateProfile.isTimeScale && !tDateProfile.largeUnit;
|
|
520
|
-
return (preact.createElement("div", { className: "fc-timeline-slots fc-fill fc-flex-row" }, slotDates.map((slotDate, i) => {
|
|
511
|
+
return (preact.createElement("div", { "aria-hidden": true, className: "fc-timeline-slots fc-fill fc-flex-row", style: { height: props.height } }, slotDates.map((slotDate, i) => {
|
|
521
512
|
let key = slotDate.toISOString();
|
|
522
|
-
return (preact.createElement(TimelineSlatCell, { key: key, date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isEm: isWeekStarts[i], isDay: isDay,
|
|
513
|
+
return (preact.createElement(TimelineSlatCell, { key: key, date: slotDate, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isEm: isWeekStarts[i], isDay: isDay, borderStart: Boolean(i),
|
|
523
514
|
// ref
|
|
524
515
|
innerWidthRef: innerWidthRefMap.createRef(key),
|
|
525
516
|
// dimensions
|
|
@@ -553,30 +544,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
553
544
|
return snapCoverage;
|
|
554
545
|
}
|
|
555
546
|
/*
|
|
556
|
-
TODO: audit!!!
|
|
557
|
-
*/
|
|
558
|
-
function coordToCss(hcoord, isRtl) {
|
|
559
|
-
if (hcoord === null) {
|
|
560
|
-
return { left: '', right: '' };
|
|
561
|
-
}
|
|
562
|
-
if (isRtl) {
|
|
563
|
-
return { right: hcoord, left: '' };
|
|
564
|
-
}
|
|
565
|
-
return { left: hcoord, right: '' };
|
|
566
|
-
}
|
|
567
|
-
/*
|
|
568
|
-
TODO: audit!!!
|
|
569
|
-
*/
|
|
570
|
-
function coordsToCss(hcoords, isRtl) {
|
|
571
|
-
if (!hcoords) {
|
|
572
|
-
return { left: '', right: '' };
|
|
573
|
-
}
|
|
574
|
-
if (isRtl) {
|
|
575
|
-
return { right: hcoords.start, left: -hcoords.end };
|
|
576
|
-
}
|
|
577
|
-
return { left: hcoords.start, right: -hcoords.end };
|
|
578
|
-
}
|
|
579
|
-
/*
|
|
580
547
|
TODO: DRY up with elsewhere?
|
|
581
548
|
*/
|
|
582
549
|
function horizontalsToCss(hcoord, isRtl) {
|
|
@@ -607,7 +574,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
607
574
|
};
|
|
608
575
|
}
|
|
609
576
|
}
|
|
610
|
-
function createHorizontalStyle(
|
|
577
|
+
function createHorizontalStyle(// TODO: DRY up?
|
|
578
|
+
props, isRtl) {
|
|
611
579
|
if (props) {
|
|
612
580
|
return {
|
|
613
581
|
[isRtl ? 'right' : 'left']: props.start,
|
|
@@ -680,13 +648,13 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
680
648
|
function computeManySegHorizontals(segs, segMinWidth, dateEnv, tDateProfile, slotWidth) {
|
|
681
649
|
const res = {};
|
|
682
650
|
for (const seg of segs) {
|
|
683
|
-
res[seg
|
|
651
|
+
res[internal$1.getEventKey(seg)] = computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth);
|
|
684
652
|
}
|
|
685
653
|
return res;
|
|
686
654
|
}
|
|
687
655
|
function computeSegHorizontals(seg, segMinWidth, dateEnv, tDateProfile, slotWidth) {
|
|
688
|
-
const startCoord = dateToCoord(seg.
|
|
689
|
-
const endCoord = dateToCoord(seg.
|
|
656
|
+
const startCoord = dateToCoord(seg.startDate, dateEnv, tDateProfile, slotWidth);
|
|
657
|
+
const endCoord = dateToCoord(seg.endDate, dateEnv, tDateProfile, slotWidth);
|
|
690
658
|
let size = endCoord - startCoord;
|
|
691
659
|
if (segMinWidth) {
|
|
692
660
|
size = Math.max(size, segMinWidth);
|
|
@@ -694,95 +662,58 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
694
662
|
return { start: startCoord, size };
|
|
695
663
|
}
|
|
696
664
|
function computeFgSegPlacements(// mostly horizontals
|
|
697
|
-
segs, segHorizontals,
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
segEntries.push({
|
|
707
|
-
index: i,
|
|
708
|
-
seg,
|
|
709
|
-
span: {
|
|
710
|
-
start: hcoords.start,
|
|
711
|
-
end: hcoords.start + hcoords.size,
|
|
712
|
-
},
|
|
713
|
-
thickness: height,
|
|
714
|
-
});
|
|
665
|
+
segs, segHorizontals, // TODO: use Map
|
|
666
|
+
segHeights, // keyed by instanceId
|
|
667
|
+
hiddenGroupHeights, strictOrder, maxDepth) {
|
|
668
|
+
const segRanges = [];
|
|
669
|
+
// isn't it true that there will either be ALL hcoords or NONE? can optimize
|
|
670
|
+
for (const seg of segs) {
|
|
671
|
+
const hcoords = segHorizontals[internal$1.getEventKey(seg)];
|
|
672
|
+
if (hcoords) {
|
|
673
|
+
segRanges.push(Object.assign(Object.assign({}, seg), { start: hcoords.start, end: hcoords.start + hcoords.size }));
|
|
715
674
|
}
|
|
716
675
|
}
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
}
|
|
724
|
-
let
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
hierarchy.maxStackCnt = -1;
|
|
734
|
-
hierarchy.addSegs(hiddenGroupEntries);
|
|
735
|
-
let visibleRects = hierarchy.toRects();
|
|
736
|
-
let segTops = {};
|
|
737
|
-
let hiddenGroupTops = {};
|
|
738
|
-
for (let rect of visibleRects) {
|
|
739
|
-
const { seg, segGroup } = rect;
|
|
740
|
-
if (seg) { // regular seg
|
|
741
|
-
segTops[seg.eventRange.instance.instanceId] = rect.levelCoord;
|
|
742
|
-
}
|
|
743
|
-
else { // hiddenGroup
|
|
744
|
-
hiddenGroupTops[segGroup.key] = rect.levelCoord;
|
|
676
|
+
const hierarchy = new internal$1.SegHierarchy(segRanges, (seg) => segHeights.get(internal$1.getEventKey(seg)), strictOrder, undefined, // maxCoord
|
|
677
|
+
maxDepth);
|
|
678
|
+
const segTops = new Map();
|
|
679
|
+
hierarchy.traverseSegs((seg, segTop) => {
|
|
680
|
+
segTops.set(internal$1.getEventKey(seg), segTop);
|
|
681
|
+
});
|
|
682
|
+
const { hiddenSegs } = hierarchy;
|
|
683
|
+
let totalHeight = 0;
|
|
684
|
+
for (const segRange of segRanges) {
|
|
685
|
+
const segKey = internal$1.getEventKey(segRange);
|
|
686
|
+
const segHeight = segHeights.get(segKey);
|
|
687
|
+
const segTop = segTops.get(segKey);
|
|
688
|
+
if (segHeight != null) {
|
|
689
|
+
if (segTop != null) {
|
|
690
|
+
totalHeight = Math.max(totalHeight, segTop + segHeight);
|
|
691
|
+
}
|
|
745
692
|
}
|
|
746
693
|
}
|
|
694
|
+
const hiddenGroups = internal$1.groupIntersectingSegs(hiddenSegs);
|
|
695
|
+
const hiddenGroupTops = new Map();
|
|
696
|
+
// HACK for hiddenGroup findInsertion() call
|
|
697
|
+
hierarchy.strictOrder = true;
|
|
698
|
+
for (const hiddenGroup of hiddenGroups) {
|
|
699
|
+
const { levelCoord: top } = hierarchy.findInsertion(hiddenGroup, 0);
|
|
700
|
+
const hiddenGroupHeight = hiddenGroupHeights.get(hiddenGroup.key) || 0;
|
|
701
|
+
hiddenGroupTops.set(hiddenGroup.key, top);
|
|
702
|
+
totalHeight = Math.max(totalHeight, top + hiddenGroupHeight);
|
|
703
|
+
}
|
|
747
704
|
return [
|
|
748
705
|
segTops,
|
|
749
|
-
computeMaxBottom(segs, segTops, segHeights),
|
|
750
706
|
hiddenGroups,
|
|
751
707
|
hiddenGroupTops,
|
|
708
|
+
totalHeight,
|
|
752
709
|
];
|
|
753
710
|
}
|
|
754
|
-
function computeMaxBottom(segs, segTops, segHeights) {
|
|
755
|
-
let max = 0;
|
|
756
|
-
for (const seg of segs) {
|
|
757
|
-
const { instanceId } = seg.eventRange.instance;
|
|
758
|
-
const top = segTops[instanceId];
|
|
759
|
-
const height = segHeights.get(instanceId);
|
|
760
|
-
if (top != null && height != null) {
|
|
761
|
-
max = Math.max(max, top + height);
|
|
762
|
-
}
|
|
763
|
-
}
|
|
764
|
-
return max;
|
|
765
|
-
}
|
|
766
|
-
/*
|
|
767
|
-
TODO: converge with computeMaxBottom, but keys are different
|
|
768
|
-
*/
|
|
769
|
-
function computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, hiddenGroupHeights) {
|
|
770
|
-
let max = 0;
|
|
771
|
-
for (const hiddenGroup of hiddenGroups) {
|
|
772
|
-
const top = hiddenGroupTops[hiddenGroup.key];
|
|
773
|
-
const height = hiddenGroupHeights.get(hiddenGroup.key);
|
|
774
|
-
if (top != null && height != null) {
|
|
775
|
-
max = Math.max(max, top + height);
|
|
776
|
-
}
|
|
777
|
-
}
|
|
778
|
-
return max;
|
|
779
|
-
}
|
|
780
711
|
|
|
781
712
|
class TimelineLaneBg extends internal$1.BaseComponent {
|
|
782
713
|
render() {
|
|
783
714
|
let { props } = this;
|
|
784
715
|
let highlightSeg = [].concat(props.eventResizeSegs, props.dateSelectionSegs);
|
|
785
|
-
return (preact.createElement(
|
|
716
|
+
return (preact.createElement(preact.Fragment, null,
|
|
786
717
|
this.renderSegs(props.businessHourSegs || [], 'non-business'),
|
|
787
718
|
this.renderSegs(props.bgEventSegs || [], 'bg-event'),
|
|
788
719
|
this.renderSegs(highlightSeg, 'highlight')));
|
|
@@ -796,7 +727,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
796
727
|
let segHorizontal = computeSegHorizontals(seg, undefined, dateEnv, tDateProfile, slotWidth);
|
|
797
728
|
hStyle = horizontalsToCss(segHorizontal, isRtl);
|
|
798
729
|
}
|
|
799
|
-
return (preact.createElement("div", { key: internal$1.buildEventRangeKey(seg.eventRange), className: "fc-
|
|
730
|
+
return (preact.createElement("div", { key: internal$1.buildEventRangeKey(seg.eventRange), className: "fc-fill-y", style: hStyle }, fillType === 'bg-event' ?
|
|
800
731
|
preact.createElement(internal$1.BgEvent, Object.assign({ eventRange: seg.eventRange, isStart: seg.isStart, isEnd: seg.isEnd }, internal$1.getEventRangeMeta(seg.eventRange, todayRange, nowDate))) : (internal$1.renderFill(fillType))));
|
|
801
732
|
})));
|
|
802
733
|
}
|
|
@@ -813,8 +744,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
813
744
|
let slicedRange = internal$1.intersectRanges(normalRange, tDateProfile.normalizedRange);
|
|
814
745
|
if (slicedRange) {
|
|
815
746
|
segs.push({
|
|
816
|
-
|
|
817
|
-
|
|
747
|
+
startDate: slicedRange.start,
|
|
748
|
+
endDate: slicedRange.end,
|
|
818
749
|
isStart: slicedRange.start.valueOf() === normalRange.start.valueOf()
|
|
819
750
|
&& isValidDate(slicedRange.start, tDateProfile, dateProfile, dateProfileGenerator),
|
|
820
751
|
isEnd: slicedRange.end.valueOf() === normalRange.end.valueOf()
|
|
@@ -836,13 +767,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
836
767
|
render() {
|
|
837
768
|
let { props, context } = this;
|
|
838
769
|
let { options } = context;
|
|
839
|
-
return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, {
|
|
840
|
-
'fc-timeline-event',
|
|
841
|
-
'fc-h-event',
|
|
842
|
-
options.eventOverlap === false // TODO: fix bad default
|
|
843
|
-
? 'fc-timeline-event-spacious'
|
|
844
|
-
: ''
|
|
845
|
-
], defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
|
|
770
|
+
return (preact.createElement(internal$1.StandardEvent, Object.assign({}, props, { className: internal$1.joinClassNames('fc-timeline-event', options.eventOverlap === false // TODO: fix bad default
|
|
771
|
+
&& 'fc-timeline-event-spacious', 'fc-h-event'), defaultTimeFormat: DEFAULT_TIME_FORMAT, defaultDisplayEventTime: !props.isTimeScale })));
|
|
846
772
|
}
|
|
847
773
|
}
|
|
848
774
|
|
|
@@ -850,13 +776,13 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
850
776
|
render() {
|
|
851
777
|
let { props } = this;
|
|
852
778
|
let { hiddenSegs, resourceId, forcedInvisibleMap } = props;
|
|
853
|
-
let
|
|
854
|
-
return (preact.createElement(internal$1.MoreLinkContainer, {
|
|
779
|
+
let dateSpanProps = resourceId ? { resourceId } : {};
|
|
780
|
+
return (preact.createElement(internal$1.MoreLinkContainer, { className: 'fc-timeline-more-link', allDayDate: null, segs: hiddenSegs, hiddenSegs: hiddenSegs, dateProfile: props.dateProfile, todayRange: props.todayRange, dateSpanProps: dateSpanProps, popoverContent: () => (preact.createElement(preact.Fragment, null, hiddenSegs.map((seg) => {
|
|
855
781
|
let { eventRange } = seg;
|
|
856
782
|
let instanceId = eventRange.instance.instanceId;
|
|
857
783
|
return (preact.createElement("div", { key: instanceId, style: { visibility: forcedInvisibleMap[instanceId] ? 'hidden' : '' } },
|
|
858
784
|
preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: false, isResizing: false, isDateSelecting: false, isSelected: instanceId === props.eventSelection }, internal$1.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
|
|
859
|
-
}))) }, (InnerContent) => (preact.createElement(InnerContent, {
|
|
785
|
+
}))) }, (InnerContent) => (preact.createElement(InnerContent, { tag: "div", className: 'fc-timeline-more-link-inner fc-sticky-s' }))));
|
|
860
786
|
}
|
|
861
787
|
}
|
|
862
788
|
|
|
@@ -875,12 +801,12 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
875
801
|
}
|
|
876
802
|
componentDidMount() {
|
|
877
803
|
const rootEl = this.rootElRef.current; // TODO: make dynamic with useEffect
|
|
878
|
-
this.
|
|
804
|
+
this.disconnectHeight = internal$1.watchHeight(rootEl, (height) => {
|
|
879
805
|
internal$1.setRef(this.props.heightRef, height);
|
|
880
806
|
});
|
|
881
807
|
}
|
|
882
808
|
componentWillUnmount() {
|
|
883
|
-
this.
|
|
809
|
+
this.disconnectHeight();
|
|
884
810
|
internal$1.setRef(this.props.heightRef, null);
|
|
885
811
|
}
|
|
886
812
|
}
|
|
@@ -913,7 +839,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
913
839
|
TODO: lots of memoization needed here!
|
|
914
840
|
*/
|
|
915
841
|
render() {
|
|
916
|
-
let { props, context, segHeightRefMap } = this;
|
|
842
|
+
let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
|
|
917
843
|
let { options } = context;
|
|
918
844
|
let { dateProfile, tDateProfile } = props;
|
|
919
845
|
let slicedProps = this.slicer.sliceProps(props, dateProfile, tDateProfile.isTimeScale ? null : props.nextDayThreshold, context, // wish we didn't have to pass in the rest of the args...
|
|
@@ -925,10 +851,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
925
851
|
let fgSegHorizontals = props.slotWidth != null
|
|
926
852
|
? computeManySegHorizontals(fgSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
|
|
927
853
|
: {};
|
|
928
|
-
let [fgSegTops,
|
|
929
|
-
fgSegs, fgSegHorizontals, segHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
|
|
930
|
-
let moreLinksBottom = computeMoreLinkMaxBottom(hiddenGroups, hiddenGroupTops, this.moreLinkHeightRefMap.current);
|
|
931
|
-
let innerHeight = Math.max(moreLinksBottom, fgSegsBottom);
|
|
854
|
+
let [fgSegTops, hiddenGroups, hiddenGroupTops, totalHeight] = computeFgSegPlacements(fgSegs, fgSegHorizontals, segHeightRefMap.current, moreLinkHeightRefMap.current, options.eventOrderStrict, options.eventMaxStack);
|
|
932
855
|
let forcedInvisibleMap = // TODO: more convenient/DRY
|
|
933
856
|
(slicedProps.eventDrag ? slicedProps.eventDrag.affectedInstances : null) ||
|
|
934
857
|
(slicedProps.eventResize ? slicedProps.eventResize.affectedInstances : null) ||
|
|
@@ -939,20 +862,18 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
939
862
|
bgEventSegs: slicedProps.bgEventSegs, businessHourSegs: slicedProps.businessHourSegs, dateSelectionSegs: slicedProps.dateSelectionSegs, eventResizeSegs: slicedProps.eventResize ? slicedProps.eventResize.segs : [] /* bad new empty array? */,
|
|
940
863
|
// dimensions
|
|
941
864
|
slotWidth: props.slotWidth }),
|
|
942
|
-
preact.createElement("div", { className:
|
|
943
|
-
'fc-timeline-events'
|
|
944
|
-
'fc-content-box',
|
|
945
|
-
options.eventOverlap === false // TODO: fix bad default
|
|
946
|
-
? 'fc-timeline-events-overlap-disabled'
|
|
947
|
-
: 'fc-timeline-events-overlap-enabled'
|
|
948
|
-
].join(' '), style: { height: innerHeight } },
|
|
865
|
+
preact.createElement("div", { className: internal$1.joinClassNames('fc-timeline-events', options.eventOverlap === false // TODO: fix bad default
|
|
866
|
+
? 'fc-timeline-events-overlap-disabled'
|
|
867
|
+
: 'fc-timeline-events-overlap-enabled', 'fc-content-box'), style: { height: totalHeight } },
|
|
949
868
|
this.renderFgSegs(fgSegs, fgSegHorizontals, fgSegTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, false, // isDragging
|
|
950
869
|
false, // isResizing
|
|
951
870
|
false),
|
|
952
871
|
this.renderFgSegs(mirrorSegs, props.slotWidth // TODO: memoize
|
|
953
872
|
? computeManySegHorizontals(mirrorSegs, options.eventMinWidth, context.dateEnv, tDateProfile, props.slotWidth)
|
|
954
873
|
: {}, fgSegTops, {}, // forcedInvisibleMap
|
|
955
|
-
[],
|
|
874
|
+
[], // hiddenGroups
|
|
875
|
+
new Map(), // hiddenGroupTops
|
|
876
|
+
Boolean(slicedProps.eventDrag), Boolean(slicedProps.eventResize), false))));
|
|
956
877
|
}
|
|
957
878
|
renderFgSegs(segs, segHorizontals, segTops, forcedInvisibleMap, hiddenGroups, hiddenGroupTops, isDragging, isResizing, isDateSelecting) {
|
|
958
879
|
let { props, context, segHeightRefMap, moreLinkHeightRefMap } = this;
|
|
@@ -961,18 +882,18 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
961
882
|
segs.map((seg) => {
|
|
962
883
|
const { eventRange } = seg;
|
|
963
884
|
const { instanceId } = eventRange.instance;
|
|
964
|
-
const segTop = segTops
|
|
885
|
+
const segTop = segTops.get(instanceId);
|
|
965
886
|
const segHorizontal = segHorizontals[instanceId];
|
|
966
887
|
const isVisible = isMirror ||
|
|
967
888
|
(segHorizontal && segTop != null && !forcedInvisibleMap[instanceId]);
|
|
968
889
|
return (preact.createElement(TimelineEventHarness, { key: instanceId, style: Object.assign({ visibility: isVisible ? '' : 'hidden', top: segTop || 0 }, horizontalsToCss(segHorizontal, context.isRtl)), heightRef: isMirror ? undefined : segHeightRefMap.createRef(instanceId) },
|
|
969
890
|
preact.createElement(TimelineEvent, Object.assign({ isTimeScale: props.tDateProfile.isTimeScale, eventRange: eventRange, isStart: seg.isStart, isEnd: seg.isEnd, isDragging: isDragging, isResizing: isResizing, isDateSelecting: isDateSelecting, isSelected: instanceId === props.eventSelection /* TODO: bad for mirror? */ }, internal$1.getEventRangeMeta(eventRange, props.todayRange, props.nowDate)))));
|
|
970
891
|
}),
|
|
971
|
-
hiddenGroups.map((hiddenGroup) => (preact.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops
|
|
972
|
-
start: hiddenGroup.
|
|
973
|
-
size: hiddenGroup.
|
|
892
|
+
hiddenGroups.map((hiddenGroup) => (preact.createElement(TimelineEventHarness, { key: hiddenGroup.key, style: Object.assign({ top: hiddenGroupTops.get(hiddenGroup.key) || 0 }, horizontalsToCss({
|
|
893
|
+
start: hiddenGroup.start,
|
|
894
|
+
size: hiddenGroup.end - hiddenGroup.start
|
|
974
895
|
}, context.isRtl)), heightRef: moreLinkHeightRefMap.createRef(hiddenGroup.key) },
|
|
975
|
-
preact.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs
|
|
896
|
+
preact.createElement(TimelineLaneMoreLink, { hiddenSegs: hiddenGroup.segs, dateProfile: props.dateProfile, nowDate: props.nowDate, todayRange: props.todayRange, isTimeScale: props.tDateProfile.isTimeScale, eventSelection: props.eventSelection, resourceId: props.resourceId, forcedInvisibleMap: forcedInvisibleMap }))))));
|
|
976
897
|
}
|
|
977
898
|
}
|
|
978
899
|
|
|
@@ -981,7 +902,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
981
902
|
super(...arguments);
|
|
982
903
|
// memo
|
|
983
904
|
this.refineRenderProps = internal$1.memoizeObjArg(refineRenderProps);
|
|
984
|
-
this.buildCellNavLinkAttrs = internal$1.memoize(buildCellNavLinkAttrs);
|
|
985
905
|
// ref
|
|
986
906
|
this.innerElRef = preact.createRef();
|
|
987
907
|
}
|
|
@@ -1000,36 +920,24 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1000
920
|
dateEnv: context.dateEnv,
|
|
1001
921
|
viewApi: context.viewApi,
|
|
1002
922
|
});
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
'
|
|
1010
|
-
'fc-justify-center',
|
|
1011
|
-
props.isCentered ? 'fc-align-center' : 'fc-align-start',
|
|
1012
|
-
...( // TODO: so slot classnames for week/month/bigger. see note above about rowUnit
|
|
1013
|
-
cell.rowUnit === 'time' ?
|
|
1014
|
-
internal$1.getSlotClassNames(dateMeta, context.theme) :
|
|
1015
|
-
internal$1.getDayClassNames(dateMeta, context.theme)),
|
|
1016
|
-
], elAttrs: {
|
|
1017
|
-
'data-date': dateEnv.formatIso(cell.date, {
|
|
923
|
+
let isNavLink = !dateMeta.isDisabled && (cell.rowUnit && cell.rowUnit !== 'time');
|
|
924
|
+
return (preact.createElement(internal$1.ContentContainer, { tag: "div", className: internal$1.joinClassNames('fc-timeline-slot-label fc-timeline-slot', cell.isWeekStart && 'fc-timeline-slot-em', // TODO: document this semantic className
|
|
925
|
+
'fc-header-cell fc-cell fc-flex-col fc-justify-center', props.borderStart && 'fc-border-s', props.isCentered ? 'fc-align-center' : 'fc-align-start',
|
|
926
|
+
// TODO: so slot classnames for week/month/bigger. see note above about rowUnit
|
|
927
|
+
cell.rowUnit === 'time' ?
|
|
928
|
+
internal$1.getSlotClassName(dateMeta) :
|
|
929
|
+
internal$1.getDayClassName(dateMeta)), attrs: Object.assign({ 'data-date': dateEnv.formatIso(cell.date, {
|
|
1018
930
|
omitTime: !tDateProfile.isTimeScale,
|
|
1019
931
|
omitTimeZoneOffset: true,
|
|
1020
|
-
}),
|
|
1021
|
-
}, elStyle: {
|
|
932
|
+
}) }, (dateMeta.isToday ? { 'aria-current': 'date' } : {})), style: {
|
|
1022
933
|
width: props.slotWidth != null
|
|
1023
934
|
? props.slotWidth * cell.colspan
|
|
1024
935
|
: undefined,
|
|
1025
|
-
}, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact.createElement(
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
'fc-cell-inner',
|
|
1031
|
-
'fc-padding-md',
|
|
1032
|
-
], elAttrs: this.buildCellNavLinkAttrs(context, cell.date, cell.rowUnit) })))));
|
|
936
|
+
}, renderProps: renderProps, generatorName: "slotLabelContent", customGenerator: options.slotLabelContent, defaultGenerator: renderInnerContent, classNameGenerator: options.slotLabelClassNames, didMount: options.slotLabelDidMount, willUnmount: options.slotLabelWillUnmount }, (InnerContent) => (preact.createElement(InnerContent, { tag: 'div', attrs: isNavLink
|
|
937
|
+
// not tabbable because parent is aria-hidden
|
|
938
|
+
? internal$1.buildNavLinkAttrs(context, cell.date, cell.rowUnit, undefined, /* isTabbable = */ false)
|
|
939
|
+
: {} // don't bother with aria-hidden because parent already hidden
|
|
940
|
+
, className: internal$1.joinClassNames('fc-cell-inner fc-padding-md', props.isSticky && 'fc-sticky-s'), elRef: this.innerElRef }))));
|
|
1033
941
|
}
|
|
1034
942
|
componentDidMount() {
|
|
1035
943
|
const { props } = this;
|
|
@@ -1053,11 +961,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1053
961
|
}
|
|
1054
962
|
// Utils
|
|
1055
963
|
// -------------------------------------------------------------------------------------------------
|
|
1056
|
-
function buildCellNavLinkAttrs(context, cellDate, rowUnit) {
|
|
1057
|
-
return (rowUnit && rowUnit !== 'time')
|
|
1058
|
-
? internal$1.buildNavLinkAttrs(context, cellDate, rowUnit)
|
|
1059
|
-
: {};
|
|
1060
|
-
}
|
|
1061
964
|
function renderInnerContent(renderProps) {
|
|
1062
965
|
return renderProps.text;
|
|
1063
966
|
}
|
|
@@ -1103,13 +1006,14 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1103
1006
|
const { props, innerWidthRefMap, innerHeightRefMap } = this;
|
|
1104
1007
|
const isCentered = !(props.tDateProfile.isTimeScale && props.isLastRow);
|
|
1105
1008
|
const isSticky = !props.isLastRow;
|
|
1106
|
-
return (preact.createElement("div", { className: 'fc-row',
|
|
1009
|
+
return (preact.createElement("div", { className: internal$1.joinClassNames('fc-flex-row fc-grow', // TODO: move fc-grow to parent?
|
|
1010
|
+
!props.isLastRow && 'fc-border-b') }, props.cells.map((cell, cellI) => {
|
|
1107
1011
|
// TODO: make this part of the cell obj?
|
|
1108
1012
|
// TODO: rowUnit seems wrong sometimes. says 'month' when it should be day
|
|
1109
1013
|
// TODO: rowUnit is relevant to whole row. put it on a row object, not the cells
|
|
1110
1014
|
// TODO: use rowUnit to key the Row itself?
|
|
1111
1015
|
const key = cell.rowUnit + ':' + cell.date.toISOString();
|
|
1112
|
-
return (preact.createElement(TimelineHeaderCell, { key: key, cell: cell, rowLevel: props.rowLevel, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, todayRange: props.todayRange, nowDate: props.nowDate, isCentered: isCentered, isSticky: isSticky,
|
|
1016
|
+
return (preact.createElement(TimelineHeaderCell, { key: key, cell: cell, rowLevel: props.rowLevel, dateProfile: props.dateProfile, tDateProfile: props.tDateProfile, todayRange: props.todayRange, nowDate: props.nowDate, isCentered: isCentered, isSticky: isSticky, borderStart: Boolean(cellI),
|
|
1113
1017
|
// refs
|
|
1114
1018
|
innerWidthRef: innerWidthRefMap.createRef(key), innerHeightRef: innerHeightRefMap.createRef(key),
|
|
1115
1019
|
// dimensions
|
|
@@ -1127,7 +1031,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1127
1031
|
const { props, context } = this;
|
|
1128
1032
|
return (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
|
|
1129
1033
|
preact.createElement(internal$1.NowIndicatorContainer // TODO: make separate component?
|
|
1130
|
-
, {
|
|
1034
|
+
, { className: 'fc-timeline-now-indicator-line', style: props.slotWidth != null
|
|
1131
1035
|
? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
|
|
1132
1036
|
: {}, isAxis: false, date: props.nowDate })));
|
|
1133
1037
|
}
|
|
@@ -1137,7 +1041,7 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1137
1041
|
render() {
|
|
1138
1042
|
const { props, context } = this;
|
|
1139
1043
|
return (preact.createElement("div", { className: "fc-timeline-now-indicator-container" },
|
|
1140
|
-
preact.createElement(internal$1.NowIndicatorContainer, {
|
|
1044
|
+
preact.createElement(internal$1.NowIndicatorContainer, { className: 'fc-timeline-now-indicator-arrow', style: props.slotWidth != null
|
|
1141
1045
|
? horizontalCoordToCss(dateToCoord(props.nowDate, context.dateEnv, props.tDateProfile, props.slotWidth), context.isRtl)
|
|
1142
1046
|
: {}, isAxis: true, date: props.nowDate })));
|
|
1143
1047
|
}
|
|
@@ -1170,38 +1074,25 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1170
1074
|
this.setState({ slotInnerWidth });
|
|
1171
1075
|
}
|
|
1172
1076
|
};
|
|
1173
|
-
this.
|
|
1174
|
-
this.setState({
|
|
1175
|
-
scrollerWidth,
|
|
1176
|
-
});
|
|
1177
|
-
};
|
|
1178
|
-
this.handleLeftScrollbarWidth = (leftScrollbarWidth) => {
|
|
1077
|
+
this.handleClientWidth = (clientWidth) => {
|
|
1179
1078
|
this.setState({
|
|
1180
|
-
|
|
1079
|
+
clientWidth,
|
|
1181
1080
|
});
|
|
1182
1081
|
};
|
|
1183
|
-
this.
|
|
1082
|
+
this.handleEndScrollbarWidth = (endScrollbarWidth) => {
|
|
1184
1083
|
this.setState({
|
|
1185
|
-
|
|
1084
|
+
endScrollbarWidth
|
|
1186
1085
|
});
|
|
1187
1086
|
};
|
|
1188
|
-
this.
|
|
1087
|
+
this.handleTimeScrollRequest = (scrollTime) => {
|
|
1189
1088
|
this.scrollTime = scrollTime;
|
|
1190
|
-
this.
|
|
1089
|
+
this.applyTimeScroll();
|
|
1191
1090
|
};
|
|
1192
|
-
this.
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
|
|
1196
|
-
if (x) {
|
|
1197
|
-
x += context.isRtl ? -1 : 1; // overcome border. TODO: DRY this up
|
|
1198
|
-
}
|
|
1199
|
-
this.syncedScroller.scrollTo({ x });
|
|
1091
|
+
this.handleTimeScrollEnd = ({ isUser }) => {
|
|
1092
|
+
if (isUser) {
|
|
1093
|
+
this.scrollTime = null;
|
|
1200
1094
|
}
|
|
1201
1095
|
};
|
|
1202
|
-
this.clearScroll = () => {
|
|
1203
|
-
this.scrollTime = null;
|
|
1204
|
-
};
|
|
1205
1096
|
// Hit System
|
|
1206
1097
|
// -----------------------------------------------------------------------------------------------
|
|
1207
1098
|
this.handeBodyEl = (el) => {
|
|
@@ -1227,44 +1118,30 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1227
1118
|
const stickyFooterScrollbar = !props.forPrint && internal$1.getStickyFooterScrollbar(options);
|
|
1228
1119
|
/* table positions */
|
|
1229
1120
|
const [canvasWidth, slotWidth] = this.computeSlotWidth(tDateProfile.slotCnt, tDateProfile.slotsPerLabel, options.slotMinWidth, state.slotInnerWidth, // is ACTUALLY the label width. rename?
|
|
1230
|
-
state.
|
|
1121
|
+
state.clientWidth);
|
|
1231
1122
|
this.slotWidth = slotWidth;
|
|
1232
1123
|
return (preact.createElement(internal$1.NowTimer, { unit: timerUnit }, (nowDate, todayRange) => {
|
|
1233
1124
|
const enableNowIndicator = // TODO: DRY
|
|
1234
1125
|
options.nowIndicator &&
|
|
1235
1126
|
slotWidth != null &&
|
|
1236
1127
|
internal$1.rangeContainsMarker(props.dateProfile.currentRange, nowDate);
|
|
1237
|
-
return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec,
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
'fc-
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
preact.createElement("div", { className: 'fc-rel fc-content-box' // origin for now-indicator
|
|
1248
|
-
, style: {
|
|
1249
|
-
width: canvasWidth,
|
|
1250
|
-
paddingLeft: state.leftScrollbarWidth,
|
|
1251
|
-
paddingRight: state.rightScrollbarWidth,
|
|
1252
|
-
} },
|
|
1253
|
-
preact.createElement("div", null, cellRows.map((cells, rowLevel) => {
|
|
1128
|
+
return (preact.createElement(internal$1.ViewContainer, { viewSpec: context.viewSpec, className: internal$1.joinClassNames('fc-timeline fc-border',
|
|
1129
|
+
// HACK for Safari print-mode, where fc-scroller-no-bars won't take effect for
|
|
1130
|
+
// the below Scrollers if they have liquid flex height
|
|
1131
|
+
!props.forPrint && 'fc-flex-col') },
|
|
1132
|
+
preact.createElement(internal$1.Scroller, { horizontal: true, hideScrollbars: true, className: internal$1.joinClassNames('fc-timeline-header fc-flex-row fc-border-b', stickyHeaderDates && 'fc-table-header-sticky'), ref: this.headerScrollerRef },
|
|
1133
|
+
preact.createElement("div", {
|
|
1134
|
+
// TODO: DRY
|
|
1135
|
+
className: internal$1.joinClassNames('fc-rel', // origin for now-indicator
|
|
1136
|
+
canvasWidth == null && 'fc-liquid'), style: { width: canvasWidth } },
|
|
1137
|
+
cellRows.map((cells, rowLevel) => {
|
|
1254
1138
|
const isLast = rowLevel === cellRows.length - 1;
|
|
1255
1139
|
return (preact.createElement(TimelineHeaderRow, { key: rowLevel, dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange, rowLevel: rowLevel, isLastRow: isLast, cells: cells, slotWidth: slotWidth, innerWidthRef: this.headerRowInnerWidthMap.createRef(rowLevel) }));
|
|
1256
|
-
})
|
|
1257
|
-
enableNowIndicator && (
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
'fc-timeline-body',
|
|
1262
|
-
'fc-rowgroup',
|
|
1263
|
-
verticalScrolling ? 'fc-liquid' : '',
|
|
1264
|
-
], ref: this.bodyScrollerRef, widthRef: this.handleScrollerWidth, leftScrollbarWidthRef: this.handleLeftScrollbarWidth, rightScrollbarWidthRef: this.handleRightScrollbarWidth },
|
|
1265
|
-
preact.createElement("div", { className: "fc-rel fc-grow", style: {
|
|
1266
|
-
width: canvasWidth,
|
|
1267
|
-
}, ref: this.handeBodyEl },
|
|
1140
|
+
}),
|
|
1141
|
+
enableNowIndicator && (preact.createElement(TimelineNowIndicatorArrow, { tDateProfile: tDateProfile, nowDate: nowDate, slotWidth: slotWidth }))),
|
|
1142
|
+
Boolean(state.endScrollbarWidth) && (preact.createElement("div", { className: 'fc-border-s fc-filler', style: { minWidth: state.endScrollbarWidth } }))),
|
|
1143
|
+
preact.createElement(internal$1.Scroller, { vertical: verticalScrolling, horizontal: true, hideScrollbars: props.forPrint, className: internal$1.joinClassNames('fc-timeline-body fc-flex-col', verticalScrolling && 'fc-liquid'), ref: this.bodyScrollerRef, clientWidthRef: this.handleClientWidth, endScrollbarWidthRef: this.handleEndScrollbarWidth },
|
|
1144
|
+
preact.createElement("div", { "aria-label": options.eventsHint, className: "fc-rel fc-grow", style: { width: canvasWidth }, ref: this.handeBodyEl },
|
|
1268
1145
|
preact.createElement(TimelineSlats, { dateProfile: props.dateProfile, tDateProfile: tDateProfile, nowDate: nowDate, todayRange: todayRange,
|
|
1269
1146
|
// ref
|
|
1270
1147
|
innerWidthRef: this.handleBodySlotInnerWidth,
|
|
@@ -1282,8 +1159,8 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1282
1159
|
this.syncedScroller = new internal$2.ScrollerSyncer(true); // horizontal=true
|
|
1283
1160
|
this.updateSyncedScroller();
|
|
1284
1161
|
this.resetScroll();
|
|
1285
|
-
this.context.emitter.on('_timeScrollRequest', this.
|
|
1286
|
-
this.syncedScroller.addScrollEndListener(this.
|
|
1162
|
+
this.context.emitter.on('_timeScrollRequest', this.handleTimeScrollRequest);
|
|
1163
|
+
this.syncedScroller.addScrollEndListener(this.handleTimeScrollEnd);
|
|
1287
1164
|
}
|
|
1288
1165
|
componentDidUpdate(prevProps) {
|
|
1289
1166
|
this.updateSyncedScroller();
|
|
@@ -1292,13 +1169,13 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1292
1169
|
}
|
|
1293
1170
|
else {
|
|
1294
1171
|
// TODO: inefficient to update so often
|
|
1295
|
-
this.
|
|
1172
|
+
this.applyTimeScroll();
|
|
1296
1173
|
}
|
|
1297
1174
|
}
|
|
1298
1175
|
componentWillUnmount() {
|
|
1299
1176
|
this.syncedScroller.destroy();
|
|
1300
|
-
this.context.emitter.off('_timeScrollRequest', this.
|
|
1301
|
-
this.syncedScroller.removeScrollEndListener(this.
|
|
1177
|
+
this.context.emitter.off('_timeScrollRequest', this.handleTimeScrollRequest);
|
|
1178
|
+
this.syncedScroller.removeScrollEndListener(this.handleTimeScrollEnd);
|
|
1302
1179
|
}
|
|
1303
1180
|
// Scrolling
|
|
1304
1181
|
// -----------------------------------------------------------------------------------------------
|
|
@@ -1310,7 +1187,17 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1310
1187
|
]);
|
|
1311
1188
|
}
|
|
1312
1189
|
resetScroll() {
|
|
1313
|
-
this.
|
|
1190
|
+
this.handleTimeScrollRequest(this.context.options.scrollTime);
|
|
1191
|
+
}
|
|
1192
|
+
applyTimeScroll() {
|
|
1193
|
+
const { props, context, tDateProfile, scrollTime, slotWidth } = this;
|
|
1194
|
+
if (scrollTime != null && slotWidth != null) {
|
|
1195
|
+
let x = timeToCoord(scrollTime, context.dateEnv, props.dateProfile, tDateProfile, slotWidth);
|
|
1196
|
+
if (x) {
|
|
1197
|
+
x += 1; // overcome border. TODO: DRY this up
|
|
1198
|
+
}
|
|
1199
|
+
this.syncedScroller.scrollTo({ x });
|
|
1200
|
+
}
|
|
1314
1201
|
}
|
|
1315
1202
|
queryHit(positionLeft, positionTop, elWidth, elHeight) {
|
|
1316
1203
|
const { props, context, tDateProfile, slotWidth } = this;
|
|
@@ -1357,12 +1244,12 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1357
1244
|
}
|
|
1358
1245
|
}
|
|
1359
1246
|
|
|
1360
|
-
var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-
|
|
1247
|
+
var css_248z = ".fc-timeline-slots{z-index:1}.fc-timeline-events{position:relative;z-index:2}.fc-timeline-slot-minor{border-style:dotted}.fc-timeline-events-overlap-enabled{padding-bottom:10px}.fc-timeline-event{border-radius:0;font-size:var(--fc-small-font-size);margin-bottom:1px}.fc-direction-ltr .fc-timeline-event.fc-event-end{margin-right:1px}.fc-direction-rtl .fc-timeline-event.fc-event-end{margin-left:1px}.fc-timeline-event .fc-event-inner{align-items:center;display:flex;flex-direction:row;padding:2px 1px}.fc-timeline-event-spacious .fc-event-inner{padding-bottom:5px;padding-top:5px}.fc-timeline-event .fc-event-time{font-weight:700}.fc-timeline-event .fc-event-time,.fc-timeline-event .fc-event-title{padding:0 2px}.fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-color:transparent #000;border-style:solid;border-width:5px;content:\"\";flex-grow:0;flex-shrink:0;height:0;margin:0 1px;opacity:.5;width:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before,.fc-direction-rtl .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after{border-left:0}.fc-direction-ltr .fc-timeline-event:not(.fc-event-end) .fc-event-inner:after,.fc-direction-rtl .fc-timeline-event:not(.fc-event-start) .fc-event-inner:before{border-right:0}.fc-timeline-more-link{align-items:flex-start;background:var(--fc-more-link-bg-color);color:var(--fc-more-link-text-color);cursor:pointer;display:flex;flex-direction:column;font-size:var(--fc-small-font-size);padding:1px}.fc-direction-ltr .fc-timeline-more-link{margin-right:1px}.fc-direction-rtl .fc-timeline-more-link{margin-left:1px}.fc-timeline-more-link-inner{padding:2px}.fc-timeline-now-indicator-container{bottom:0;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;z-index:4}.fc-timeline-now-indicator-arrow{border-bottom-style:solid;border-bottom-width:0;border-color:var(--fc-now-indicator-color);border-left:5px solid transparent;border-right:5px solid transparent;border-top-style:solid;border-top-width:6px;height:0;margin:0 -5px;position:absolute;top:0;width:0}.fc-timeline-now-indicator-line{border-left:1px solid var(--fc-now-indicator-color);bottom:0;position:absolute;top:0}";
|
|
1361
1248
|
internal$1.injectStyles(css_248z);
|
|
1362
1249
|
|
|
1363
1250
|
var plugin = core.createPlugin({
|
|
1364
1251
|
name: '@fullcalendar/timeline',
|
|
1365
|
-
premiumReleaseDate: '
|
|
1252
|
+
premiumReleaseDate: '2025-01-09',
|
|
1366
1253
|
deps: [premiumCommonPlugin__default["default"]],
|
|
1367
1254
|
initialView: 'timelineDay',
|
|
1368
1255
|
views: {
|
|
@@ -1401,8 +1288,6 @@ FullCalendar.Timeline = (function (exports, core, premiumCommonPlugin, internal$
|
|
|
1401
1288
|
createHorizontalStyle: createHorizontalStyle,
|
|
1402
1289
|
computeSlotWidth: computeSlotWidth,
|
|
1403
1290
|
timeToCoord: timeToCoord,
|
|
1404
|
-
coordToCss: coordToCss,
|
|
1405
|
-
coordsToCss: coordsToCss,
|
|
1406
1291
|
TimelineLaneSlicer: TimelineLaneSlicer,
|
|
1407
1292
|
TimelineHeaderRow: TimelineHeaderRow,
|
|
1408
1293
|
TimelineNowIndicatorArrow: TimelineNowIndicatorArrow,
|