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

package/{index.cjs → cjs/index.cjs}

@@ -15,39 +15,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',
     eventsHint: 'Events',
-    allDayText: 'all-day',
-    timedText: 'timed',
+    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', viewChangeHint: 'Change 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) {
@@ -88,7 +83,7 @@ function queryRawLocale(codes, available) {
     return null;
 }
 function parseLocale(codeArg, codes, raw) {
-    let merged = internalCommon.mergeProps([MINIMAL_RAW_EN_LOCALE, raw], ['buttonText']);
+    let merged = internalCommon.mergeCalendarOptions(MINIMAL_RAW_EN_LOCALE, raw);
     delete merged.code; // don't want this part of the options
     let { week } = merged;
     delete merged.week;
@@ -128,7 +123,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 || [],
@@ -139,6 +133,7 @@ function createPlugin(input) {
         scrollerSyncerClass: input.scrollerSyncerClass || null,
         listenerRefiners: input.listenerRefiners || {},
         optionRefiners: input.optionRefiners || {},
+        optionDefaults: input.optionDefaults ? [input.optionDefaults] : [],
         propSetHandlers: input.propSetHandlers || {},
     };
 }
@@ -166,7 +161,6 @@ function buildPluginHooks(pluginDefs, globalDefs) {
         eventDropTransformers: [],
         componentInteractions: [],
         calendarInteractions: [],
-        themeClasses: {},
         eventSourceDefs: [],
         cmdFormatter: null,
         recurringTypes: [],
@@ -177,6 +171,7 @@ function buildPluginHooks(pluginDefs, globalDefs) {
         scrollerSyncerClass: null,
         listenerRefiners: {},
         optionRefiners: {},
+        optionDefaults: [],
         propSetHandlers: {},
     };
     function addDefs(defs) {
@@ -228,7 +223,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: internalCommon.mergeViewOptionsMap(hooks0.views, hooks1.views),
         viewPropsTransformers: hooks0.viewPropsTransformers.concat(hooks1.viewPropsTransformers),
         isPropsValid: hooks1.isPropsValid || hooks0.isPropsValid,
         externalDefTransforms: hooks0.externalDefTransforms.concat(hooks1.externalDefTransforms),
@@ -236,7 +231,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),
@@ -247,6 +241,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),
     };
 }
@@ -260,32 +255,6 @@ function compareOptionalDates(date0, date1) {
     return new Date(Math.max(date0.valueOf(), date1.valueOf()));
 }
 
-class StandardTheme extends internalCommon.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;
@@ -330,8 +299,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: internalCommon.mergeCalendarOptions(superDef ? superDef.defaults : {}, defaultConfig ? defaultConfig.rawOptions : {}),
+        overrides: internalCommon.mergeCalendarOptions(superDef ? superDef.overrides : {}, overrideConfig ? overrideConfig.rawOptions : {}),
     };
 }
 
