@fullcalendar/core 7.0.0-beta.3 → 7.0.0-beta.5

package/{index.js → esm/index.js}

@@ -1,6 +1,6 @@
-import { m as mergeProps, g as guid, i as isArraysEqual, T as Theme, a as mapHash, B as BaseComponent, V as ViewContextType, C as ContentContainer, b as buildViewClassName, c as greatestDurationDenominator, d as createDuration, e as BASE_OPTION_DEFAULTS, f as arrayToHash, h as filterHash, j as buildEventSourceRefiners, p as parseEventSource, k as formatWithOrdinals, u as unpromisify, l as buildRangeApiWithTimeZone, n as identity, r as requestJson, s as subtractDurations, o as intersectRanges, q as startOfDay, t as addDays, v as hashValuesToArray, w as buildEventApis, D as DelayedRunner, x as createFormatter, y as diffWholeDays, z as memoize, A as memoizeObjArg, E as isPropsEqual, F as Emitter, G as getInitialDate, H as rangeContainsMarker, I as createEmptyEventStore, J as reduceCurrentDate, K as reduceEventStore, L as rezoneEventStoreDates, M as mergeRawOptions, N as BASE_OPTION_REFINERS, O as CALENDAR_LISTENER_REFINERS, P as CALENDAR_OPTION_REFINERS, Q as COMPLEX_OPTION_COMPARATORS, R as VIEW_OPTION_REFINERS, S as DateEnv, U as DateProfileGenerator, W as createEventUi, X as parseBusinessHours, Y as joinClassNames, Z as Interaction, _ as getElEventRange, $ as EventImpl, a0 as listenBySelector, a1 as listenToHoverBySelector, a2 as PureComponent, a3 as buildViewContext, a4 as parseInteractionSettings, a5 as interactionSettingsStore, a6 as getNow, a7 as getIsHeightAuto, a8 as CalendarImpl, a9 as flushSync, aa as CalendarRoot, ab as RenderId, ac as ensureElHasStyles, ad as applyStyleProp, ae as sliceEventStore } from './internal-common.js';
-export { af as JsonRequestError } from './internal-common.js';
-import { createElement, Component, Fragment, render } from 'preact';
+import { m as mergeCalendarOptions, g as guid, i as isArraysEqual, a as mergeViewOptionsMap, b as mapHash, B as BaseComponent, V as ViewContextType, C as ContentContainer, c as generateClassName, d as greatestDurationDenominator, e as createDuration, f as arrayToHash, h as filterHash, j as buildEventSourceRefiners, p as parseEventSource, k as formatWithOrdinals, u as unpromisify, l as buildRangeApiWithTimeZone, n as identity, r as requestJson, s as subtractDurations, o as intersectRanges, q as startOfDay, t as addDays, v as hashValuesToArray, w as buildEventApis, D as DelayedRunner, x as createFormatter, y as diffWholeDays, z as memoize, A as memoizeObjArg, E as isPropsEqualShallow, F as Emitter, G as getInitialDate, H as rangeContainsMarker, I as createEmptyEventStore, J as reduceCurrentDate, K as reduceEventStore, L as rezoneEventStoreDates, M as BASE_OPTION_DEFAULTS, N as BASE_OPTION_REFINERS, O as CALENDAR_LISTENER_REFINERS, P as CALENDAR_ONLY_OPTION_REFINERS, Q as COMPLEX_OPTION_COMPARATORS, R as VIEW_ONLY_OPTION_REFINERS, S as DateEnv, T as DateProfileGenerator, U as createEventUi, W as parseBusinessHours, X as Interaction, Y as getElEventRange, Z as EventImpl, _ as listenBySelector, $ as classNames, a0 as listenToHoverBySelector, a1 as joinArrayishClassNames, a2 as joinClassNames, a3 as PureComponent, a4 as buildViewContext, a5 as getUniqueDomId, a6 as parseInteractionSettings, a7 as interactionSettingsStore, a8 as getIsHeightAuto, a9 as CalendarImpl, aa as flushSync, ab as CalendarRoot, ac as getNow, ad as RenderId, ae as applyStyleProp, af as sliceEventStore } from './internal-common.js';
+export { ag as JsonRequestError, a2 as joinClassNames } from './internal-common.js';
+import { createElement, Fragment, render } from 'preact';
 import 'preact/compat';
 
 const globalLocales = [];
@@ -12,39 +12,34 @@ const MINIMAL_RAW_EN_LOCALE = {
         doy: 4, // 4 days need to be within the year to be considered the first week
     },
     direction: 'ltr',
-    buttonText: {
-        prev: 'prev',
-        next: 'next',
-        prevYear: 'prev year',
-        nextYear: 'next year',
-        year: 'year',
-        today: 'today',
-        month: 'month',
-        week: 'week',
-        day: 'day',
-        list: 'list',
-    },
-    weekText: 'W',
-    weekTextLong: 'Week',
+    todayText: 'Today',
+    prevText: 'Prev',
+    nextText: 'Next',
+    prevYearText: 'Prev year',
+    nextYearText: 'Next year',
+    yearText: 'Year',
+    monthText: 'Month',
+    weekText: 'Week',
+    dayText: 'Day',
+    listText: 'List',
     closeHint: 'Close',
-    timeHint: 'Time',
-    eventHint: 'Event',
-    allDayText: 'all-day',
+    eventsHint: 'Events',
+    allDayText: 'All-day',
+    timedText: 'Timed',
     moreLinkText: 'more',
     noEventsText: 'No events to display',
 };
