@fullcalendar/core 6.1.15 → 7.0.0-beta.1

package/index.cjs

@@ -136,7 +136,7 @@ function createPlugin(input) {
         initialView: input.initialView || '',
         elementDraggingImpl: input.elementDraggingImpl,
         optionChangeHandlers: input.optionChangeHandlers || {},
-        scrollGridImpl: input.scrollGridImpl || null,
+        scrollerSyncerClass: input.scrollerSyncerClass || null,
         listenerRefiners: input.listenerRefiners || {},
         optionRefiners: input.optionRefiners || {},
         propSetHandlers: input.propSetHandlers || {},
@@ -174,7 +174,7 @@ function buildPluginHooks(pluginDefs, globalDefs) {
         initialView: '',
         elementDraggingImpl: null,
         optionChangeHandlers: {},
-        scrollGridImpl: null,
+        scrollerSyncerClass: null,
         listenerRefiners: {},
         optionRefiners: {},
         propSetHandlers: {},
@@ -244,7 +244,7 @@ function combineHooks(hooks0, hooks1) {
         initialView: hooks0.initialView || hooks1.initialView,
         elementDraggingImpl: hooks0.elementDraggingImpl || hooks1.elementDraggingImpl,
         optionChangeHandlers: Object.assign(Object.assign({}, hooks0.optionChangeHandlers), hooks1.optionChangeHandlers),
-        scrollGridImpl: hooks1.scrollGridImpl || hooks0.scrollGridImpl,
+        scrollerSyncerClass: hooks0.scrollerSyncerClass || hooks1.scrollerSyncerClass,
         listenerRefiners: Object.assign(Object.assign({}, hooks0.listenerRefiners), hooks1.listenerRefiners),
         optionRefiners: Object.assign(Object.assign({}, hooks0.optionRefiners), hooks1.optionRefiners),
         propSetHandlers: Object.assign(Object.assign({}, hooks0.propSetHandlers), hooks1.propSetHandlers),
@@ -264,7 +264,6 @@ class StandardTheme extends internalCommon.Theme {
 }
 StandardTheme.prototype.classes = {
     root: 'fc-theme-standard',
-    tableCellShaded: 'fc-cell-shaded',
     buttonGroup: 'fc-button-group',
     button: 'fc-button fc-button-primary',
     buttonActive: 'fc-button-active',
@@ -1627,7 +1626,9 @@ function warnUnknownOptions(options, viewName) {
 class ToolbarSection extends internalCommon.BaseComponent {
     render() {
         let children = this.props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
-        return preact.createElement('div', { className: 'fc-toolbar-chunk' }, ...children);
+        return preact.createElement('div', {
+            className: 'fc-toolbar-chunk fc-toolbar-' + this.props.name
+        }, ...children);
     }
     renderWidgetGroup(widgetGroup) {
         let { props } = this;
@@ -1638,7 +1639,7 @@ class ToolbarSection extends internalCommon.BaseComponent {
             let { buttonName, buttonClick, buttonText, buttonIcon, buttonHint } = widget;
             if (buttonName === 'title') {
                 isOnlyButtons = false;
-                children.push(preact.createElement("h2", { className: "fc-toolbar-title", id: props.titleId }, props.title));
+                children.push(preact.createElement("h2", { className: "fc-toolbar-title" }, props.title));
             }
             else {
                 let isPressed = buttonName === props.activeButton;
@@ -1694,65 +1695,7 @@ class Toolbar extends internalCommon.BaseComponent {
     }
     renderSection(key, widgetGroups) {
         let { props } = this;
-        return (preact.createElement(ToolbarSection, { key: key, widgetGroups: widgetGroups, title: props.title, navUnit: props.navUnit, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled, titleId: props.titleId }));
-    }
-}
-
-class ViewHarness extends internalCommon.BaseComponent {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            availableWidth: null,
-        };
-        this.handleEl = (el) => {
-            this.el = el;
-            internalCommon.setRef(this.props.elRef, el);
-            this.updateAvailableWidth();
-        };
-        this.handleResize = () => {
-            this.updateAvailableWidth();
-        };
-    }
-    render() {
-        let { props, state } = this;
-        let { aspectRatio } = props;
-        let classNames = [
-            'fc-view-harness',
-            (aspectRatio || props.liquid || props.height)
-                ? 'fc-view-harness-active' // harness controls the height
-                : 'fc-view-harness-passive', // let the view do the height
-        ];
-        let height = '';
-        let paddingBottom = '';
-        if (aspectRatio) {
-            if (state.availableWidth !== null) {
-                height = state.availableWidth / aspectRatio;
-            }
-            else {
-                // while waiting to know availableWidth, we can't set height to *zero*
-                // because will cause lots of unnecessary scrollbars within scrollgrid.
-                // BETTER: don't start rendering ANYTHING yet until we know container width
-                // NOTE: why not always use paddingBottom? Causes height oscillation (issue 5606)
-                paddingBottom = `${(1 / aspectRatio) * 100}%`;
-            }
-        }
-        else {
-            height = props.height || '';
-        }
-        return (preact.createElement("div", { "aria-labelledby": props.labeledById, ref: this.handleEl, className: classNames.join(' '), style: { height, paddingBottom } }, props.children));
-    }
-    componentDidMount() {
-        this.context.addResizeHandler(this.handleResize);
-    }
-    componentWillUnmount() {
-        this.context.removeResizeHandler(this.handleResize);
-    }
-    updateAvailableWidth() {
-        if (this.el && // needed. but why?
-            this.props.aspectRatio // aspectRatio is the only height setting that needs availableWidth
-        ) {
-            this.setState({ availableWidth: this.el.offsetWidth });
-        }
+        return (preact.createElement(ToolbarSection, { key: key, name: key, widgetGroups: widgetGroups, title: props.title, navUnit: props.navUnit, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled }));
     }
 }
 
@@ -1765,8 +1708,8 @@ class EventClicking extends internalCommon.Interaction {
         this.handleSegClick = (ev, segEl) => {
             let { component } = this;
             let { context } = component;
-            let seg = internalCommon.getElSeg(segEl);
-            if (seg && // might be the <div> surrounding the more link
+            let eventRange = internalCommon.getElEventRange(segEl);
+            if (eventRange && // might be the <div> surrounding the more link
                 component.isValidSegDownEl(ev.target)) {
                 // our way to simulate a link click for elements that can't be <a> tags
                 // grab before trigger fired in case trigger trashes DOM thru rerendering
@@ -1774,7 +1717,7 @@ class EventClicking extends internalCommon.Interaction {
                 let url = hasUrlContainer ? hasUrlContainer.querySelector('a[href]').href : '';
                 context.emitter.trigger('eventClick', {
                     el: segEl,
-                    event: new internalCommon.EventImpl(component.context, seg.eventRange.def, seg.eventRange.instance),
+                    event: new internalCommon.EventImpl(component.context, eventRange.def, eventRange.instance),
                     jsEvent: ev,
                     view: context.viewApi,
                 });
@@ -1802,7 +1745,7 @@ class EventHovering extends internalCommon.Interaction {
             }
         };
         this.handleSegEnter = (ev, segEl) => {
-            if (internalCommon.getElSeg(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
+            if (internalCommon.getElEventRange(segEl)) { // TODO: better way to make sure not hovering over more+ link or its wrapper
                 this.currentSegEl = segEl;
                 this.triggerEvent('eventMouseEnter', ev, segEl);
             }
@@ -1822,11 +1765,11 @@ class EventHovering extends internalCommon.Interaction {
     triggerEvent(publicEvName, ev, segEl) {
         let { component } = this;
         let { context } = component;
-        let seg = internalCommon.getElSeg(segEl);
+        let eventRange = internalCommon.getElEventRange(segEl);
         if (!ev || component.isValidSegDownEl(ev.target)) {
             context.emitter.trigger(publicEvName, {
                 el: segEl,
-                event: new internalCommon.EventImpl(context, seg.eventRange.def, seg.eventRange.instance),
+                event: new internalCommon.EventImpl(context, eventRange.def, eventRange.instance),
                 jsEvent: ev,
                 view: context.viewApi,
             });
@@ -1834,19 +1777,34 @@ class EventHovering extends internalCommon.Interaction {
     }
 }
 
+class ViewHarness extends preact.Component {
+    render() {
+        const { props } = this;
+        return (preact.createElement("div", { className: [
+                'fc-view-harness',
+                props.height != null
+                    ? 'fc-view-harness-fixedheight'
+                    : props.heightLiquid
+                        ? 'fc-view-harness-liquid'
+                        : props.aspectRatio != null
+                            ? 'fc-view-harness-aspectratio'
+                            : ''
+            ].join(' '), style: {
+                height: props.height,
+                paddingBottom: props.aspectRatio != null
+                    ? `${(1 / props.aspectRatio) * 100}%`
+                    : undefined
+            } }, props.children));
+    }
+}
+
 class CalendarContent extends internalCommon.PureComponent {
     constructor() {
         super(...arguments);
         this.buildViewContext = internalCommon.memoize(internalCommon.buildViewContext);
         this.buildViewPropTransformers = internalCommon.memoize(buildViewPropTransformers);
         this.buildToolbarProps = internalCommon.memoize(buildToolbarProps);
-        this.headerRef = preact.createRef();
-        this.footerRef = preact.createRef();
         this.interactionsStore = {};
-        // eslint-disable-next-line
-        this.state = {
-            viewLabelId: internalCommon.getUniqueDomId(),
-        };
         // Component Registration
         // -----------------------------------------------------------------------------------------------------------------
         this.registerInteractiveComponent = (component, settingsInput) => {
@@ -1870,20 +1828,6 @@ class CalendarContent extends internalCommon.PureComponent {
             }
             delete internalCommon.interactionSettingsStore[component.uid];
         };
-        // Resizing
-        // -----------------------------------------------------------------------------------------------------------------
-        this.resizeRunner = new internalCommon.DelayedRunner(() => {
-            this.props.emitter.trigger('_resize', true); // should window resizes be considered "forced" ?
-            this.props.emitter.trigger('windowResize', { view: this.props.viewApi });
-        });
-        this.handleWindowResize = (ev) => {
-            let { options } = this.props;
-            if (options.handleWindowResize &&
-                ev.target === window // avoid jqui events
-            ) {
-                this.resizeRunner.request(options.windowResizeDelay);
-            }
-        };
     }
     /*
     renders INSIDE of an outer div
@@ -1893,14 +1837,12 @@ class CalendarContent extends internalCommon.PureComponent {
         let { toolbarConfig, options } = props;
         let toolbarProps = this.buildToolbarProps(props.viewSpec, props.dateProfile, props.dateProfileGenerator, props.currentDate, internalCommon.getNow(props.options.now, props.dateEnv), // TODO: use NowTimer????
         props.viewTitle);
-        let viewVGrow = false;
-        let viewHeight = '';
+        let viewHeight;
+        let viewHeightLiquid = false;
         let viewAspectRatio;
-        if (props.isHeightAuto || props.forPrint) {
-            viewHeight = '';
-        }
+        if (props.forPrint || internalCommon.getIsHeightAuto(options)) ;
         else if (options.height != null) {
-            viewVGrow = true;
+            viewHeightLiquid = true;
         }
         else if (options.contentHeight != null) {
             viewHeight = options.contentHeight;
@@ -1909,21 +1851,17 @@ class CalendarContent extends internalCommon.PureComponent {
             viewAspectRatio = Math.max(options.aspectRatio, 0.5); // prevent from getting too tall
         }
         let viewContext = this.buildViewContext(props.viewSpec, props.viewApi, props.options, props.dateProfileGenerator, props.dateEnv, props.theme, props.pluginHooks, props.dispatch, props.getCurrentData, props.emitter, props.calendarApi, this.registerInteractiveComponent, this.unregisterInteractiveComponent);
-        let viewLabelId = (toolbarConfig.header && toolbarConfig.header.hasTitle)
-            ? this.state.viewLabelId
-            : undefined;
         return (preact.createElement(internalCommon.ViewContextType.Provider, { value: viewContext },
-            toolbarConfig.header && (preact.createElement(Toolbar, Object.assign({ ref: this.headerRef, extraClassName: "fc-header-toolbar", model: toolbarConfig.header, titleId: viewLabelId }, toolbarProps))),
-            preact.createElement(ViewHarness, { liquid: viewVGrow, height: viewHeight, aspectRatio: viewAspectRatio, labeledById: viewLabelId },
+            toolbarConfig.header && (preact.createElement(Toolbar, Object.assign({ extraClassName: "fc-header-toolbar", model: toolbarConfig.header }, toolbarProps))),
+            preact.createElement(ViewHarness, { height: viewHeight, heightLiquid: viewHeightLiquid, aspectRatio: viewAspectRatio },
                 this.renderView(props),
                 this.buildAppendContent()),
-            toolbarConfig.footer && (preact.createElement(Toolbar, Object.assign({ ref: this.footerRef, extraClassName: "fc-footer-toolbar", model: toolbarConfig.footer, titleId: "" }, toolbarProps)))));
+            toolbarConfig.footer && (preact.createElement(Toolbar, Object.assign({ extraClassName: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
     }
     componentDidMount() {
         let { props } = this;
         this.calendarInteractions = props.pluginHooks.calendarInteractions
             .map((CalendarInteractionClass) => new CalendarInteractionClass(props));
-        window.addEventListener('resize', this.handleWindowResize);
         let { propSetHandlers } = props.pluginHooks;
         for (let propName in propSetHandlers) {
             propSetHandlers[propName](props[propName], props);
@@ -1939,8 +1877,6 @@ class CalendarContent extends internalCommon.PureComponent {
         }
     }
     componentWillUnmount() {
-        window.removeEventListener('resize', this.handleWindowResize);
-        this.resizeRunner.clear();
         for (let interaction of this.calendarInteractions) {
             interaction.destroy();
         }
@@ -1963,7 +1899,6 @@ class CalendarContent extends internalCommon.PureComponent {
             eventSelection: props.eventSelection,
             eventDrag: props.eventDrag,
             eventResize: props.eventResize,
-            isHeightAuto: props.isHeightAuto,
             forPrint: props.forPrint,
         };
         let transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers);
@@ -1994,6 +1929,9 @@ function buildViewPropTransformers(theClasses) {
     return theClasses.map((TheClass) => new TheClass());
 }
 
+/*
+Vanilla JS API
+*/
 class Calendar extends internalCommon.CalendarImpl {
     constructor(el, optionOverrides = {}) {
         super();
@@ -2018,11 +1956,11 @@ class Calendar extends internalCommon.CalendarImpl {
                 this.isRendered = true;
                 let { currentData } = this;
                 internalCommon.flushSync(() => {
-                    preact.render(preact.createElement(internalCommon.CalendarRoot, { options: currentData.calendarOptions, theme: currentData.theme, emitter: currentData.emitter }, (classNames, height, isHeightAuto, forPrint) => {
+                    preact.render(preact.createElement(internalCommon.CalendarRoot, { options: currentData.calendarOptions, theme: currentData.theme, emitter: currentData.emitter }, (classNames, height, forPrint) => {
                         this.setClassNames(classNames);
                         this.setHeight(height);
                         return (preact.createElement(internalCommon.RenderId.Provider, { value: this.customContentRenderId },
-                            preact.createElement(CalendarContent, Object.assign({ isHeightAuto: isHeightAuto, forPrint: forPrint }, currentData))));
+                            preact.createElement(CalendarContent, Object.assign({ forPrint: forPrint }, currentData))));
                     }), this.el);
                 });
             }
@@ -2139,7 +2077,7 @@ function sliceEvents(props, allDay) {
     return internalCommon.sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
 }
 
-const version = '6.1.15';
+const version = '7.0.0-beta.1';
 
 exports.JsonRequestError = internalCommon.JsonRequestError;
 exports.Calendar = Calendar;

package/index.d.ts

@@ -1,8 +1,9 @@
 import { C as CalendarImpl, a as CalendarOptions, N as NativeFormatterOptions, D as DateInput, P as PluginDefInput, b as PluginDef, L as LocaleInput } from './internal-common.js';
-export { T as AllDayContentArg, U as AllDayMountArg, A as AllowFunc, B as BusinessHoursInput, ah as ButtonHintCompoundInput, a8 as ButtonIconsInput, a9 as ButtonTextCompoundInput, c as CalendarApi, f as CalendarListeners, a as CalendarOptions, u as ClassNamesGenerator, q as ConstraintInput, o as CssDimValue, a7 as CustomButtonInput, v as CustomContentGenerator, ai as CustomRenderingHandler, aj as CustomRenderingStore, D as DateInput, al as DatePointApi, i as DateRangeInput, a3 as DateSelectArg, am as DateSelectionApi, ak as DateSpanApi, h as DateSpanInput, a4 as DateUnselectArg, ac as DatesSetArg, Z as DayCellContentArg, _ as DayCellMountArg, X as DayHeaderContentArg, Y as DayHeaderMountArg, w as DidMountHandler, an as Duration, g as DurationInput, ad as EventAddArg, d as EventApi, ae as EventChangeArg, a1 as EventClickArg, aa as EventContentArg, af as EventDropArg, a2 as EventHoveringArg, m as EventInput, n as EventInputTransformer, ab as EventMountArg, ag as EventRemoveArg, e as EventRenderRange, ao as EventSegment, E as EventSourceApi, k as EventSourceFunc, l as EventSourceFuncArg, j as EventSourceInput, F as FormatterInput, J as JsonRequestError, L as LocaleInput, p as LocaleSingularArg, ap as MoreLinkAction, ar as MoreLinkArg, M as MoreLinkContentArg, as as MoreLinkHandler, H as MoreLinkMountArg, aq as MoreLinkSimpleAction, x as NowIndicatorContentArg, y as NowIndicatorMountArg, O as OverlapFunc, b as PluginDef, P as PluginDefInput, Q as SlotLabelContentArg, R as SlotLabelMountArg, I as SlotLaneContentArg, K as SlotLaneMountArg, S as SpecificViewContentArg, t as SpecificViewMountArg, a6 as ToolbarInput, V as ViewApi, r as ViewComponentType, $ as ViewContentArg, a0 as ViewMountArg, a5 as WeekNumberCalculation, z as WeekNumberContentArg, G as WeekNumberMountArg, W as WillUnmountHandler, s as sliceEvents } from './internal-common.js';
+export { U as AllDayContentArg, X as AllDayMountArg, A as AllowFunc, B as BusinessHoursInput, ai as ButtonHintCompoundInput, a9 as ButtonIconsInput, aa as ButtonTextCompoundInput, c as CalendarApi, f as CalendarListeners, a as CalendarOptions, v as ClassNamesGenerator, r as ConstraintInput, p as CssDimValue, a8 as CustomButtonInput, w as CustomContentGenerator, aj as CustomRenderingHandler, ak as CustomRenderingStore, D as DateInput, am as DatePointApi, j as DateRangeInput, a4 as DateSelectArg, an as DateSelectionApi, al as DateSpanApi, i as DateSpanInput, a5 as DateUnselectArg, ad as DatesSetArg, _ as DayCellContentArg, $ as DayCellMountArg, Y as DayHeaderContentArg, Z as DayHeaderMountArg, x as DidMountHandler, ao as Duration, h as DurationInput, ae as EventAddArg, d as EventApi, af as EventChangeArg, a2 as EventClickArg, ab as EventContentArg, ag as EventDropArg, a3 as EventHoveringArg, n as EventInput, o as EventInputTransformer, ac as EventMountArg, ah as EventRemoveArg, e as EventRenderRange, ap as EventSegment, E as EventSourceApi, l as EventSourceFunc, m as EventSourceFuncArg, k as EventSourceInput, F as FormatterInput, J as JsonRequestError, L as LocaleInput, q as LocaleSingularArg, aq as MoreLinkAction, as as MoreLinkArg, M as MoreLinkContentArg, at as MoreLinkHandler, I as MoreLinkMountArg, ar as MoreLinkSimpleAction, y as NowIndicatorContentArg, z as NowIndicatorMountArg, O as OverlapFunc, b as PluginDef, P as PluginDefInput, R as SlotLabelContentArg, T as SlotLabelMountArg, K as SlotLaneContentArg, Q as SlotLaneMountArg, S as SpecificViewContentArg, u as SpecificViewMountArg, a7 as ToolbarInput, V as ViewApi, t as ViewComponentType, a0 as ViewContentArg, a1 as ViewMountArg, g as ViewOptions, a6 as WeekNumberCalculation, G as WeekNumberContentArg, H as WeekNumberMountArg, W as WillUnmountHandler, s as sliceEvents } from './internal-common.js';
 import 'preact';
 import './preact.js';
 import './index.js';
+import './internal.js';
 
 declare class Calendar extends CalendarImpl {
     el: HTMLElement;