@@ -359,16 +328,21 @@ function parseViewConfig(input) {
     };
 }
 function createViewHookComponent(options) {
-    return (viewProps) => (preact.createElement(internalCommon.ViewContextType.Consumer, null, (context) => (preact.createElement(internalCommon.ContentContainer, { tag: "div", className: internalCommon.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) => (preact.createElement(internalCommon.ViewContextType.Consumer, null, (context) => {
+        var _a;
+        return (preact.createElement(internalCommon.ContentContainer, { tag: "div", className: internalCommon.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 internalCommon.mapHash(viewDefs, (viewDef) => buildViewSpec(viewDef, overrideConfigs, optionOverrides, dynamicOptionOverrides, localeDefaults));
+    return internalCommon.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 ||
@@ -388,34 +362,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,
@@ -424,21 +370,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(internalCommon.BASE_OPTION_DEFAULTS) ||
-            viewDef.type,
-        // not DRY
-        buttonTitleOverride: queryButtonTitle(dynamicOptionOverrides) ||
-            queryButtonTitle(optionOverrides) ||
-            viewDef.overrides.buttonHint,
-        buttonTitleDefault: queryButtonTitle(localeDefaults) ||
-            viewDef.defaults.buttonHint ||
-            queryButtonTitle(internalCommon.BASE_OPTION_DEFAULTS),
-        // will eventually fall back to buttonText
     };
 }
 // hack to get memoization working
@@ -713,17 +644,17 @@ 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) {
+function parseToolbar(sectionStrHash, calendarOptions, viewSpecs, calendarApi) {
     let isRtl = calendarOptions.direction === 'rtl';
     let viewsWithButtons = [];
     let hasTitle = false;
     function processSectionStr(sectionStr) {
-        let sectionRes = parseSection(sectionStr, calendarOptions, calendarOptionOverrides, theme, viewSpecs, calendarApi);
+        let sectionRes = parseSection(sectionStr, calendarOptions, viewSpecs, calendarApi);
         viewsWithButtons.push(...sectionRes.viewsWithButtons);
         hasTitle = hasTitle || sectionRes.hasTitle;
         return sectionRes.widgets;
@@ -742,82 +673,92 @@ function parseToolbar(sectionStrHash, calendarOptions, calendarOptionOverrides,
 /*
 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;
-        let isView = false;
-        // ^ 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 = internalCommon.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])) {
-            isView = true;
-            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 = internalCommon.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 = internalCommon.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 = internalCommon.formatWithOrdinals(buttonInput.hint || calendarOptions.prevHint, [calendarOptions.yearText, 'year'], buttonText);
+            }
+            else if (name === 'nextYear') {
+                buttonHint = internalCommon.formatWithOrdinals(buttonInput.hint || calendarOptions.nextHint, [calendarOptions.yearText, 'year'], buttonText);
             }
             else {
-                buttonHint = (navUnit) => internalCommon.formatWithOrdinals(calendarButtonHintOverrides[buttonName] ||
-                    calendarButtonHints[buttonName], [
-                    calendarButtonText[navUnit] || navUnit,
-                    navUnit,
-                ], calendarButtonText[buttonName]);
+                buttonHint = (currentUnit) => {
+                    return internalCommon.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, isView };
+        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 };
 }
@@ -1034,6 +975,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);
         },
@@ -1165,14 +1110,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, internalCommon.createFormatter(viewOptions.titleFormat || buildTitleFormat(dateProfile)), {
+    return dateEnv.formatRange(range.start, range.end, internalCommon.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' };
@@ -1182,8 +1127,12 @@ function buildTitleFormat(dateProfile) {
     }
     let days = internalCommon.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' };
@@ -1198,13 +1147,12 @@ class CalendarDataManager {
         this.buildLocale = internalCommon.memoize(buildLocale);
         this.buildPluginHooks = buildBuildPluginHooks();
         this.buildDateEnv = internalCommon.memoize(buildDateEnv$1);
-        this.buildTheme = internalCommon.memoize(buildTheme);
         this.parseToolbars = internalCommon.memoize(parseToolbars);
         this.buildViewSpecs = internalCommon.memoize(buildViewSpecs);
         this.buildDateProfileGenerator = internalCommon.memoizeObjArg(buildDateProfileGenerator);
         this.buildViewApi = internalCommon.memoize(buildViewApi);
         this.buildViewUiProps = internalCommon.memoizeObjArg(buildViewUiProps);
-        this.buildEventUiBySource = internalCommon.memoize(buildEventUiBySource, internalCommon.isPropsEqual);
+        this.buildEventUiBySource = internalCommon.memoize(buildEventUiBySource, internalCommon.isPropsEqualShallow);
         this.buildEventUiBases = internalCommon.memoize(buildEventUiBases);
         this.parseContextBusinessHours = internalCommon.memoizeObjArg(parseContextBusinessHours);
         this.buildTitle = internalCommon.memoize(buildTitle);
@@ -1225,13 +1173,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 = internalCommon.getInitialDate(optionsData.calendarOptions, optionsData.dateEnv);
         let dateProfile = currentViewData.dateProfileGenerator.build(currentDate);
         if (!internalCommon.rangeContainsMarker(dateProfile.activeRange, currentDate)) {
@@ -1373,7 +1327,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;
@@ -1403,18 +1358,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,
@@ -1422,23 +1374,13 @@ class CalendarDataManager {
     }
     // always called from behind a memoizer
     processRawCalendarOptions(optionOverrides, dynamicOptionOverrides) {
-        let { locales, locale } = internalCommon.mergeRawOptions([
-            internalCommon.BASE_OPTION_DEFAULTS,
-            optionOverrides,
-            dynamicOptionOverrides,
-        ]);
+        let { locales, locale } = internalCommon.mergeCalendarOptions(internalCommon.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({}, internalCommon.BASE_OPTION_REFINERS), internalCommon.CALENDAR_LISTENER_REFINERS), internalCommon.CALENDAR_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
-        let extra = {};
-        let raw = internalCommon.mergeRawOptions([
-            internalCommon.BASE_OPTION_DEFAULTS,
-            localeDefaults,
-            optionOverrides,
-            dynamicOptionOverrides,
-        ]);
+        let refiners = this.currentCalendarOptionsRefiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, internalCommon.BASE_OPTION_REFINERS), internalCommon.CALENDAR_LISTENER_REFINERS), internalCommon.CALENDAR_ONLY_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+        let raw = internalCommon.mergeCalendarOptions(internalCommon.BASE_OPTION_DEFAULTS, ...pluginHooks.optionDefaults, localeDefaults, filterKnownOptions(internalCommon.mergeCalendarOptions(optionOverrides, dynamicOptionOverrides), refiners));
         let refined = {};
         let currentRaw = this.currentCalendarOptionsInput;
         let currentRefined = this.currentCalendarOptionsRefined;
@@ -1446,16 +1388,17 @@ class CalendarDataManager {
         for (let optionName in raw) {
             if (this.optionsForRefining.indexOf(optionName) === -1 && (raw[optionName] === currentRaw[optionName] || (internalCommon.COMPLEX_OPTION_COMPARATORS[optionName] &&
                 (optionName in currentRaw) &&
-                internalCommon.COMPLEX_OPTION_COMPARATORS[optionName](currentRaw[optionName], raw[optionName])))) {
+                internalCommon.COMPLEX_OPTION_COMPARATORS[optionName](currentRaw[optionName], raw[optionName])) || (
+            // see options-manip
+            currentRaw[optionName] && currentRaw[optionName].parts &&
+                raw[optionName] && raw[optionName].parts &&
+                internalCommon.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;
@@ -1471,7 +1414,6 @@ class CalendarDataManager {
             pluginHooks,
             availableLocaleData,
             localeDefaults,
-            extra,
         };
     }
     _computeCurrentViewData(viewType, optionsData, optionOverrides, dynamicOptionOverrides) {
@@ -1479,8 +1421,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,
@@ -1505,24 +1446,19 @@ class CalendarDataManager {
         return { viewSpec, options: refinedOptions, dateProfileGenerator, viewApi };
     }
     processRawViewOptions(viewSpec, pluginHooks, localeDefaults, optionOverrides, dynamicOptionOverrides) {
-        let raw = internalCommon.mergeRawOptions([
-            internalCommon.BASE_OPTION_DEFAULTS,
-            viewSpec.optionDefaults,
-            localeDefaults,
-            optionOverrides,
-            viewSpec.optionOverrides,
-            dynamicOptionOverrides,
-        ]);
-        let refiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, internalCommon.BASE_OPTION_REFINERS), internalCommon.CALENDAR_LISTENER_REFINERS), internalCommon.CALENDAR_OPTION_REFINERS), internalCommon.VIEW_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+        let refiners = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, internalCommon.BASE_OPTION_REFINERS), internalCommon.CALENDAR_LISTENER_REFINERS), internalCommon.CALENDAR_ONLY_OPTION_REFINERS), internalCommon.VIEW_ONLY_OPTION_REFINERS), pluginHooks.listenerRefiners), pluginHooks.optionRefiners);
+        let raw = internalCommon.mergeCalendarOptions(internalCommon.BASE_OPTION_DEFAULTS, ...pluginHooks.optionDefaults, viewSpec.optionDefaults, localeDefaults, filterKnownOptions(internalCommon.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] ||
-                (internalCommon.COMPLEX_OPTION_COMPARATORS[optionName] &&
-                    internalCommon.COMPLEX_OPTION_COMPARATORS[optionName](raw[optionName], currentRaw[optionName]))) {
+            if (raw[optionName] === currentRaw[optionName] || (internalCommon.COMPLEX_OPTION_COMPARATORS[optionName] &&
+                internalCommon.COMPLEX_OPTION_COMPARATORS[optionName](raw[optionName], currentRaw[optionName])) || (
+            // see options-manip
+            currentRaw[optionName] && currentRaw[optionName].parts &&
+                raw[optionName] && raw[optionName].parts &&
+                internalCommon.isArraysEqual(currentRaw[optionName].parts, raw[optionName].parts))) {
                 refined[optionName] = currentRefined[optionName];
             }
             else {
@@ -1536,9 +1472,6 @@ class CalendarDataManager {
                 else if (refiners[optionName]) {
                     refined[optionName] = refiners[optionName](raw[optionName]);
                 }
-                else {
-                    extra[optionName] = raw[optionName];
-                }
                 anyChanges = true;
             }
         }
@@ -1549,11 +1482,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 internalCommon.DateEnv({
         calendarSystem: 'gregory',
@@ -1563,14 +1495,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 || internalCommon.DateProfileGenerator;
     return new DateProfileGeneratorClass(props);
@@ -1581,8 +1510,13 @@ function buildViewApi(type, getCurrentData, dateEnv) {
 function buildEventUiBySource(eventSources) {
     return internalCommon.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]) {
@@ -1592,7 +1526,7 @@ function buildEventUiBases(eventDefs, eventUiSingleBase, eventUiBySource) {
     return eventUiBases;
 }
 function buildViewUiProps(calendarContext) {
-    let { options } = calendarContext;
+    const { options } = calendarContext;
     return {
         eventUiSingleBase: internalCommon.createEventUi({
             display: options.eventDisplay,
@@ -1602,11 +1536,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: internalCommon.createEventUi({
             constraint: options.selectConstraint,
@@ -1626,74 +1558,14 @@ function computeIsLoading(state, context) {
 function parseContextBusinessHours(calendarContext) {
     return internalCommon.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 internalCommon.BaseComponent {
-    render() {
-        let children = this.props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
-        return preact.createElement('div', {
-            className: 'fc-toolbar-section fc-toolbar-' + this.props.name
-        }, ...children);
-    }
-    renderWidgetGroup(widgetGroup) {
-        let { props, context } = this;
-        let { options, theme } = context;
-        let children = [];
-        let isOnlyButtons = true;
-        let isOnlyView = true;
-        for (const widget of widgetGroup) {
-            const { buttonName, isView } = widget;
-            if (buttonName === 'title') {
-                isOnlyButtons = false;
-            }
-            else if (!isView) {
-                isOnlyView = false;
-            }
+function filterKnownOptions(options, optionRefiners) {
+    const knownOptions = {};
+    for (const optionName in options) {
+        if (optionRefiners[optionName]) {
+            knownOptions[optionName] = options[optionName];
         }
-        for (let widget of widgetGroup) {
-            let { buttonName, buttonClick, buttonText, buttonIcon, buttonHint } = widget;
-            if (buttonName === 'title') {
-                children.push(preact.createElement("div", { role: 'heading', "aria-level": options.headingLevel, id: props.titleId, 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(preact.createElement("button", Object.assign({ type: "button", disabled: isDisabled }, ((isOnlyButtons && isOnlyView)
-                    ? { 'role': 'tab', 'aria-selected': isPressed }
-                    : { 'aria-pressed': isPressed }), { "aria-label": typeof buttonHint === 'function' ? buttonHint(props.navUnit) : buttonHint, className: internalCommon.joinClassNames(`fc-${buttonName}-button`, theme.getClassName('button'), isPressed && theme.getClassName('buttonActive')), onClick: buttonClick }), buttonText || (buttonIcon ? preact.createElement("span", { className: buttonIcon, "aria-hidden": true }) : '')));
-            }
-        }
-        if (children.length > 1) {
-            return preact.createElement('div', {
-                role: (isOnlyButtons && isOnlyView) ? 'tablist' : undefined,
-                'aria-label': (isOnlyButtons && isOnlyView) ? options.viewChangeHint : undefined,
-                className: isOnlyButtons ? theme.getClassName('buttonGroup') : undefined,
-            }, ...children);
-        }
-        return children[0];
-    }
-}
-
-class Toolbar extends internalCommon.BaseComponent {
-    render() {
-        let { model, className } = this.props;
-        let { sectionWidgets } = model;
-        return (preact.createElement("div", { className: internalCommon.joinClassNames(className, 'fc-toolbar') },
-            this.renderSection('start', sectionWidgets.start),
-            this.renderSection('center', sectionWidgets.center),
-            this.renderSection('end', sectionWidgets.end)));
-    }
-    renderSection(key, widgetGroups) {
-        let { props } = this;
-        return (preact.createElement(ToolbarSection, { key: key, name: key, widgetGroups: widgetGroups, title: props.title, titleId: props.titleId, navUnit: props.navUnit, activeButton: props.activeButton, isTodayEnabled: props.isTodayEnabled, isPrevEnabled: props.isPrevEnabled, isNextEnabled: props.isNextEnabled }));
     }
+    return knownOptions;
 }
 
 /*
@@ -1716,7 +1588,7 @@ class EventClicking extends internalCommon.Interaction {
                 });
             }
         };
-        this.destroy = internalCommon.listenBySelector(settings.el, 'click', '.fc-event', // on both fg and bg events
+        this.destroy = internalCommon.listenBySelector(settings.el, 'click', `.${internalCommon.classNames.internalEvent}`, // on both fg and bg events
         this.handleSegClick);
     }
 }
@@ -1746,7 +1618,7 @@ class EventHovering extends internalCommon.Interaction {
                 this.triggerEvent('eventMouseLeave', ev, segEl);
             }
         };
-        this.removeHoverListeners = internalCommon.listenToHoverBySelector(settings.el, '.fc-event', // on both fg and bg events
+        this.removeHoverListeners = internalCommon.listenToHoverBySelector(settings.el, `.${internalCommon.classNames.internalEvent}`, // on both fg and bg events
         this.handleSegEnter, this.handleSegLeave);
     }
     destroy() {
@@ -1767,20 +1639,123 @@ class EventHovering extends internalCommon.Interaction {
     }
 }
 
-class ViewHarness extends preact.Component {
+class ButtonIcon extends internalCommon.BaseComponent {
+    render() {
+        const { contentGenerator, className } = this.props;
+        if (contentGenerator) {
+            // TODO: somehow give className to the svg?
+            return (preact.createElement(internalCommon.ContentContainer, { tag: 'span', style: { display: 'contents' }, attrs: { 'aria-hidden': true }, renderProps: {}, generatorName: undefined, customGenerator: contentGenerator }));
+        }
+        if (className !== undefined) {
+            return (preact.createElement("span", { "aria-hidden": true, className: className }));
+        }
+    }
+}
+
+class ToolbarSection extends internalCommon.BaseComponent {
+    render() {
+        let { props } = this;
+        let { options } = this.context;
+        let children = props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup));
+        return preact.createElement('div', {
+            className: internalCommon.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(preact.createElement("div", { role: 'heading', "aria-level": options.headingLevel, id: props.titleId, className: internalCommon.joinArrayishClassNames(options.toolbarTitleClass) }, props.title));
+            }
+            else if (customElement) {
+                children.push(preact.createElement(internalCommon.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 = (preact.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(preact.createElement(internalCommon.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: internalCommon.joinClassNames(internalCommon.generateClassName(options.buttonClass, renderProps), !isDisabled && internalCommon.classNames.cursorPointer, inGroup && internalCommon.joinClassNames(isSelected ? internalCommon.classNames.z1 : internalCommon.classNames.z0, internalCommon.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'
+                            ? (preact.createElement(preact.Fragment, null,
+                                iconNode,
+                                widget.buttonText))
+                            : (preact.createElement(preact.Fragment, null,
+                                widget.buttonText,
+                                iconNode)) // text-icon
+                )));
+            }
+        }
+        if (children.length > 1) {
+            return preact.createElement('div', {
+                role: (isOnlyButtons && isOnlyView) ? 'tablist' : undefined,
+                'aria-label': (isOnlyButtons && isOnlyView) ? options.viewChangeHint : undefined,
+                className: internalCommon.joinClassNames(internalCommon.generateClassName(options.buttonGroupClass, { isSelectGroup: isOnlyView }), internalCommon.classNames.isolate),
+            }, ...children);
+        }
+        return children[0];
+    }
+}
+
+class Toolbar extends internalCommon.BaseComponent {
     render() {
-        const { props } = this;
-        return (preact.createElement("div", { className: internalCommon.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));
+        let { props } = this;
+        let options = this.context.options;
+        let { sectionWidgets } = props.model;
+        return (preact.createElement("div", { className: internalCommon.joinClassNames(props.className, internalCommon.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 (preact.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 }));
     }
 }
 
@@ -1789,7 +1764,6 @@ class CalendarContent extends internalCommon.PureComponent {
         super(...arguments);
         this.buildViewContext = internalCommon.memoize(internalCommon.buildViewContext);
         this.buildViewPropTransformers = internalCommon.memoize(buildViewPropTransformers);
-        this.buildToolbarProps = internalCommon.memoize(buildToolbarProps);
         this.interactionsStore = {};
         this.viewTitleId = internalCommon.getUniqueDomId();
         // Component Registration
@@ -1823,10 +1797,9 @@ class CalendarContent extends internalCommon.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, internalCommon.getNow(props.options.now, props.dateEnv), // TODO: use NowTimer????
-        props.viewTitle);
+        let { toolbarProps, toolbarConfig, options } = props;
         let viewHeight;
         let viewHeightLiquid = false;
         let viewAspectRatio;
@@ -1840,13 +1813,19 @@ class CalendarContent extends internalCommon.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 (preact.createElement(internalCommon.ViewContextType.Provider, { value: viewContext },
-            toolbarConfig.header && (preact.createElement(Toolbar, Object.assign({ className: "fc-header-toolbar", model: toolbarConfig.header, titleId: this.viewTitleId }, toolbarProps))),
-            preact.createElement(ViewHarness, { height: viewHeight, heightLiquid: viewHeightLiquid, aspectRatio: viewAspectRatio },
-                this.renderView(props, toolbarProps.title),
+            toolbarConfig.header && (preact.createElement(Toolbar, Object.assign({ className: internalCommon.generateClassName(options.headerToolbarClass, { borderlessX }), model: toolbarConfig.header, borderlessX: borderlessX, titleId: this.viewTitleId }, toolbarProps))),
+            preact.createElement("div", { className: internalCommon.joinClassNames(internalCommon.classNames.flexCol, internalCommon.classNames.rel, viewHeightLiquid && internalCommon.classNames.liquid), style: {
+                    height: viewHeight,
+                    paddingBottom: viewAspectRatio != null
+                        ? `${(1 / viewAspectRatio) * 100}%`
+                        : undefined
+                } },
+                this.renderView(internalCommon.joinClassNames((viewHeightLiquid || viewHeight) && internalCommon.classNames.liquid, viewAspectRatio != null && internalCommon.classNames.fill, internalCommon.classNames.internalView), toolbarProps.title),
                 this.buildAppendContent()),
-            toolbarConfig.footer && (preact.createElement(Toolbar, Object.assign({ className: "fc-footer-toolbar", model: toolbarConfig.footer }, toolbarProps)))));
+            toolbarConfig.footer && (preact.createElement(Toolbar, Object.assign({ className: internalCommon.generateClassName(options.footerToolbarClass, { borderlessX }), model: toolbarConfig.footer, borderlessX: borderlessX }, toolbarProps)))));
     }
     componentDidMount() {
         let { props } = this;
@@ -1877,10 +1856,17 @@ class CalendarContent extends internalCommon.PureComponent {
         let children = props.pluginHooks.viewContainerAppends.map((buildAppendContent) => buildAppendContent(props));
         return preact.createElement(preact.Fragment, {}, ...children);
     }
-    renderView(props, title) {
-        let { pluginHooks } = props;
-        let { viewSpec, toolbarConfig } = 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,
@@ -1892,6 +1878,10 @@ class CalendarContent extends internalCommon.PureComponent {
             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) {
@@ -1901,20 +1891,6 @@ class CalendarContent extends internalCommon.PureComponent {
         return (preact.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 && !internalCommon.rangeContainsMarker(dateProfile.currentRange, now),
-        isPrevEnabled: prevInfo.isValid,
-        isNextEnabled: nextInfo.isValid,
-    };
-}
 // Plugin
 // -----------------------------------------------------------------------------------------------------------------
 function buildViewPropTransformers(theClasses) {
@@ -1927,9 +1903,10 @@ Vanilla JS API
 class Calendar extends internalCommon.CalendarImpl {
     constructor(el, optionOverrides = {}) {
         super();
+        this.buildToolbarProps = internalCommon.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
@@ -1948,22 +1925,25 @@ 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, forPrint) => {
-                        this.setClassNames(classNames);
+                    preact.render(preact.createElement(internalCommon.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, internalCommon.getNow(currentData.options.now, currentData.dateEnv), // TODO: use NowTimer????
+                        currentData.viewTitle);
                         return (preact.createElement(internalCommon.RenderId.Provider, { value: this.customContentRenderId },
-                            preact.createElement(CalendarContent, Object.assign({ forPrint: forPrint }, currentData))));
+                            preact.createElement(CalendarContent, Object.assign({ forPrint: forPrint, toolbarProps: toolbarProps }, currentData))));
                     }), this.el);
                 });
             }
             else if (this.isRendered) {
                 this.isRendered = false;
                 preact.render(null, this.el);
-                this.setClassNames([]);
+                this.setIsRtl(false);
+                this.setClassName('');
                 this.setHeight('');
             }
         };
-        internalCommon.ensureElHasStyles(el);
         this.el = el;
         this.renderRunner = new internalCommon.DelayedRunner(this.handleRenderRequest);
         new CalendarDataManager({
@@ -1992,11 +1972,6 @@ class Calendar extends internalCommon.CalendarImpl {
             this.renderRunner.request();
         }
     }
-    updateSize() {
-        internalCommon.flushSync(() => {
-            super.updateSize();
-        });
-    }
     batchRendering(func) {
         this.renderRunner.pause('batchRendering');
         func();
@@ -2011,21 +1986,170 @@ class Calendar extends internalCommon.CalendarImpl {
     resetOptions(optionOverrides, changedOptionNames) {
         this.currentDataManager.resetOptions(optionOverrides, changedOptionNames);
     }
-    setClassNames(classNames) {
-        if (!internalCommon.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: internalCommon.formatWithOrdinals(options.prevHint, [options.yearText, 'year'], options.prevYearText),
+                isDisabled: false,
+            },
+            nextYear: {
+                text: options.prevYearText,
+                hint: internalCommon.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 = internalCommon.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) {
         internalCommon.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 && !internalCommon.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 = {}) {
@@ -2037,7 +2161,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
@@ -2069,10 +2193,12 @@ function sliceEvents(props, allDay) {
     return internalCommon.sliceEventStore(props.eventStore, props.eventUiBases, props.dateProfile.activeRange, allDay ? props.nextDayThreshold : null).fg;
 }
 
-const version = '7.0.0-beta.4';
+const version = '7.0.0-beta.5';
 
 exports.JsonRequestError = internalCommon.JsonRequestError;
+exports.joinClassNames = internalCommon.joinClassNames;
 exports.Calendar = Calendar;
+exports.CalendarController = CalendarController;
 exports.createPlugin = createPlugin;
 exports.formatDate = formatDate;
 exports.formatRange = formatRange;