TimeRanges do not render if ‘day’ is default mode

[ExtAnimal]

Run TimeRanges example. Reconfigure it mode : ‘day’

When switching to WeekView, the time ranges are not rendered.

[ExtAnimal]

@dongryphon the TimeRanges DayZone doesn't get created early enough. The first refresh takes place before it is created.

Just run the example and switch to a single DayView. The ranges are not rendered. Navigating days from then on and it works fine - the zone has been created. It just happened after the first refresh.

It seems that refresh() is called in DayView#onInternalPaint which is called before the paint event is broadcast. That's probably not a good idea. The paint event is usually an initialization signal. refresh() should be called on the tail end of the paint process so that everything is set up.

I suggest moving the initial refresh call to afterInternalPaint which means adding an afterInternalPaint method to DayView, and moving the call across.

So I suggest this:

    onInternalPaint({ firstPaint }) {
        const
            me = this,
            {
                dayContainerElement,
                horizontalScrollerElement
            }  = me,
            {
                scrollBarWidth
            }  = DomHelper;

        super.afterInternalPaint?.(...arguments);

        if (firstPaint) {
            // This will be the first read of the allDayEvents property and will
            // trigger ingestion of allDayEvents and its upgrade into an instance of CalendarRow
            const { allDayEvents } = me;

            /**
             * A Scroller which encapsulates horizontal scrolling of the view in case a {@link #config-minDayWidth}
             * setting causes the days to overflow the available width.
             * @member {Core.helper.util.Scroller} horizontalScroller
             */
            me.horizontalScroller = new Scroller({
                widget            : me,
                element           : dayContainerElement,
                overflowX         : scrollBarWidth ? 'hidden-scroll' : true,
                overflowY         : 'clip',
                propagateSync     : true,
                internalListeners : {
                    overflowChange : 'updateElementLayout',
                    thisObj        : me
                }
            });

            if (allDayEvents) {
                allDayEvents.element.classList.remove('b-dayview-initializing');
                me.horizontalScroller.addPartner(allDayEvents.headerScroller);
            }

            ResizeMonitor.addResizeListener(me.dayContainerElement, me.onDayContainerResize.bind(me));

            // We need the scroller even if the UI is overlay scrollbars.
            // Because the scrollbar needs to be docked at the bottom while content scrolls.
            me.scrollbarScroller = new Scroller({
                widget      : me,
                element     : horizontalScrollerElement.firstChild,
                scrollWidth : dayContainerElement.scrollWidth - scrollBarWidth,
                overflowX   : true,
                overflowY   : false
            });
            me.horizontalScroller.addPartner(me.scrollbarScroller);

            me.updateElementLayout.now();

            me.setInterval(me.syncCurrentTimeIndicator.bind(me), 30 * 1000, 'syncCurrentTimeIndicator');

            if (allDayEvents) {
                EventHelper.on({
                    click : {
                        element : me.cornerElement,
                        handler : 'onCornerClick'
                    },
                    // The scrollbar padding must not bubble any mousemove events to dragdrop.
                    // This is because a mouseover of the allDay row *may*, if there are no
                    // all day events, cause expansion of the allDay row, which *may* cause
                    // vertical overflow, which *may* on some platforms cause this padding element
                    // to pop into visibility below the cursor which would then cause
                    // a dragleave.
                    mousemove : {
                        element : me.allDayEvents.element.nextSibling,
                        handler : stopEvent,
                        capture : true
                    },
                    thisObj : me
                });

                // If, through window resizing, or changing hourHeight, the scrollbar status flips
                // we have to run the scrollbar syncing.
                me.scrollable.ion({
                    overflowChange : 'syncScrollbarPadding',
                    thisObj        : me
                });
            }

            me.scrollToVisibleStartTime();
        }
    }

    // Call initial refresh on the tail of the paint process so that all Features have been initialized.
    afterInternalPaint({ firstPaint }) {
        super.afterInternalPaint?.(...arguments);
        if (firstPaint) {
            this.refresh();
        }
    }