+/*
+Includes things we don't want other locales to inherit,
+things that derive from other translatable strings.
+*/
 const RAW_EN_LOCALE = Object.assign(Object.assign({}, MINIMAL_RAW_EN_LOCALE), { 
-    // Includes things we don't want other locales to inherit,
-    // things that derive from other translatable strings.
-    buttonHints: {
-        prev: 'Previous $0',
-        next: 'Next $0',
-        today(buttonText, unit) {
-            return (unit === 'day')
-                ? 'Today'
-                : `This ${buttonText}`;
-        },
-    }, viewHint: '$0 view', navLinkHint: 'Go to $0', moreLinkHint(eventCnt) {
+    // if a locale doesn't define this, fall back to weekText, don't use EN
+    weekTextShort: 'W', todayHint: (unitText, unit) => {
+        return (unit === 'day')
+            ? 'Today'
+            : `This ${unitText}`;
+    }, prevHint: 'Previous $0', nextHint: 'Next $0', viewHint: '$0 view', viewChangeHint: 'Change view', navLinkHint: 'Go to $0', moreLinkHint(eventCnt) {
         return `Show ${eventCnt} more event${eventCnt === 1 ? '' : 's'}`;
     } });
 function organizeRawLocales(explicitRawLocales) {
@@ -85,7 +80,7 @@ function queryRawLocale(codes, available) {
     return null;
 }
 function parseLocale(codeArg, codes, raw) {
-    let merged = mergeProps([MINIMAL_RAW_EN_LOCALE, raw], ['buttonText']);
+    let merged = mergeCalendarOptions(MINIMAL_RAW_EN_LOCALE, raw);
     delete merged.code; // don't want this part of the options
     let { week } = merged;
     delete merged.week;
@@ -125,7 +120,6 @@ function createPlugin(input) {
         eventDropTransformers: input.eventDropTransformers || [],
         componentInteractions: input.componentInteractions || [],
         calendarInteractions: input.calendarInteractions || [],
-        themeClasses: input.themeClasses || {},
         eventSourceDefs: input.eventSourceDefs || [],
         cmdFormatter: input.cmdFormatter,
         recurringTypes: input.recurringTypes || [],
@@ -136,6 +130,7 @@ function createPlugin(input) {
         scrollerSyncerClass: input.scrollerSyncerClass || null,
         listenerRefiners: input.listenerRefiners || {},
         optionRefiners: input.optionRefiners || {},
+        optionDefaults: input.optionDefaults ? [input.optionDefaults] : [],
         propSetHandlers: input.propSetHandlers || {},
     };
 }
@@ -163,7 +158,6 @@ function buildPluginHooks(pluginDefs, globalDefs) {
         eventDropTransformers: [],
         componentInteractions: [],
         calendarInteractions: [],
-        themeClasses: {},
         eventSourceDefs: [],
         cmdFormatter: null,
         recurringTypes: [],
@@ -174,6 +168,7 @@ function buildPluginHooks(pluginDefs, globalDefs) {
         scrollerSyncerClass: null,
         listenerRefiners: {},
         optionRefiners: {},
+        optionDefaults: [],
         propSetHandlers: {},
     };
     function addDefs(defs) {
@@ -225,7 +220,7 @@ function combineHooks(hooks0, hooks1) {
         dateSelectionTransformers: hooks0.dateSelectionTransformers.concat(hooks1.dateSelectionTransformers),
         datePointTransforms: hooks0.datePointTransforms.concat(hooks1.datePointTransforms),
         dateSpanTransforms: hooks0.dateSpanTransforms.concat(hooks1.dateSpanTransforms),
-        views: Object.assign(Object.assign({}, hooks0.views), hooks1.views),
+        views: mergeViewOptionsMap(hooks0.views, hooks1.views),
         viewPropsTransformers: hooks0.viewPropsTransformers.concat(hooks1.viewPropsTransformers),
         isPropsValid: hooks1.isPropsValid || hooks0.isPropsValid,
         externalDefTransforms: hooks0.externalDefTransforms.concat(hooks1.externalDefTransforms),
@@ -233,7 +228,6 @@ function combineHooks(hooks0, hooks1) {
         eventDropTransformers: hooks0.eventDropTransformers.concat(hooks1.eventDropTransformers),
         calendarInteractions: hooks0.calendarInteractions.concat(hooks1.calendarInteractions),
         componentInteractions: hooks0.componentInteractions.concat(hooks1.componentInteractions),
-        themeClasses: Object.assign(Object.assign({}, hooks0.themeClasses), hooks1.themeClasses),
         eventSourceDefs: hooks0.eventSourceDefs.concat(hooks1.eventSourceDefs),
         cmdFormatter: hooks1.cmdFormatter || hooks0.cmdFormatter,
         recurringTypes: hooks0.recurringTypes.concat(hooks1.recurringTypes),
@@ -244,6 +238,7 @@ function combineHooks(hooks0, hooks1) {
         scrollerSyncerClass: hooks0.scrollerSyncerClass || hooks1.scrollerSyncerClass,
         listenerRefiners: Object.assign(Object.assign({}, hooks0.listenerRefiners), hooks1.listenerRefiners),
         optionRefiners: Object.assign(Object.assign({}, hooks0.optionRefiners), hooks1.optionRefiners),
+        optionDefaults: hooks0.optionDefaults.concat(hooks1.optionDefaults),
         propSetHandlers: Object.assign(Object.assign({}, hooks0.propSetHandlers), hooks1.propSetHandlers),
     };
 }
@@ -257,32 +252,6 @@ function compareOptionalDates(date0, date1) {
     return new Date(Math.max(date0.valueOf(), date1.valueOf()));
 }
 
-class StandardTheme extends Theme {
-}
-StandardTheme.prototype.classes = {
-    root: 'fc-theme-standard',
-    buttonGroup: 'fc-button-group',
-    button: 'fc-button fc-button-primary',
-    buttonActive: 'fc-button-active',
-};
-StandardTheme.prototype.baseIconClass = 'fc-icon';
-StandardTheme.prototype.iconClasses = {
-    close: 'fc-icon-x',
-    prev: 'fc-icon-chevron-left',
-    next: 'fc-icon-chevron-right',
-    prevYear: 'fc-icon-chevrons-left',
-    nextYear: 'fc-icon-chevrons-right',
-};
-StandardTheme.prototype.rtlIconClasses = {
-    prev: 'fc-icon-chevron-right',
-    next: 'fc-icon-chevron-left',
-    prevYear: 'fc-icon-chevrons-right',
-    nextYear: 'fc-icon-chevrons-left',
-};
-StandardTheme.prototype.iconOverrideOption = 'buttonIcons'; // TODO: make TS-friendly
-StandardTheme.prototype.iconOverrideCustomButtonOption = 'icon';
-StandardTheme.prototype.iconOverridePrefix = 'fc-icon-';
-
 function compileViewDefs(defaultConfigs, overrideConfigs) {
     let hash = {};
     let viewType;
@@ -327,8 +296,8 @@ function buildViewDef(viewType, hash, defaultConfigs, overrideConfigs) {
     return {
         type: viewType,
         component: theComponent,
-        defaults: Object.assign(Object.assign({}, (superDef ? superDef.defaults : {})), (defaultConfig ? defaultConfig.rawOptions : {})),
-        overrides: Object.assign(Object.assign({}, (superDef ? superDef.overrides : {})), (overrideConfig ? overrideConfig.rawOptions : {})),
+        defaults: mergeCalendarOptions(superDef ? superDef.defaults : {}, defaultConfig ? defaultConfig.rawOptions : {}),
+        overrides: mergeCalendarOptions(superDef ? superDef.overrides : {}, overrideConfig ? overrideConfig.rawOptions : {}),
     };
 }
 
@@ -356,16 +325,21 @@ function parseViewConfig(input) {
     };
 }
 function createViewHookComponent(options) {
-    return (viewProps) => (createElement(ViewContextType.Consumer, null, (context) => (createElement(ContentContainer, { tag: "div", className: buildViewClassName(context.viewSpec), renderProps: Object.assign(Object.assign({}, viewProps), { nextDayThreshold: context.options.nextDayThreshold }), generatorName: undefined, customGenerator: options.content, classNameGenerator: options.classNames, didMount: options.didMount, willUnmount: options.willUnmount }))));
+    return (viewProps) => (createElement(ViewContextType.Consumer, null, (context) => {
+        var _a;
+        return (createElement(ContentContainer, { tag: "div", className: generateClassName(options.viewClass, {
+                view: context.viewApi,
+            }), renderProps: Object.assign(Object.assign({}, viewProps), { nextDayThreshold: options.nextDayThreshold }), generatorName: undefined, customGenerator: options.content, classNameGenerator: ((_a = options.class) !== null && _a !== void 0 ? _a : options.className), didMount: options.didMount, willUnmount: options.willUnmount }));
+    }));
 }
 
-function buildViewSpecs(defaultInputs, optionOverrides, dynamicOptionOverrides, localeDefaults) {
+function buildViewSpecs(defaultInputs, optionOverrides, dynamicOptionOverrides) {
     let defaultConfigs = parseViewConfigs(defaultInputs);
     let overrideConfigs = parseViewConfigs(optionOverrides.views);
     let viewDefs = compileViewDefs(defaultConfigs, overrideConfigs);
-    return mapHash(viewDefs, (viewDef) => buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides, localeDefaults));
+    return mapHash(viewDefs, (viewDef) => buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides));
 }
-function buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides, localeDefaults) {
+function buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides) {
     let durationInput = viewDef.overrides.duration ||
         viewDef.defaults.duration ||
         dynamicOptionOverrides.duration ||
@@ -385,34 +359,6 @@ function buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionO
             }
         }
     }
-    let queryButtonText = (optionsSubset) => {
-        let buttonTextMap = optionsSubset.buttonText || {};
-        let buttonTextKey = viewDef.defaults.buttonTextKey;
-        if (buttonTextKey != null && buttonTextMap[buttonTextKey] != null) {
-            return buttonTextMap[buttonTextKey];
-        }
-        if (buttonTextMap[viewDef.type] != null) {
-            return buttonTextMap[viewDef.type];
-        }
-        if (buttonTextMap[singleUnit] != null) {
-            return buttonTextMap[singleUnit];
-        }
-        return null;
-    };
-    let queryButtonTitle = (optionsSubset) => {
-        let buttonHints = optionsSubset.buttonHints || {};
-        let buttonKey = viewDef.defaults.buttonTextKey; // use same key as text
-        if (buttonKey != null && buttonHints[buttonKey] != null) {
-            return buttonHints[buttonKey];
-        }
-        if (buttonHints[viewDef.type] != null) {
-            return buttonHints[viewDef.type];
-        }
-        if (buttonHints[singleUnit] != null) {
-            return buttonHints[singleUnit];
-        }
-        return null;
-    };
     return {
         type: viewDef.type,
         component: viewDef.component,
@@ -421,21 +367,6 @@ function buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionO
         singleUnit,
         optionDefaults: viewDef.defaults,
         optionOverrides: Object.assign(Object.assign({}, singleUnitOverrides), viewDef.overrides),
-        buttonTextOverride: queryButtonText(dynamicOptionOverrides) ||
-            queryButtonText(optionOverrides) || // constructor-specified buttonText lookup hash takes precedence
-            viewDef.overrides.buttonText,
-        buttonTextDefault: queryButtonText(localeDefaults) ||
-            viewDef.defaults.buttonText ||
-            queryButtonText(BASE_OPTION_DEFAULTS) ||
-            viewDef.type,
-        // not DRY
-        buttonTitleOverride: queryButtonTitle(dynamicOptionOverrides) ||
-            queryButtonTitle(optionOverrides) ||
-            viewDef.overrides.buttonHint,
-        buttonTitleDefault: queryButtonTitle(localeDefaults) ||
-            viewDef.defaults.buttonHint ||
-            queryButtonTitle(BASE_OPTION_DEFAULTS),
-        // will eventually fall back to buttonText
     };
 }
 // hack to get memoization working
@@ -710,101 +641,121 @@ function reduceEventResize(currentResize, action) {
     }
 }
 
-function parseToolbars(calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi) {
-    let header = calendarOptions.headerToolbar ? parseToolbar(calendarOptions.headerToolbar, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi) : null;
-    let footer = calendarOptions.footerToolbar ? parseToolbar(calendarOptions.footerToolbar, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi) : null;
+function parseToolbars(calendarOptions, viewSpecs, calendarApi) {
+    let header = calendarOptions.headerToolbar ? parseToolbar(calendarOptions.headerToolbar, calendarOptions, viewSpecs, calendarApi) : null;
+    let footer = calendarOptions.footerToolbar ? parseToolbar(calendarOptions.footerToolbar, calendarOptions, viewSpecs, calendarApi) : null;
     return { header, footer };
 }
-function parseToolbar(sectionStrHash, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi) {
-    let sectionWidgets = {};
+function parseToolbar(sectionStrHash, calendarOptions, viewSpecs, calendarApi) {
+    let isRtl = calendarOptions.direction === 'rtl';
     let viewsWithButtons = [];
     let hasTitle = false;
-    for (let sectionName in sectionStrHash) {
-        let sectionStr = sectionStrHash[sectionName];
-        let sectionRes = parseSection(sectionStr, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi);
-        sectionWidgets[sectionName] = sectionRes.widgets;
+    function processSectionStr(sectionStr) {
+        let sectionRes = parseSection(sectionStr, calendarOptions, viewSpecs, calendarApi);
         viewsWithButtons.push(...sectionRes.viewsWithButtons);
         hasTitle = hasTitle || sectionRes.hasTitle;
+        return sectionRes.widgets;
     }
-    return { sectionWidgets, viewsWithButtons, hasTitle };
+    const sectionWidgets = {
+        start: processSectionStr(sectionStrHash[isRtl ? 'right' : 'left'] || sectionStrHash.start || ''),
+        center: processSectionStr(sectionStrHash.center || ''),
+        end: processSectionStr(sectionStrHash[isRtl ? 'left' : 'right'] || sectionStrHash.end || ''),
+    };
+    return {
+        sectionWidgets,
+        viewsWithButtons,
+        hasTitle,
+    };
 }
 /*
 BAD: querying icons and text here. should be done at render time
 */
-function parseSection(sectionStr, calendarOptions, // defaults+overrides, then refined
-calendarOptionOverrides, // overrides only!, unrefined :(
-theme, viewSpecs, calendarApi) {
-    let isRtl = calendarOptions.direction === 'rtl';
-    let calendarCustomButtons = calendarOptions.customButtons || {};
-    let calendarButtonTextOverrides = calendarOptionOverrides.buttonText || {};
-    let calendarButtonText = calendarOptions.buttonText || {};
-    let calendarButtonHintOverrides = calendarOptionOverrides.buttonHints || {};
-    let calendarButtonHints = calendarOptions.buttonHints || {};
+function parseSection(sectionStr, calendarOptions, viewSpecs, calendarApi) {
+    let calendarButtons = calendarOptions.buttons || {};
+    let customElements = calendarOptions.toolbarElements || {};
     let sectionSubstrs = sectionStr ? sectionStr.split(' ') : [];
     let viewsWithButtons = [];
     let hasTitle = false;
-    let widgets = sectionSubstrs.map((buttonGroupStr) => (buttonGroupStr.split(',').map((buttonName) => {
-        if (buttonName === 'title') {
+    let widgets = sectionSubstrs.map((buttonGroupStr) => (buttonGroupStr.split(',').map((name) => {
+        var _a;
+        if (name === 'title') {
             hasTitle = true;
-            return { buttonName };
+            return { name };
+        }
+        if (customElements[name]) {
+            return { name, customElement: customElements[name] };
         }
-        let customButtonProps;
         let viewSpec;
-        let buttonClick;
-        let buttonIcon; // only one of these will be set
-        let buttonText; // "
+        let buttonInput = calendarButtons[name] || {};
+        let buttonText;
         let buttonHint;
-        // ^ for the title="" attribute, for accessibility
-        if ((customButtonProps = calendarCustomButtons[buttonName])) {
+        let buttonClick;
+        if ((viewSpec = viewSpecs[name])) {
+            viewsWithButtons.push(name);
+            const buttonTextKey = viewSpec.optionDefaults.buttonTextKey;
+            buttonText = buttonInput.text ||
+                (buttonTextKey ? calendarOptions[buttonTextKey] : '') ||
+                (viewSpec.singleUnit ? calendarOptions[viewSpec.singleUnit + 'Text'] : '') ||
+                name;
+            /*
+            buttons{}.hint(viewButtonText, viewName)
+            viewHint(viewButtonText, viewName)
+            */
+            buttonHint = formatWithOrdinals(buttonInput.hint || calendarOptions.viewHint, [buttonText, name], // ordinal arguments
+            buttonText);
             buttonClick = (ev) => {
-                if (customButtonProps.click) {
-                    customButtonProps.click.call(ev.target, ev, ev.target); // TODO: use Calendar this context?
+                var _a;
+                (_a = buttonInput === null || buttonInput === void 0 ? void 0 : buttonInput.click) === null || _a === void 0 ? void 0 : _a.call(buttonInput, ev);
+                if (!ev.defaultPrevented) {
+                    calendarApi.changeView(name);
                 }
             };
-            (buttonIcon = theme.getCustomButtonIconClass(customButtonProps)) ||
-                (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
-                (buttonText = customButtonProps.text);
-            buttonHint = customButtonProps.hint || customButtonProps.text;
-        }
-        else if ((viewSpec = viewSpecs[buttonName])) {
-            viewsWithButtons.push(buttonName);
-            buttonClick = () => {
-                calendarApi.changeView(buttonName);
-            };
-            (buttonText = viewSpec.buttonTextOverride) ||
-                (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
-                (buttonText = viewSpec.buttonTextDefault);
-            let textFallback = viewSpec.buttonTextOverride ||
-                viewSpec.buttonTextDefault;
-            buttonHint = formatWithOrdinals(viewSpec.buttonTitleOverride ||
-                viewSpec.buttonTitleDefault ||
-                calendarOptions.viewHint, [textFallback, buttonName], // view-name = buttonName
-            textFallback);
-        }
-        else if (calendarApi[buttonName]) { // a calendarApi method
-            buttonClick = () => {
-                calendarApi[buttonName]();
-            };
-            (buttonText = calendarButtonTextOverrides[buttonName]) ||
-                (buttonIcon = theme.getIconClass(buttonName, isRtl)) ||
-                (buttonText = calendarButtonText[buttonName]); // everything else is considered default
-            if (buttonName === 'prevYear' || buttonName === 'nextYear') {
-                let prevOrNext = buttonName === 'prevYear' ? 'prev' : 'next';
-                buttonHint = formatWithOrdinals(calendarButtonHintOverrides[prevOrNext] ||
-                    calendarButtonHints[prevOrNext], [
-                    calendarButtonText.year || 'year',
-                    'year',
-                ], calendarButtonText[buttonName]);
+        }
+        else {
+            buttonText = buttonInput.text ||
+                calendarOptions[name + 'Text'] ||
+                name;
+            /*
+            button{}.hint(currentUnitText, currentUnit)
+            prevHint(currentUnitUnitext, currentUnit)
+            nextHint -- same
+            todayHint -- same
+            */
+            if (name === 'prevYear') {
+                buttonHint = formatWithOrdinals(buttonInput.hint || calendarOptions.prevHint, [calendarOptions.yearText, 'year'], buttonText);
+            }
+            else if (name === 'nextYear') {
+                buttonHint = formatWithOrdinals(buttonInput.hint || calendarOptions.nextHint, [calendarOptions.yearText, 'year'], buttonText);
             }
             else {
-                buttonHint = (navUnit) => formatWithOrdinals(calendarButtonHintOverrides[buttonName] ||
-                    calendarButtonHints[buttonName], [
-                    calendarButtonText[navUnit] || navUnit,
-                    navUnit,
-                ], calendarButtonText[buttonName]);
+                buttonHint = (currentUnit) => {
+                    return formatWithOrdinals(buttonInput.hint || calendarOptions[name + 'Hint'], // todayHint/prevHint/nextHint
+                    [calendarOptions[currentUnit + 'Text'], currentUnit], // ordinal arguments
+                    buttonText);
+                };
             }
+            buttonClick = (ev) => {
+                var _a, _b;
+                (_a = buttonInput === null || buttonInput === void 0 ? void 0 : buttonInput.click) === null || _a === void 0 ? void 0 : _a.call(buttonInput, ev);
+                if (!ev.defaultPrevented) {
+                    (_b = calendarApi[name]) === null || _b === void 0 ? void 0 : _b.call(calendarApi);
+                }
+            };
         }
-        return { buttonName, buttonClick, buttonIcon, buttonText, buttonHint };
+        return {
+            name,
+            isView: Boolean(viewSpec),
+            buttonText,
+            buttonHint,
+            buttonDisplay: buttonInput.display,
+            buttonIconClass: buttonInput.iconClass,
+            buttonIconContent: buttonInput.iconContent,
+            buttonClick,
+            buttonIsPrimary: buttonInput.isPrimary || false,
+            buttonClass: (_a = buttonInput.class) !== null && _a !== void 0 ? _a : buttonInput.className,
+            buttonDidMount: buttonInput.didMount,
+            buttonWillUnmount: buttonInput.willUnmount,
+        };
     })));
     return { widgets, viewsWithButtons, hasTitle };
 }
@@ -1021,6 +972,10 @@ function expandRanges(daysOfWeek, startTime, framingRange, dateEnv) {
 const changeHandlerPlugin = createPlugin({
     name: 'change-handler',
     optionChangeHandlers: {
+        controller(controller, context) {
+            // TODO: the initial setting is in CalendarDataManager
+            controller._setApi(context.calendarApi);
+        },
         events(events, context) {
             handleEventSources([events], context);
         },
@@ -1152,14 +1107,14 @@ function buildTitle(dateProfile, viewOptions, dateEnv) {
     else { // for day units or smaller, use the actual day range
         range = dateProfile.activeRange;
     }
-    return dateEnv.formatRange(range.start, range.end, createFormatter(viewOptions.titleFormat || buildTitleFormat(dateProfile)), {
+    return dateEnv.formatRange(range.start, range.end, createFormatter(viewOptions.titleFormat || buildTitleFormat(dateProfile, dateEnv)), {
         isEndExclusive: dateProfile.isRangeAllDay,
         defaultSeparator: viewOptions.titleRangeSeparator,
     });
 }
 // Generates the format string that should be used to generate the title for the current date range.
 // Attempts to compute the most appropriate format if not explicitly specified with `titleFormat`.
-function buildTitleFormat(dateProfile) {
+function buildTitleFormat(dateProfile, dateEnv) {
     let { currentRangeUnit } = dateProfile;
     if (currentRangeUnit === 'year') {
         return { year: 'numeric' };
@@ -1169,8 +1124,12 @@ function buildTitleFormat(dateProfile) {
     }
     let days = diffWholeDays(dateProfile.currentRange.start, dateProfile.currentRange.end);
     if (days !== null && days > 1) {
-        // multi-day range. shorter, like "Sep 9 - 10 2014"
-        return { year: 'numeric', month: 'short', day: 'numeric' };
+        return {
+            year: 'numeric',
+            month: dateEnv.getMonth(dateProfile.activeRange.start) !== dateEnv.getMonth(dateProfile.activeRange.end)
+                ? 'short' // different months? do "Sep - Oct 2014"
+                : 'long', // same month? do "September 2014"
+        };
     }
     // one day. longer, like "September 9 2014"
     return { year: 'numeric', month: 'long', day: 'numeric' };
@@ -1185,13 +1144,12 @@ class CalendarDataManager {
         this.buildLocale = memoize(buildLocale);
         this.buildPluginHooks = buildBuildPluginHooks();
         this.buildDateEnv = memoize(buildDateEnv$1);
-        this.buildTheme = memoize(buildTheme);
         this.parseToolbars = memoize(parseToolbars);
         this.buildViewSpecs = memoize(buildViewSpecs);
         this.buildDateProfileGenerator = memoizeObjArg(buildDateProfileGenerator);
         this.buildViewApi = memoize(buildViewApi);
         this.buildViewUiProps = memoizeObjArg(buildViewUiProps);
-        this.buildEventUiBySource = memoize(buildEventUiBySource, isPropsEqual);
+        this.buildEventUiBySource = memoize(buildEventUiBySource, isPropsEqualShallow);
         this.buildEventUiBases = memoize(buildEventUiBases);
         this.parseContextBusinessHours = memoizeObjArg(parseContextBusinessHours);
         this.buildTitle = memoize(buildTitle);
@@ -1212,13 +1170,19 @@ class CalendarDataManager {
         this.actionRunner.pause();
         let dynamicOptionOverrides = {};
         let optionsData = this.computeOptionsData(props.optionOverrides, dynamicOptionOverrides, props.calendarApi);
-        let currentViewType = optionsData.calendarOptions.initialView || optionsData.pluginHooks.initialView;
+        let currentViewType = optionsData.calendarOptions.initialView ||
+            optionsData.pluginHooks.initialView;
         let currentViewData = this.computeCurrentViewData(currentViewType, optionsData, props.optionOverrides, dynamicOptionOverrides);
         // wire things up
         // TODO: not DRY
         props.calendarApi.currentDataManager = this;
         this.emitter.setThisContext(props.calendarApi);
         this.emitter.setOptions(currentViewData.options);
+        // NOTE: subsequent updates detected by options-change-handlers.ts
+        const controllerOption = optionsData.calendarOptions.controller;
+        if (controllerOption) {
+            controllerOption._setApi(props.calendarApi);
+        }
         let currentDate = getInitialDate(optionsData.calendarOptions, optionsData.dateEnv);
         let dateProfile = currentViewData.dateProfileGenerator.build(currentDate);
         if (!rangeContainsMarker(dateProfile.activeRange, currentDate)) {
@@ -1360,7 +1324,8 @@ class CalendarDataManager {
         let oldData = this.data;
         let optionsData = this.computeOptionsData(props.optionOverrides, state.dynamicOptionOverrides, props.calendarApi);
         let currentViewData = this.computeCurrentViewData(state.currentViewType, optionsData, props.optionOverrides, state.dynamicOptionOverrides);
-        let data = this.data = Object.assign(Object.assign(Object.assign({ viewTitle: this.buildTitle(state.dateProfile, currentViewData.options, optionsData.dateEnv), calendarApi: props.calendarApi, dispatch: this.dispatch, emitter: this.emitter, getCurrentData: this.getCurrentData }, optionsData), currentViewData), state);
+        let viewTitle = this.buildTitle(state.dateProfile, currentViewData.options, optionsData.dateEnv);
+        let data = this.data = Object.assign(Object.assign(Object.assign({ viewTitle, calendarApi: props.calendarApi, dispatch: this.dispatch, emitter: this.emitter, getCurrentData: this.getCurrentData }, optionsData), currentViewData), state);
         let changeHandlers = optionsData.pluginHooks.optionChangeHandlers;
         let oldCalendarOptions = oldData && oldData.calendarOptions;
         let newCalendarOptions = optionsData.calendarOptions;
@@ -1390,18 +1355,15 @@ class CalendarDataManager {
             dynamicOptionOverrides === this.stableDynamicOptionOverrides) {
             return this.stableCalendarOptionsData;
         }
-        let { refinedOptions, pluginHooks, localeDefaults, availableLocaleData, extra, } = this.processRawCalendarOptions(optionOverrides, dynamicOptionOverrides);
-        warnUnknownOptions(extra);
-        let dateEnv = this.buildDateEnv(refinedOptions.timeZone, refinedOptions.locale, refinedOptions.weekNumberCalculation, refinedOptions.firstDay, refinedOptions.weekText, pluginHooks, availableLocaleData, refinedOptions.defaultRangeSeparator);
-        let viewSpecs = this.buildViewSpecs(pluginHooks.views, this.stableOptionOverrides, this.stableDynamicOptionOverrides, localeDefaults);
-        let theme = this.buildTheme(refinedOptions, pluginHooks);
-        let toolbarConfig = this.parseToolbars(refinedOptions, this.stableOptionOverrides, theme, viewSpecs, calendarApi);
+        let { refinedOptions, pluginHooks, localeDefaults, availableLocaleData, } = this.processRawCalendarOptions(optionOverrides, dynamicOptionOverrides);
+        let dateEnv = this.buildDateEnv(refinedOptions.timeZone, refinedOptions.locale, refinedOptions.weekNumberCalculation, refinedOptions.firstDay, refinedOptions.weekText, refinedOptions.weekTextShort, pluginHooks, availableLocaleData, refinedOptions.defaultRangeSeparator);
+        let viewSpecs = this.buildViewSpecs(pluginHooks.views, this.stableOptionOverrides, this.stableDynamicOptionOverrides);
+        let toolbarConfig = this.parseToolbars(refinedOptions, viewSpecs, calendarApi);
         return this.stableCalendarOptionsData = {
             calendarOptions: refinedOptions,
             pluginHooks,
             dateEnv,
             viewSpecs,
-            theme,
             toolbarConfig,
             localeDefaults,
             availableRawLocales: availableLocaleData.map,
@@ -1409,23 +1371,13 @@ class CalendarDataManager {
     }
     // always called from behind a memoizer
     processRawCalendarOptions(optionOverrides, dynamicOptionOverrides) {
-        let { locales, locale } = mergeRawOptions([
-            BASE_OPTION_DEFAULTS,
-            optionOverrides,
-            dynamicOptionOverrides,
-        ]);
+        let { locales, locale } = mergeCalendarOptions(BASE_OPTION_DEFAULTS, optionOverrides, dynamicOptionOverrides);
         let availableLocaleData = this.organizeRawLocales(locales);
         let availableRawLocales = availableLocaleData.map;
         let localeDefaults = this.buildLocale(locale || availableLocaleData.defaultCode, availableRawLocales).options;
         let pluginHooks = this.buildPluginHooks(optionOverrides.plugins || [], globalPlugins);
-        let refiners = this.currentCalendarOptionsRefiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASE_OPTION_REFINERS), CALENDAR_LISTENER_REFINERS), CALENDAR_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
-        let extra = {};
-        let raw = mergeRawOptions([
-            BASE_OPTION_DEFAULTS,
-            localeDefaults,
-            optionOverrides,
-            dynamicOptionOverrides,
-        ]);
+        let refiners = this.currentCalendarOptionsRefiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASE_OPTION_REFINERS), CALENDAR_LISTENER_REFINERS), CALENDAR_ONLY_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+        let raw = mergeCalendarOptions(BASE_OPTION_DEFAULTS, ...pluginHooks.optionDefaults, localeDefaults, filterKnownOptions(mergeCalendarOptions(optionOverrides, dynamicOptionOverrides), refiners));
         let refined = {};
         let currentRaw = this.currentCalendarOptionsInput;
         let currentRefined = this.currentCalendarOptionsRefined;
@@ -1433,16 +1385,17 @@ class CalendarDataManager {
         for (let optionName in raw) {
             if (this.optionsForRefining.indexOf(optionName) === -1 && (raw[optionName] === currentRaw[optionName] || (COMPLEX_OPTION_COMPARATORS[optionName] &&
                 (optionName in currentRaw) &&
-                COMPLEX_OPTION_COMPARATORS[optionName](currentRaw[optionName], raw[optionName])))) {
+                COMPLEX_OPTION_COMPARATORS[optionName](currentRaw[optionName], raw[optionName])) || (
+            // see options-manip
+            currentRaw[optionName] && currentRaw[optionName].parts &&
+                raw[optionName] && raw[optionName].parts &&
+                isArraysEqual(currentRaw[optionName].parts, raw[optionName].parts)))) {
                 refined[optionName] = currentRefined[optionName];
             }
             else if (refiners[optionName]) {
                 refined[optionName] = refiners[optionName](raw[optionName]);
                 anyChanges = true;
             }
-            else {
-                extra[optionName] = currentRaw[optionName];
-            }
         }
         if (anyChanges) {
             this.currentCalendarOptionsInput = raw;
@@ -1458,7 +1411,6 @@ class CalendarDataManager {
             pluginHooks,
             availableLocaleData,
             localeDefaults,
-            extra,
         };
     }
     _computeCurrentViewData(viewType, optionsData, optionOverrides, dynamicOptionOverrides) {
@@ -1466,8 +1418,7 @@ class CalendarDataManager {
         if (!viewSpec) {
             throw new Error(`viewType "${viewType}" is not available. Please make sure you've loaded all neccessary plugins`);
         }
-        let { refinedOptions, extra } = this.processRawViewOptions(viewSpec, optionsData.pluginHooks, optionsData.localeDefaults, optionOverrides, dynamicOptionOverrides);
-        warnUnknownOptions(extra);
+        let { refinedOptions } = this.processRawViewOptions(viewSpec, optionsData.pluginHooks, optionsData.localeDefaults, optionOverrides, dynamicOptionOverrides);
         let dateProfileGenerator = this.buildDateProfileGenerator({
             dateProfileGeneratorClass: viewSpec.optionDefaults.dateProfileGeneratorClass,
             duration: viewSpec.duration,
@@ -1492,24 +1443,19 @@ class CalendarDataManager {
         return { viewSpec, options: refinedOptions, dateProfileGenerator, viewApi };
     }
     processRawViewOptions(viewSpec, pluginHooks, localeDefaults, optionOverrides, dynamicOptionOverrides) {
-        let raw = mergeRawOptions([
-            BASE_OPTION_DEFAULTS,
-            viewSpec.optionDefaults,
-            localeDefaults,
-            optionOverrides,
-            viewSpec.optionOverrides,
-            dynamicOptionOverrides,
-        ]);
-        let refiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASE_OPTION_REFINERS), CALENDAR_LISTENER_REFINERS), CALENDAR_OPTION_REFINERS), VIEW_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+        let refiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, BASE_OPTION_REFINERS), CALENDAR_LISTENER_REFINERS), CALENDAR_ONLY_OPTION_REFINERS), VIEW_ONLY_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+        let raw = mergeCalendarOptions(BASE_OPTION_DEFAULTS, ...pluginHooks.optionDefaults, viewSpec.optionDefaults, localeDefaults, filterKnownOptions(mergeCalendarOptions(optionOverrides, viewSpec.optionOverrides, dynamicOptionOverrides), refiners));
         let refined = {};
         let currentRaw = this.currentViewOptionsInput;
         let currentRefined = this.currentViewOptionsRefined;
         let anyChanges = false;
-        let extra = {};
         for (let optionName in raw) {
-            if (raw[optionName] === currentRaw[optionName] ||
-                (COMPLEX_OPTION_COMPARATORS[optionName] &&
-                    COMPLEX_OPTION_COMPARATORS[optionName](raw[optionName], currentRaw[optionName]))) {
+            if (raw[optionName] === currentRaw[optionName] || (COMPLEX_OPTION_COMPARATORS[optionName] &&
+                COMPLEX_OPTION_COMPARATORS[optionName](raw[optionName], currentRaw[optionName])) || (
+            // see options-manip
+            currentRaw[optionName] && currentRaw[optionName].parts &&
+                raw[optionName] && raw[optionName].parts &&
+                isArraysEqual(currentRaw[optionName].parts, raw[optionName].parts))) {
                 refined[optionName] = currentRefined[optionName];
             }
             else {
@@ -1523,9 +1469,6 @@ class CalendarDataManager {
                 else if (refiners[optionName]) {
                     refined[optionName] = refiners[optionName](raw[optionName]);
                 }
-                else {
-                    extra[optionName] = raw[optionName];
-                }
                 anyChanges = true;
             }
         }
@@ -1536,11 +1479,10 @@ class CalendarDataManager {
         return {
             rawOptions: this.currentViewOptionsInput,
             refinedOptions: this.currentViewOptionsRefined,
-            extra,
         };
     }
 }
-function buildDateEnv$1(timeZone, explicitLocale, weekNumberCalculation, firstDay, weekText, pluginHooks, availableLocaleData, defaultSeparator) {
+function buildDateEnv$1(timeZone, explicitLocale, weekNumberCalculation, firstDay, weekText, weekTextShort, pluginHooks, availableLocaleData, defaultSeparator) {
     let locale = buildLocale(explicitLocale || availableLocaleData.defaultCode, availableLocaleData.map);
     return new DateEnv({
         calendarSystem: 'gregory',
@@ -1550,14 +1492,11 @@ function buildDateEnv$1(timeZone, explicitLocale, weekNumberCalculation, firstDa
         weekNumberCalculation,
         firstDay,
         weekText,
+        weekTextShort,
         cmdFormatter: pluginHooks.cmdFormatter,
         defaultSeparator,
     });
 }
-function buildTheme(options, pluginHooks) {
-    let ThemeClass = pluginHooks.themeClasses[options.themeSystem] || StandardTheme;
-    return new ThemeClass(options);
-}
 function buildDateProfileGenerator(props) {
     let DateProfileGeneratorClass = props.dateProfileGeneratorClass || DateProfileGenerator;
     return new DateProfileGeneratorClass(props);
@@ -1568,8 +1507,13 @@ function buildViewApi(type, getCurrentData, dateEnv) {
 function buildEventUiBySource(eventSources) {
     return mapHash(eventSources, (eventSource) => eventSource.ui);
 }
+/*
+The result of this is processed by compileEventUi
+*/
 function buildEventUiBases(eventDefs, eventUiSingleBase, eventUiBySource) {
-    let eventUiBases = { '': eventUiSingleBase };
+    let eventUiBases = {
+        '': eventUiSingleBase, // fallback
+    };
     for (let defId in eventDefs) {
         let def = eventDefs[defId];
         if (def.sourceId && eventUiBySource[def.sourceId]) {
@@ -1579,7 +1523,7 @@ function buildEventUiBases(eventDefs, eventUiSingleBase, eventUiBySource) {
     return eventUiBases;
 }
 function buildViewUiProps(calendarContext) {
-    let { options } = calendarContext;
+    const { options } = calendarContext;
     return {
         eventUiSingleBase: createEventUi({
             display: options.eventDisplay,
@@ -1589,11 +1533,9 @@ function buildViewUiProps(calendarContext) {
             constraint: options.eventConstraint,
             overlap: typeof options.eventOverlap === 'boolean' ? options.eventOverlap : undefined,
             allow: options.eventAllow,
-            backgroundColor: options.eventBackgroundColor,
-            borderColor: options.eventBorderColor,
-            textColor: options.eventTextColor,
-            color: options.eventColor,
-            // classNames: options.eventClassNames // render hook will handle this
+            // color: options.eventColor, // StandardEvent/BgEvent will handle this
+            // contrastColor: options.eventContrastColor, // StandardEvent/BgEvent will handle this
+            // className: options.eventClass // render hook will handle this
         }, calendarContext),
         selectionConfig: createEventUi({
             constraint: options.selectConstraint,
@@ -1613,78 +1555,14 @@ function computeIsLoading(state, context) {
 function parseContextBusinessHours(calendarContext) {
     return parseBusinessHours(calendarContext.options.businessHours, calendarContext);
 }
-function warnUnknownOptions(options, viewName) {
-    for (let optionName in options) {
-        console.warn(`Unknown option '${optionName}'` +
-            (viewName ? ` for view '${viewName}'` : ''));
-    }
-}
-
-class ToolbarSection extends BaseComponent {
-    render() {
-        let children = this.props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
-        return createElement('div', {
-            className: 'fc-toolbar-section fc-toolbar-' + this.props.name
-        }, ...children);
-    }
-    renderWidgetGroup(widgetGroup) {
-        let { props } = this;
-        let { theme } = this.context;
-        let children = [];
-        let isOnlyButtons = true;
-        for (let widget of widgetGroup) {
-            let { buttonName, buttonClick, buttonText, buttonIcon, buttonHint } = widget;
-            if (buttonName === 'title') {
-                isOnlyButtons = false;
-                children.push(createElement("h2", { className: "fc-toolbar-title" }, props.title));
-            }
-            else {
-                let isPressed = buttonName === props.activeButton;
-                let isDisabled = (!props.isTodayEnabled && buttonName === 'today') ||
-                    (!props.isPrevEnabled && buttonName === 'prev') ||
-                    (!props.isNextEnabled && buttonName === 'next');
-                children.push(createElement("button", { type: "button", title: typeof buttonHint === 'function' ? buttonHint(props.navUnit) : buttonHint, disabled: isDisabled, "aria-pressed": isPressed, className: joinClassNames(`fc-${buttonName}-button`, theme.getClassName('button'), isPressed && theme.getClassName('buttonActive')), onClick: buttonClick }, buttonText || (buttonIcon ? createElement("span", { className: buttonIcon, role: "img" }) : '')));
-            }
-        }
-        if (children.length > 1) {
-            let groupClassName = (isOnlyButtons && theme.getClassName('buttonGroup')) || '';
-            return createElement('div', { className: groupClassName }, ...children);
-        }
-        return children[0];
-    }
-}
-
-class Toolbar extends BaseComponent {
-    render() {
-        let { model, className } = this.props;
-        let forceLtr = false;
-        let startContent;
-        let endContent;
-        let sectionWidgets = model.sectionWidgets;
-        let centerContent = sectionWidgets.center;
-        if (sectionWidgets.left) {
-            forceLtr = true;
-            startContent = sectionWidgets.left;
-        }
-        else {
-            startContent = sectionWidgets.start;
-        }
-        if (sectionWidgets.right) {
-            forceLtr = true;
-            endContent = sectionWidgets.right;
+function filterKnownOptions(options, optionRefiners) {
+    const knownOptions = {};
+    for (const optionName in options) {
+        if (optionRefiners[optionName]) {
+            knownOptions[optionName] = options[optionName];
         }
-        else {
-            endContent = sectionWidgets.end;
-        }
-        return (createElement("div", { className: joinClassNames(className, 'fc-toolbar', forceLtr && 'fc-toolbar-ltr') },
-            this.renderSection('start', startContent || []),
-            this.renderSection('center', centerContent || []),
-            this.renderSection('end', endContent || [])));
-    }
-    renderSection(key, widgetGroups) {
-        let { props } = this;
-        return (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 }));
     }
+    return knownOptions;
 }
 
 /*
@@ -1707,7 +1585,7 @@ class EventClicking extends Interaction {
                 });
             }
         };
-        this.destroy = listenBySelector(settings.el, 'click', '.fc-event', // on both fg and bg events
+        this.destroy = listenBySelector(settings.el, 'click', `.${classNames.internalEvent}`, // on both fg and bg events
         this.handleSegClick);
     }
 }
@@ -1737,7 +1615,7 @@ class EventHovering extends Interaction {
                 this.triggerEvent('eventMouseLeave', ev, segEl);
             }
         };
-        this.removeHoverListeners = listenToHoverBySelector(settings.el, '.fc-event', // on both fg and bg events
+        this.removeHoverListeners = listenToHoverBySelector(settings.el, `.${classNames.internalEvent}`, // on both fg and bg events
         this.handleSegEnter, this.handleSegLeave);
     }
     destroy() {
@@ -1758,20 +1636,123 @@ class EventHovering extends Interaction {
     }
 }
 
-class ViewHarness extends Component {
+class ButtonIcon extends BaseComponent {
     render() {
-        const { props } = this;
-        return (createElement("div", { className: joinClassNames('fc-view-outer', props.height != null
-                ? 'fc-view-outer-static'
-                : props.heightLiquid
-                    ? 'fc-view-outer-liquid'
-                    : props.aspectRatio != null
-                        && 'fc-view-outer-aspect-ratio'), style: {
-                height: props.height,
-                paddingBottom: props.aspectRatio != null
-                    ? `${(1 / props.aspectRatio) * 100}%`
-                    : undefined
-            } }, props.children));
+        const { contentGenerator, className } = this.props;
+        if (contentGenerator) {
+            // TODO: somehow give className to the svg?
+            return (createElement(ContentContainer, { tag: 'span', style: { display: 'contents' }, attrs: { 'aria-hidden': true }, renderProps: {}, generatorName: undefined, customGenerator: contentGenerator }));
+        }
+        if (className !== undefined) {
+            return (createElement("span", { "aria-hidden": true, className: className }));
+        }
+    }
+}
+
+class ToolbarSection extends BaseComponent {
+    render() {
+        let { props } = this;
+        let { options } = this.context;
+        let children = props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
+        return createElement('div', {
+            className: generateClassName(options.toolbarSectionClass, { name: props.name }),
+        }, ...children);
+    }
+    renderWidgetGroup(widgetGroup) {
+        var _a;
+        let { props, context } = this;
+        let { options } = context;
+        let children = [];
+        let isOnlyButtons = true;
+        let isOnlyView = true;
+        for (const widget of widgetGroup) {
+            const { name, isView } = widget;
+            if (name === 'title') {
+                isOnlyButtons = false;
+            }
+            else if (!isView) {
+                isOnlyView = false;
+            }
+        }
+        for (let widget of widgetGroup) {
+            let { name, customElement, buttonHint } = widget;
+            if (name === 'title') {
+                children.push(createElement("div", { role: 'heading', "aria-level": options.headingLevel, id: props.titleId, className: joinArrayishClassNames(options.toolbarTitleClass) }, props.title));
+            }
+            else if (customElement) {
+                children.push(createElement(ContentContainer, { tag: 'span', style: { display: 'contents' }, renderProps: {}, generatorName: undefined, customGenerator: customElement }));
+            }
+            else {
+                let isSelected = name === props.selectedButton;
+                let isDisabled = (!props.isTodayEnabled && name === 'today') ||
+                    (!props.isPrevEnabled && name === 'prev') ||
+                    (!props.isNextEnabled && name === 'next');
+                let buttonDisplay = (_a = widget.buttonDisplay) !== null && _a !== void 0 ? _a : options.buttonDisplay;
+                if (buttonDisplay === 'auto') {
+                    buttonDisplay = (widget.buttonIconContent || widget.buttonIconClass)
+                        ? 'icon'
+                        : 'text';
+                }
+                let iconNode;
+                if (buttonDisplay !== 'text') {
+                    iconNode = (createElement(ButtonIcon, { className: widget.buttonIconClass, contentGenerator: widget.buttonIconContent }));
+                }
+                let inGroup = widgetGroup.length > 1 && isOnlyButtons;
+                let inViewGroup = inGroup && isOnlyView;
+                let renderProps = {
+                    name,
+                    text: widget.buttonText,
+                    isPrimary: widget.buttonIsPrimary,
+                    isSelected,
+                    isDisabled,
+                    isIconOnly: buttonDisplay === 'icon',
+                    inGroup,
+                    inSelectGroup: inViewGroup,
+                };
+                children.push(createElement(ContentContainer, { tag: 'button', attrs: Object.assign(Object.assign({ type: 'button', disabled: isDisabled }, ((isOnlyButtons && isOnlyView)
+                        ? { 'role': 'tab', 'aria-selected': isSelected }
+                        : { 'aria-pressed': isSelected })), { 'aria-label': typeof buttonHint === 'function'
+                            ? buttonHint(props.navUnit)
+                            : buttonHint, onClick: widget.buttonClick }), className: joinClassNames(generateClassName(options.buttonClass, renderProps), !isDisabled && classNames.cursorPointer, inGroup && joinClassNames(isSelected ? classNames.z1 : classNames.z0, classNames.focusZ2)), renderProps: renderProps, generatorName: undefined, classNameGenerator: widget.buttonClass, didMount: widget.buttonDidMount, willUnmount: widget.buttonWillUnmount }, () => (buttonDisplay === 'text'
+                    ? widget.buttonText
+                    : buttonDisplay === 'icon'
+                        ? iconNode
+                        : buttonDisplay === 'icon-text'
+                            ? (createElement(Fragment, null,
+                                iconNode,
+                                widget.buttonText))
+                            : (createElement(Fragment, null,
+                                widget.buttonText,
+                                iconNode)) // text-icon
+                )));
+            }
+        }
+        if (children.length > 1) {
+            return createElement('div', {
+                role: (isOnlyButtons && isOnlyView) ? 'tablist' : undefined,
+                'aria-label': (isOnlyButtons && isOnlyView) ? options.viewChangeHint : undefined,
+                className: joinClassNames(generateClassName(options.buttonGroupClass, { isSelectGroup: isOnlyView }), classNames.isolate),
+            }, ...children);
+        }
+        return children[0];
+    }
+}
+
+class Toolbar extends BaseComponent {
+    render() {
+        let { props } = this;
+        let options = this.context.options;
+        let { sectionWidgets } = props.model;
+        return (createElement("div", { className: joinClassNames(props.className, generateClassName(options.toolbarClass, {
+                borderlessX: props.borderlessX,
+            })) },
+            this.renderSection('start', sectionWidgets.start),
+            this.renderSection('center', sectionWidgets.center),
+            this.renderSection('end', sectionWidgets.end)));
+    }
+    renderSection(key, widgetGroups) {
+        let { props } = this;
+        return (createElement(ToolbarSection, { key: key, name: key, widgetGroups: widgetGroups, title: props.title, titleId: props.titleId, navUnit: props.navUnit, selectedButton: props.selectedButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled }));
     }
 }
 
@@ -1780,8 +1761,8 @@ class CalendarContent extends PureComponent {
         super(...arguments);
         this.buildViewContext = memoize(buildViewContext);
         this.buildViewPropTransformers = memoize(buildViewPropTransformers);
-        this.buildToolbarProps = memoize(buildToolbarProps);
         this.interactionsStore = {};
+        this.viewTitleId = getUniqueDomId();
         // Component Registration
         // -----------------------------------------------------------------------------------------------------------------
         this.registerInteractiveComponent = (component, settingsInput) => {
@@ -1813,10 +1794,9 @@ class CalendarContent extends PureComponent {
     renders INSIDE of an outer div
     */
     render() {
+        var _a;
         let { props } = this;
-        let { toolbarConfig, options } = props;
-        let toolbarProps = this.buildToolbarProps(props.viewSpec, props.dateProfile, props.dateProfileGenerator, props.currentDate, getNow(props.options.now, props.dateEnv), // TODO: use NowTimer????
-        props.viewTitle);
+        let { toolbarProps, toolbarConfig, options } = props;
         let viewHeight;
         let viewHeightLiquid = false;
         let viewAspectRatio;
@@ -1830,13 +1810,19 @@ class CalendarContent extends PureComponent {
         else {
             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 viewContext = this.buildViewContext(props.viewSpec, props.viewApi, props.options, props.dateProfileGenerator, props.dateEnv, props.pluginHooks, props.dispatch, props.getCurrentData, props.emitter, props.calendarApi, this.registerInteractiveComponent, this.unregisterInteractiveComponent);
+        let borderlessX = (_a = options.borderlessX) !== null && _a !== void 0 ? _a : options.borderless; // TODO: DRY
         return (createElement(ViewContextType.Provider, { value: viewContext },
-            toolbarConfig.header && (createElement(Toolbar, Object.assign({ className: "fc-header-toolbar", model: toolbarConfig.header }, toolbarProps))),
-            createElement(ViewHarness, { height: viewHeight, heightLiquid: viewHeightLiquid, aspectRatio: viewAspectRatio },
-                this.renderView(props),
+            toolbarConfig.header && (createElement(Toolbar, Object.assign({ className: generateClassName(options.headerToolbarClass, { borderlessX }), model: toolbarConfig.header, borderlessX: borderlessX, titleId: this.viewTitleId }, toolbarProps))),
+            createElement("div", { className: joinClassNames(classNames.flexCol, classNames.rel, viewHeightLiquid && classNames.liquid), style: {
+                    height: viewHeight,
+                    paddingBottom: viewAspectRatio != null
+                        ? `${(1 / viewAspectRatio) * 100}%`
+                        : undefined
+                } },
+                this.renderView(joinClassNames((viewHeightLiquid || viewHeight) && classNames.liquid, viewAspectRatio != null && classNames.fill, classNames.internalView), toolbarProps.title),
                 this.buildAppendContent()),
-            toolbarConfig.footer && (createElement(Toolbar, Object.assign({ className: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
+            toolbarConfig.footer && (createElement(Toolbar, Object.assign({ className: generateClassName(options.footerToolbarClass, { borderlessX }), model: toolbarConfig.footer, borderlessX: borderlessX }, toolbarProps)))));
     }
     componentDidMount() {
         let { props } = this;
@@ -1867,10 +1853,17 @@ class CalendarContent extends PureComponent {
         let children = props.pluginHooks.viewContainerAppends.map((buildAppendContent) => buildAppendContent(props));
         return createElement(Fragment, {}, ...children);
     }
-    renderView(props) {
-        let { pluginHooks } = props;
-        let { viewSpec } = props;
+    renderView(className, title) {
+        var _a, _b, _c;
+        let { props } = this;
+        let { pluginHooks, viewSpec, toolbarConfig, options } = props;
+        // TODO: DRY
+        let { borderless } = options;
+        let calendarBorderlessX = (_a = options.borderlessX) !== null && _a !== void 0 ? _a : borderless;
+        let calendarBorderlessTop = (_b = options.borderlessTop) !== null && _b !== void 0 ? _b : borderless;
+        let calendarBorderlessBottom = (_c = options.borderlessBottom) !== null && _c !== void 0 ? _c : borderless;
         let viewProps = {
+            className,
             dateProfile: props.dateProfile,
             businessHours: props.businessHours,
             eventStore: props.renderableEventStore,
@@ -1880,6 +1873,12 @@ class CalendarContent extends PureComponent {
             eventDrag: props.eventDrag,
             eventResize: props.eventResize,
             forPrint: props.forPrint,
+            labelId: toolbarConfig.header && toolbarConfig.header.hasTitle ? this.viewTitleId : undefined,
+            labelStr: toolbarConfig.header && toolbarConfig.header.hasTitle ? undefined : title,
+            borderlessX: calendarBorderlessX,
+            borderlessTop: toolbarConfig.header ? false : calendarBorderlessTop,
+            borderlessBottom: toolbarConfig.footer ? false : calendarBorderlessBottom,
+            noEdgeEffects: calendarBorderlessX || calendarBorderlessTop || calendarBorderlessBottom,
         };
         let transformers = this.buildViewPropTransformers(pluginHooks.viewPropsTransformers);
         for (let transformer of transformers) {
@@ -1889,20 +1888,6 @@ class CalendarContent extends PureComponent {
         return (createElement(ViewComponent, Object.assign({}, viewProps)));
     }
 }
-function buildToolbarProps(viewSpec, dateProfile, dateProfileGenerator, currentDate, now, title) {
-    // don't force any date-profiles to valid date profiles (the `false`) so that we can tell if it's invalid
-    let todayInfo = dateProfileGenerator.build(now, undefined, false); // TODO: need `undefined` or else INFINITE LOOP for some reason
-    let prevInfo = dateProfileGenerator.buildPrev(dateProfile, currentDate, false);
-    let nextInfo = dateProfileGenerator.buildNext(dateProfile, currentDate, false);
-    return {
-        title,
-        activeButton: viewSpec.type,
-        navUnit: viewSpec.singleUnit,
-        isTodayEnabled: todayInfo.isValid && !rangeContainsMarker(dateProfile.currentRange, now),
-        isPrevEnabled: prevInfo.isValid,
-        isNextEnabled: nextInfo.isValid,
-    };
-}
 // Plugin
 // -----------------------------------------------------------------------------------------------------------------
 function buildViewPropTransformers(theClasses) {
@@ -1915,9 +1900,10 @@ Vanilla JS API
 class Calendar extends CalendarImpl {
     constructor(el, optionOverrides = {}) {
         super();
+        this.buildToolbarProps = memoize(buildToolbarProps);
         this.isRendering = false;
         this.isRendered = false;
-        this.currentClassNames = [];
+        this.currentClassName = '';
         this.customContentRenderId = 0;
         this.handleAction = (action) => {
             // actions we know we want to render immediately
@@ -1936,22 +1922,25 @@ class Calendar extends CalendarImpl {
                 this.isRendered = true;
                 let { currentData } = this;
                 flushSync(() => {
-                    render(createElement(CalendarRoot, { options: currentData.calendarOptions, theme: currentData.theme, emitter: currentData.emitter }, (classNames, height, forPrint) => {
-                        this.setClassNames(classNames);
+                    render(createElement(CalendarRoot, { options: currentData.calendarOptions, emitter: currentData.emitter }, (isRtl, className, height, forPrint) => {
+                        this.setIsRtl(isRtl);
+                        this.setClassName(className);
                         this.setHeight(height);
+                        const toolbarProps = this.toolbarProps = this.buildToolbarProps(currentData.viewSpec, currentData.dateProfile, currentData.dateProfileGenerator, currentData.currentDate, getNow(currentData.options.now, currentData.dateEnv), // TODO: use NowTimer????
+                        currentData.viewTitle);
                         return (createElement(RenderId.Provider, { value: this.customContentRenderId },
-                            createElement(CalendarContent, Object.assign({ forPrint: forPrint }, currentData))));
+                            createElement(CalendarContent, Object.assign({ forPrint: forPrint, toolbarProps: toolbarProps }, currentData))));
                     }), this.el);
                 });
             }
             else if (this.isRendered) {
                 this.isRendered = false;
                 render(null, this.el);
-                this.setClassNames([]);
+                this.setIsRtl(false);
+                this.setClassName('');
                 this.setHeight('');
             }
         };
-        ensureElHasStyles(el);
         this.el = el;
         this.renderRunner = new DelayedRunner(this.handleRenderRequest);
         new CalendarDataManager({
@@ -1980,11 +1969,6 @@ class Calendar extends CalendarImpl {
             this.renderRunner.request();
         }
     }
-    updateSize() {
-        flushSync(() => {
-            super.updateSize();
-        });
-    }
     batchRendering(func) {
         this.renderRunner.pause('batchRendering');
         func();
@@ -1999,21 +1983,170 @@ class Calendar extends CalendarImpl {
     resetOptions(optionOverrides, changedOptionNames) {
         this.currentDataManager.resetOptions(optionOverrides, changedOptionNames);
     }
-    setClassNames(classNames) {
-        if (!isArraysEqual(classNames, this.currentClassNames)) {
+    /*
+    TODO: DRY with toolbar-parse.ts and ToolbarSection
+    */
+    getButtonState() {
+        var _a;
+        const { currentData, toolbarProps } = this;
+        const options = currentData.calendarOptions;
+        const buttonConfigs = options.buttons || {};
+        const viewSpecs = currentData.viewSpecs;
+        const buttonState = {
+            today: {
+                text: options.todayText,
+                hint: options.todayHint,
+                isDisabled: !toolbarProps.isTodayEnabled,
+            },
+            prev: {
+                text: options.prevText,
+                hint: options.prevHint,
+                isDisabled: !toolbarProps.isPrevEnabled,
+            },
+            next: {
+                text: options.nextText,
+                hint: options.nextHint,
+                isDisabled: !toolbarProps.isNextEnabled,
+            },
+            prevYear: {
+                text: options.prevYearText,
+                hint: formatWithOrdinals(options.prevHint, [options.yearText, 'year'], options.prevYearText),
+                isDisabled: false,
+            },
+            nextYear: {
+                text: options.prevYearText,
+                hint: formatWithOrdinals(options.nextHint, [options.yearText, 'year'], options.nextYearText),
+                isDisabled: false,
+            },
+        };
+        for (const viewSpecName in viewSpecs) {
+            const viewSpec = viewSpecs[viewSpecName];
+            const buttonTextKey = viewSpec.optionDefaults.buttonTextKey;
+            const buttonText = ((_a = buttonConfigs[viewSpecName]) === null || _a === void 0 ? void 0 : _a.text) ||
+                (buttonTextKey ? options[buttonTextKey] : '') ||
+                (viewSpec.singleUnit ? options[viewSpec.singleUnit + 'Text'] : '') ||
+                viewSpecName;
+            const buttonHint = formatWithOrdinals(options.viewHint, [buttonText, viewSpecName], // ordinal arguments
+            buttonText);
+            buttonState[viewSpecName] = {
+                text: buttonText,
+                hint: buttonHint,
+            };
+        }
+        return buttonState;
+    }
+    setClassName(className) {
+        if (className !== this.currentClassName) {
             let { classList } = this.el;
-            for (let className of this.currentClassNames) {
-                classList.remove(className);
+            for (let singleClassName of this.currentClassName.split(' ')) {
+                if (singleClassName) {
+                    classList.remove(singleClassName);
+                }
             }
-            for (let className of classNames) {
-                classList.add(className);
+            for (let singleClassName of className.split(' ')) {
+                if (singleClassName) {
+                    classList.add(singleClassName);
+                }
             }
-            this.currentClassNames = classNames;
+            this.currentClassName = className;
         }
     }
     setHeight(height) {
         applyStyleProp(this.el, 'height', height);
     }
+    setIsRtl(isRtl) {
+        if (isRtl) {
+            this.el.dir = 'rtl';
+        }
+        else {
+            this.el.removeAttribute('dir');
+        }
+    }
+}
+function buildToolbarProps(viewSpec, dateProfile, dateProfileGenerator, currentDate, now, title) {
+    // don't force any date-profiles to valid date profiles (the `false`) so that we can tell if it's invalid
+    let todayInfo = dateProfileGenerator.build(now, undefined, false); // TODO: need `undefined` or else INFINITE LOOP for some reason
+    let prevInfo = dateProfileGenerator.buildPrev(dateProfile, currentDate, false);
+    let nextInfo = dateProfileGenerator.buildNext(dateProfile, currentDate, false);
+    return {
+        title,
+        selectedButton: viewSpec.type,
+        navUnit: viewSpec.singleUnit,
+        isTodayEnabled: todayInfo.isValid && !rangeContainsMarker(dateProfile.currentRange, now),
+        isPrevEnabled: prevInfo.isValid,
+        isNextEnabled: nextInfo.isValid,
+    };
+}
+
+const blankButtonState = {
+    text: '', hint: '', isDisabled: false,
+};
+class CalendarController {
+    constructor(handleDateChange) {
+        this.handleDateChange = handleDateChange;
+    }
+    today() {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.today();
+    }
+    prev() {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.prev();
+    }
+    next() {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.next();
+    }
+    prevYear() {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.prevYear();
+    }
+    nextYear() {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.nextYear();
+    }
+    gotoDate(zonedDateInput) {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.gotoDate(zonedDateInput);
+    }
+    incrementDate(duration) {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.incrementDate(duration);
+    }
+    changeView(viewType) {
+        var _a;
+        (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.changeView(viewType);
+    }
+    get view() {
+        var _a;
+        return (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.view;
+    }
+    getDate() {
+        var _a;
+        return (_a = this.calendarApi) === null || _a === void 0 ? void 0 : _a.getDate();
+    }
+    getButtonState() {
+        const { calendarApi } = this;
+        return (calendarApi && calendarApi.getButtonState()) || {
+            today: blankButtonState,
+            prev: blankButtonState,
+            next: blankButtonState,
+            prevYear: blankButtonState,
+            nextYear: blankButtonState,
+        };
+    }
+    _setApi(calendarApi) {
+        if (this.calendarApi !== calendarApi) {
+            if (this.calendarApi) {
+                this.calendarApi.off('datesSet', this.handleDateChange);
+                this.calendarApi = undefined;
+            }
+            if (calendarApi) {
+                this.calendarApi = calendarApi;
+                calendarApi.on('datesSet', this.handleDateChange);
+            }
+        }
+    }
 }
 
 function formatDate(dateInput, options = {}) {
@@ -2025,7 +2158,7 @@ function formatDate(dateInput, options = {}) {
     }
     return dateEnv.format(dateMeta.marker, formatter, {
         forcedTzo: dateMeta.forcedTzo,
-    });
+    })[0];
 }
 function formatRange(startInput, endInput, options) {
     let dateEnv = buildDateEnv(typeof options === 'object' && options ? options : {}); // pass in if non-null object
@@ -2057,6 +2190,6 @@ function sliceEvents(props, allDay) {
     return sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
 }
 
-const version = '7.0.0-beta.3';
+const version = '7.0.0-beta.5';
 
-export { Calendar, createPlugin, formatDate, formatRange, globalLocales, globalPlugins, sliceEvents, version };
+export { Calendar, CalendarController, createPlugin, formatDate, formatRange, globalLocales, globalPlugins, sliceEvents, version };