@fullcalendar/mui 7.0.0-beta.5

package/esm/pulse/EventCalendarViews.js

@@ -0,0 +1,239 @@
+import React from 'react';
+import FullCalendar from '@fullcalendar/react';
+import { joinClassNames } from '@fullcalendar/core';
+import { Box } from '@mui/material';
+import { EventCalendarCloseIcon } from './icons.js';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+
+// outline
+const outlineWidthClass = "fc-pulse-bAU";
+const outlineWidthFocusClass = "fc-pulse-Tid";
+const outlineWidthGroupFocusClass = "fc-pulse-14w";
+const outlineOffsetClass = "fc-pulse-fKI";
+const outlineInsetClass = "fc-pulse-bzG";
+const tertiaryOutlineColorClass = "fc-pulse-sVX";
+// strongest (25%)
+const strongestSolidBgActiveClass = "fc-pulse-lS3";
+// stronger (20%)
+const strongerBgActiveClass = "fc-pulse-iWk";
+const strongerSolidBgHoverClass = "fc-pulse-fEn";
+// strong (16%)
+const strongBgHoverClass = "fc-pulse-XCy";
+const strongBgFocusClass = "fc-pulse-WPX";
+const strongBgActiveClass = "fc-pulse-kup";
+const strongSolidBgClass = "fc-pulse-5V9";
+const strongSolidPressableClass = `${strongSolidBgClass} ${strongerSolidBgHoverClass} ${strongestSolidBgActiveClass}`;
+// muted (8%)
+const mutedBgClass = "fc-pulse-VxY";
+const mutedBgHoverClass = "fc-pulse-znR";
+const mutedBgActiveClass = "fc-pulse-cmB";
+const mutedPressableClass = `${mutedBgClass} ${strongBgHoverClass} ${strongerBgActiveClass}`;
+const mutedHoverPressableClass = `${mutedBgHoverClass} ${strongBgFocusClass} ${strongBgActiveClass}`;
+// faint (4%)
+const faintBgClass = "fc-pulse-IKt";
+const faintBgHoverClass = "fc-pulse-iAr";
+const faintBgFocusClass = "fc-pulse-r6h";
+const faintHoverPressableClass = `${faintBgHoverClass} ${faintBgFocusClass} ${mutedBgActiveClass}`;
+const faintSolidBgClass = "fc-pulse-MfJ";
+// tertiary (it's actually MUI's "secondary", like an accent color)
+const tertiaryClass = "fc-pulse-s3B fc-pulse-BIe";
+const tertiaryPressableClass = `${tertiaryClass} fc-pulse-Ry9 fc-pulse-ra6`;
+const tertiaryPressableGroupClass = `${tertiaryClass} fc-pulse-BVo fc-pulse-3U0`;
+// usually 11px font / 12px line-height
+const xxsTextClass = "fc-pulse-HRt";
+// transparent resizer for mouse
+const blockPointerResizerClass = "fc-pulse-YA2 fc-pulse-C9h fc-pulse-ZkV";
+const rowPointerResizerClass = `${blockPointerResizerClass} fc-pulse-8ZZ fc-pulse-1lj`;
+const columnPointerResizerClass = `${blockPointerResizerClass} fc-pulse-xX5 fc-pulse-433`;
+// circle resizer for touch
+const blockTouchResizerClass = `fc-pulse-YA2 fc-pulse-tEU fc-pulse-UZp fc-pulse-qvz fc-pulse-Y27 fc-pulse-IdG`;
+const rowTouchResizerClass = `${blockTouchResizerClass} fc-pulse-if4 fc-pulse-NN9`;
+const columnTouchResizerClass = `${blockTouchResizerClass} fc-pulse-Z2g fc-pulse-RWU`;
+const tallDayCellBottomClass = "fc-pulse-iJ1";
+const getShortDayCellBottomClass = (data) => joinClassNames(!data.isNarrow && "fc-pulse-s9U");
+const dayRowCommonClasses = {
+    /* Day Row > List-Item Event
+    ----------------------------------------------------------------------------------------------- */
+    listItemEventClass: (data) => joinClassNames("fc-pulse-mwm fc-pulse-df6 fc-pulse-dpa", data.isNarrow ? "fc-pulse-qK4" : "fc-pulse-MOr", data.isSelected
+        ? mutedBgClass
+        : data.isInteractive
+            ? mutedHoverPressableClass
+            : mutedBgHoverClass),
+    listItemEventInnerClass: (data) => joinClassNames("fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU fc-pulse-Klj", data.isNarrow
+        ? `fc-pulse-h2r ${xxsTextClass}`
+        : "fc-pulse-vvo fc-pulse-17F"),
+    listItemEventTimeClass: (data) => joinClassNames(data.isNarrow ? "fc-pulse-OKV" : "fc-pulse-55Y", "fc-pulse-V3u fc-pulse-JTJ fc-pulse-O5O fc-pulse-qbn"),
+    listItemEventTitleClass: (data) => joinClassNames(data.isNarrow ? "fc-pulse-OKV" : "fc-pulse-55Y", "fc-pulse-kIZ fc-pulse-JTJ fc-pulse-O5O fc-pulse-nGI", data.timeText && "fc-pulse-yGY"),
+    /* Day Row > Row Event
+    ----------------------------------------------------------------------------------------------- */
+    rowEventClass: (data) => joinClassNames(data.isStart && (data.isNarrow ? "fc-pulse-GSF" : "fc-pulse-fpO"), data.isEnd && (data.isNarrow ? "fc-pulse-Jha" : "fc-pulse-hCF")),
+    rowEventInnerClass: (data) => data.isNarrow ? "fc-pulse-h2r" : "fc-pulse-vvo",
+    /* Day Row > More-Link
+    ----------------------------------------------------------------------------------------------- */
+    rowMoreLinkClass: (data) => joinClassNames("fc-pulse-mwm fc-pulse-UZp fc-pulse-dpa", data.isNarrow
+        ? `fc-pulse-qK4 fc-pulse-R95 ${mutedHoverPressableClass}`
+        : `fc-pulse-rK9 fc-pulse-MOr fc-pulse-lqW ${mutedPressableClass}`),
+    rowMoreLinkInnerClass: (data) => joinClassNames(data.isNarrow
+        ? `fc-pulse-df6 ${xxsTextClass}`
+        : "fc-pulse-KbZ fc-pulse-17F", "fc-pulse-HBk"),
+};
+function EventCalendarViews({ className, liquidHeight, height, views: userViews, ...restOptions }) {
+    const borderlessX = restOptions.borderlessX ?? restOptions.borderless;
+    const borderlessBottom = restOptions.borderlessBottom ?? restOptions.borderless;
+    return (React.createElement(Box, { className: className, sx: {
+            bgcolor: "background.paper",
+            borderStyle: "solid",
+            borderColor: "divider",
+            borderLeftWidth: borderlessX ? 0 : 1,
+            borderRightWidth: borderlessX ? 0 : 1,
+            borderTopWidth: 1,
+            borderBottomWidth: borderlessBottom ? 0 : 1,
+            ...((borderlessX || borderlessBottom) ? {} : {
+                borderRadius: 1,
+                overflow: "fc-pulse-C9h",
+            }),
+            ...(liquidHeight ? { flexGrow: 1, minHeight: 0 } : {}),
+        } },
+        React.createElement(FullCalendar, { className: "fc-pulse-ND7", height: liquidHeight ? "100%" : height, 
+            /* Abstract Event
+            ----------------------------------------------------------------------------------------- */
+            eventShortHeight: 50, eventColor: "var(--mui-palette-primary-main)", eventContrastColor: "var(--mui-palette-primary-contrastText)", eventClass: (data) => joinClassNames(data.isSelected
+                ? joinClassNames(outlineWidthClass, data.isDragging && "fc-pulse-ACR")
+                : outlineWidthFocusClass, tertiaryOutlineColorClass), 
+            /* Background Event
+            ----------------------------------------------------------------------------------------- */
+            backgroundEventColor: "var(--mui-palette-secondary-main)", backgroundEventClass: "fc-pulse-Z7B", backgroundEventTitleClass: (data) => joinClassNames("fc-pulse-F6C fc-pulse-dra fc-pulse-HBk", (data.isNarrow || data.isShort)
+                ? `fc-pulse-xbC ${xxsTextClass}`
+                : "fc-pulse-aS8 fc-pulse-17F"), 
+            /* List-Item Event
+            ----------------------------------------------------------------------------------------- */
+            listItemEventTitleClass: "fc-pulse-HBk", listItemEventTimeClass: "fc-pulse-Znt", 
+            /* Block Event
+            ----------------------------------------------------------------------------------------- */
+            blockEventClass: (data) => joinClassNames("fc-pulse-ytQ fc-pulse-vPs fc-pulse-lqW fc-pulse-iVS fc-pulse-n4P fc-pulse-82y fc-pulse-NNx", data.isInteractive && "fc-pulse-CdS", (data.isDragging && !data.isSelected) && "fc-pulse-0HG"), blockEventInnerClass: "fc-pulse-P9J fc-pulse-Nt8", blockEventTimeClass: "fc-pulse-JTJ fc-pulse-O5O fc-pulse-qbn", blockEventTitleClass: "fc-pulse-JTJ fc-pulse-O5O fc-pulse-nGI", 
+            /* Row Event
+            ----------------------------------------------------------------------------------------- */
+            rowEventClass: (data) => joinClassNames("fc-pulse-mwm fc-pulse-3WQ", data.isStart && "fc-pulse-fdR fc-pulse-riW", data.isEnd && "fc-pulse-Ea4 fc-pulse-EWl"), rowEventBeforeClass: (data) => joinClassNames(data.isStartResizable && joinClassNames(data.isSelected ? rowTouchResizerClass : rowPointerResizerClass, "fc-pulse-BD7")), rowEventAfterClass: (data) => joinClassNames(data.isEndResizable && joinClassNames(data.isSelected ? rowTouchResizerClass : rowPointerResizerClass, "fc-pulse-8rg")), rowEventInnerClass: (data) => joinClassNames("fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU", data.isNarrow ? xxsTextClass : "fc-pulse-17F"), rowEventTimeClass: (data) => (data.isNarrow ? "fc-pulse-qNU" : "fc-pulse-I6e"), rowEventTitleClass: (data) => joinClassNames(data.isNarrow ? "fc-pulse-55Y" : "fc-pulse-qB7", "fc-pulse-kIZ"), 
+            /* Column Event
+            ----------------------------------------------------------------------------------------- */
+            columnEventClass: (data) => joinClassNames("fc-pulse-zDQ fc-pulse-z3l fc-pulse-bLM", data.isStart && joinClassNames("fc-pulse-srs fc-pulse-dUI", data.isNarrow ? "fc-pulse-CSA" : "fc-pulse-IgY"), data.isEnd && joinClassNames("fc-pulse-QTT fc-pulse-etO", data.isNarrow ? "fc-pulse-mwm" : "fc-pulse-DE9")), columnEventBeforeClass: (data) => joinClassNames(data.isStartResizable && joinClassNames(data.isSelected ? columnTouchResizerClass : columnPointerResizerClass, "fc-pulse-f4s")), columnEventAfterClass: (data) => joinClassNames(data.isEndResizable && joinClassNames(data.isSelected ? columnTouchResizerClass : columnPointerResizerClass, "fc-pulse-I8n")), columnEventInnerClass: (data) => joinClassNames("fc-pulse-Hhr", data.isShort
+                ? "fc-pulse-uEy fc-pulse-gfU fc-pulse-RVT fc-pulse-xbC"
+                : joinClassNames("fc-pulse-bXY", data.isNarrow ? "fc-pulse-qB7 fc-pulse-vvo" : "fc-pulse-ybQ fc-pulse-ztx"), (data.isNarrow || data.isShort) ? xxsTextClass : "fc-pulse-17F"), columnEventTimeClass: (data) => joinClassNames(!data.isShort && (data.isNarrow ? "fc-pulse-zvv" : "fc-pulse-q8O")), columnEventTitleClass: (data) => joinClassNames(!data.isShort && (data.isNarrow ? "fc-pulse-vvo" : "fc-pulse-ztx"), "fc-pulse-kIZ"), 
+            /* More-Link
+            ----------------------------------------------------------------------------------------- */
+            moreLinkClass: `${outlineWidthFocusClass} ${tertiaryOutlineColorClass}`, moreLinkInnerClass: "fc-pulse-JTJ fc-pulse-O5O", columnMoreLinkClass: `fc-pulse-kOE fc-pulse-UZp fc-pulse-lqW fc-pulse-ePV fc-pulse-UPi ${strongSolidPressableClass} fc-pulse-82y fc-pulse-z3l fc-pulse-bLM`, columnMoreLinkInnerClass: (data) => joinClassNames(data.isNarrow
+                ? `fc-pulse-KbZ ${xxsTextClass}`
+                : "fc-pulse-xbC fc-pulse-17F", "fc-pulse-HBk"), 
+            /* Day Header
+            ----------------------------------------------------------------------------------------- */
+            dayHeaderClass: (data) => joinClassNames("fc-pulse-a65", data.inPopover ? "fc-pulse-QTT fc-pulse-G56" :
+                data.isMajor && "fc-pulse-UZp fc-pulse-I55"), dayHeaderInnerClass: (data) => joinClassNames("fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU", data.isNarrow ? "fc-pulse-17F" : "fc-pulse-gEy", data.inPopover ? joinClassNames("fc-pulse-RQK fc-pulse-qB7 fc-pulse-vvo fc-pulse-dpa fc-pulse-RKK fc-pulse-HBk", data.hasNavLink && mutedHoverPressableClass) : !data.dayNumberText ? joinClassNames("fc-pulse-qK4 fc-pulse-SrN fc-pulse-vvo fc-pulse-qMw fc-pulse-dpa fc-pulse-Znt", data.hasNavLink && mutedHoverPressableClass) : !data.isToday ? joinClassNames("fc-pulse-NoV fc-pulse-NqZ fc-pulse-6U1 fc-pulse-qMw fc-pulse-dpa fc-pulse-Znt", data.hasNavLink && mutedHoverPressableClass) : ("fc-pulse-ytQ fc-pulse-NoV fc-pulse-j5m fc-pulse-sgX fc-pulse-3jE")), dayHeaderContent: (data) => ((data.inPopover || !data.dayNumberText || !data.isToday) ? (React.createElement(React.Fragment, null, data.text)) : (React.createElement(React.Fragment, null, data.textParts.map((textPart, i) => (React.createElement("span", { key: i, className: joinClassNames("fc-pulse-csg", (textPart.type === "day" && data.isToday)
+                    ? joinClassNames("fc-pulse-F8v fc-pulse-cl4 fc-pulse-GRI fc-pulse-IdG fc-pulse-RKK fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU fc-pulse-a65", data.hasNavLink
+                        ? joinClassNames(tertiaryPressableGroupClass, outlineWidthGroupFocusClass, outlineOffsetClass, tertiaryOutlineColorClass)
+                        : tertiaryClass)
+                    : "fc-pulse-Znt") }, textPart.value)))))), 
+            /* Day Cell
+            ----------------------------------------------------------------------------------------- */
+            dayCellClass: (data) => joinClassNames("fc-pulse-UZp", data.isMajor
+                ? "fc-pulse-I55"
+                : "fc-pulse-G56"), dayCellTopClass: (data) => joinClassNames(data.isNarrow ? "fc-pulse-s9U" : "fc-pulse-naH", "fc-pulse-Hhr fc-pulse-uEy fc-pulse-RhI"), dayCellTopInnerClass: (data) => joinClassNames("fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU", data.isNarrow
+                ? `fc-pulse-8in fc-pulse-cL9 ${xxsTextClass}`
+                : "fc-pulse-19X fc-pulse-6U1 fc-pulse-gEy", !data.isToday
+                ? joinClassNames("fc-pulse-fdR fc-pulse-JTJ", !data.isOther && "fc-pulse-RKK", data.isNarrow ? "fc-pulse-qB7" : "fc-pulse-ybQ", data.monthText ? "fc-pulse-HBk" : "fc-pulse-Znt", data.hasNavLink && mutedHoverPressableClass)
+                : joinClassNames("fc-pulse-ytQ fc-pulse-3jE", data.isNarrow
+                    ? "fc-pulse-6gf"
+                    : "fc-pulse-NoV")), dayCellTopContent: (data) => (!data.isToday ? (React.createElement(React.Fragment, null, data.text)) : (React.createElement(React.Fragment, null, data.textParts.map((textPart, i) => (React.createElement("span", { key: i, className: joinClassNames("fc-pulse-csg", (textPart.type === "day" && data.isToday)
+                    ? joinClassNames("fc-pulse-IdG fc-pulse-RKK fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU fc-pulse-a65", data.isNarrow
+                        ? "fc-pulse-yFV"
+                        : "fc-pulse-Fzs fc-pulse-F8v fc-pulse-cl4", data.hasNavLink
+                        ? joinClassNames(tertiaryPressableGroupClass, outlineWidthGroupFocusClass, outlineOffsetClass, tertiaryOutlineColorClass)
+                        : tertiaryClass)
+                    : (data.monthText ? "fc-pulse-HBk" : "fc-pulse-Znt")) }, textPart.value)))))), dayCellInnerClass: (data) => joinClassNames(data.inPopover && "fc-pulse-aS8"), 
+            /* Popover
+            ----------------------------------------------------------------------------------------- */
+            popoverClass: "fc-pulse-HBk fc-pulse-Y27 fc-pulse-DC1 fc-pulse-8Kl fc-pulse-O5O fc-pulse-uPX fc-pulse-c0k fc-pulse-nhl fc-pulse-ND7", popoverCloseClass: `fc-pulse-ytQ fc-pulse-YA2 fc-pulse-rzf fc-pulse-lvE fc-pulse-KbZ fc-pulse-dpa ${mutedHoverPressableClass} ${outlineWidthFocusClass} ${tertiaryOutlineColorClass} fc-pulse-om0`, popoverCloseContent: () => React.createElement(EventCalendarCloseIcon, null), dayLaneClass: (data) => joinClassNames("fc-pulse-UZp", data.isMajor ? "fc-pulse-I55" : "fc-pulse-G56", data.isDisabled && faintBgClass), dayLaneInnerClass: (data) => (data.isStack
+                ? "fc-pulse-JQD"
+                : data.isNarrow ? "fc-pulse-6gf" : "fc-pulse-qK4"), slotLaneClass: (data) => joinClassNames("fc-pulse-UZp fc-pulse-G56", data.isMinor && "fc-pulse-M5N"), listDayClass: "fc-pulse-pLN fc-pulse-Hhr fc-pulse-bXY", listDayHeaderClass: `fc-pulse-QTT fc-pulse-G56 ${faintSolidBgClass} fc-pulse-HBk fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU fc-pulse-Klj`, listDayHeaderInnerClass: (data) => joinClassNames("fc-pulse-RQK fc-pulse-qMw fc-pulse-vvo fc-pulse-dpa fc-pulse-gEy", !data.level && "fc-pulse-RKK", (!data.level && data.isToday)
+                ? data.hasNavLink
+                    ? joinClassNames(tertiaryPressableClass, outlineOffsetClass)
+                    : tertiaryClass
+                : data.hasNavLink && mutedHoverPressableClass), listDayEventsClass: `fc-pulse-RmH fc-pulse-G56 fc-pulse-qMw fc-pulse-KyB fc-pulse-ODb`, 
+            /* Single Month (in Multi-Month)
+            ----------------------------------------------------------------------------------------- */
+            singleMonthClass: "fc-pulse-sr2", singleMonthHeaderClass: (data) => joinClassNames(data.isSticky && "fc-pulse-QTT fc-pulse-G56 fc-pulse-Y27", data.colCount > 1 ? "fc-pulse-hw7" : "fc-pulse-ztx", "fc-pulse-gfU"), singleMonthHeaderInnerClass: (data) => joinClassNames("fc-pulse-qMw fc-pulse-vvo fc-pulse-dpa fc-pulse-PuF fc-pulse-HBk fc-pulse-RKK", data.hasNavLink && mutedHoverPressableClass), 
+            /* Misc Table
+            ----------------------------------------------------------------------------------------- */
+            tableHeaderClass: (data) => joinClassNames(data.isSticky && "fc-pulse-Y27"), fillerClass: "fc-pulse-UZp fc-pulse-G56 fc-pulse-F6C", dayNarrowWidth: 100, dayHeaderRowClass: "fc-pulse-UZp fc-pulse-G56", dayRowClass: "fc-pulse-UZp fc-pulse-G56", slotHeaderRowClass: "fc-pulse-UZp fc-pulse-G56", slotHeaderInnerClass: "fc-pulse-Znt", 
+            /* Misc Content
+            ----------------------------------------------------------------------------------------- */
+            navLinkClass: `${outlineWidthFocusClass} ${tertiaryOutlineColorClass}`, inlineWeekNumberClass: (data) => joinClassNames("fc-pulse-YA2 fc-pulse-9o9 fc-pulse-JTJ fc-pulse-Ea4 fc-pulse-Znt", data.isNarrow
+                ? `fc-pulse-RWe fc-pulse-8in fc-pulse-KbZ ${xxsTextClass}`
+                : "fc-pulse-CdJ fc-pulse-xbC fc-pulse-17F", data.hasNavLink && mutedHoverPressableClass), highlightClass: "fc-pulse-gKu", nonBusinessClass: faintBgClass, nowIndicatorLineClass: "fc-pulse-7VH fc-pulse-v0S fc-pulse-R3n", nowIndicatorDotClass: "fc-pulse-xny fc-pulse-uDX fc-pulse-R3n fc-pulse-UmK fc-pulse-IdG fc-pulse-fo8 fc-pulse-bLM", 
+            /* View-Specific Options
+            ----------------------------------------------------------------------------------------- */
+            views: {
+                ...userViews,
+                dayGrid: {
+                    ...dayRowCommonClasses,
+                    dayHeaderAlign: (data) => data.inPopover ? "start" : data.isNarrow ? "center" : "end",
+                    dayHeaderDividerClass: `fc-pulse-QTT fc-pulse-G56`,
+                    dayCellBottomClass: getShortDayCellBottomClass,
+                    ...userViews?.dayGrid,
+                },
+                multiMonth: {
+                    ...dayRowCommonClasses,
+                    dayHeaderAlign: (data) => data.inPopover ? "start" : data.isNarrow ? "center" : "end",
+                    dayHeaderDividerClass: (data) => joinClassNames(data.isSticky && `fc-pulse-QTT fc-pulse-G56`),
+                    dayCellBottomClass: getShortDayCellBottomClass,
+                    viewClass: faintBgClass,
+                    tableBodyClass: `fc-pulse-UZp fc-pulse-G56 fc-pulse-Y27 fc-pulse-dpa fc-pulse-O5O`,
+                    ...userViews?.multiMonth,
+                },
+                timeGrid: {
+                    ...dayRowCommonClasses,
+                    dayHeaderAlign: (data) => data.inPopover ? "start" : "center",
+                    dayHeaderDividerClass: (data) => joinClassNames("fc-pulse-QTT", data.options.allDaySlot
+                        ? "fc-pulse-G56"
+                        : "fc-pulse-I55 fc-pulse-5jb"),
+                    dayCellBottomClass: tallDayCellBottomClass,
+                    /* TimeGrid > Week Number Header
+                    ------------------------------------------------------------------------------------- */
+                    weekNumberHeaderClass: "fc-pulse-gfU fc-pulse-RhI",
+                    weekNumberHeaderInnerClass: (data) => joinClassNames("fc-pulse-qK4 fc-pulse-6U1 fc-pulse-qMw fc-pulse-Znt fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU fc-pulse-dpa", data.isNarrow ? "fc-pulse-17F" : "fc-pulse-gEy", data.hasNavLink && mutedHoverPressableClass),
+                    /* TimeGrid > All-Day Header
+                    ------------------------------------------------------------------------------------- */
+                    allDayHeaderClass: "fc-pulse-gfU",
+                    allDayHeaderInnerClass: (data) => joinClassNames("fc-pulse-aS8 fc-pulse-Znt", data.isNarrow ? xxsTextClass : "fc-pulse-17F"),
+                    allDayDividerClass: `fc-pulse-QTT fc-pulse-I55 fc-pulse-5jb`,
+                    /* TimeGrid > Slot Header
+                    ------------------------------------------------------------------------------------- */
+                    slotHeaderClass: "fc-pulse-RhI",
+                    slotHeaderInnerClass: (data) => joinClassNames("fc-pulse-vPs fc-pulse-aS8", data.isNarrow
+                        ? `fc-pulse-byi ${xxsTextClass}`
+                        : "fc-pulse-IWs fc-pulse-17F", data.isFirst && "fc-pulse-C9h"),
+                    slotHeaderDividerClass: `fc-pulse-EWl fc-pulse-G56`,
+                    ...userViews?.timeGrid,
+                },
+                list: {
+                    /* List-View > List-Item Event
+                    ------------------------------------------------------------------------------------- */
+                    listItemEventClass: (data) => joinClassNames("fc-pulse-ytQ fc-pulse-ztx fc-pulse-dpa", data.isInteractive
+                        ? joinClassNames(faintHoverPressableClass, outlineInsetClass)
+                        : "fc-pulse-iAr"),
+                    listItemEventBeforeClass: "fc-pulse-4AD fc-pulse-n4P fc-pulse-IdG",
+                    listItemEventInnerClass: "fc-pulse-QDv",
+                    listItemEventTimeClass: "fc-pulse-f5K fc-pulse-yvz fc-pulse-8Ko fc-pulse-rcn fc-pulse-jQ9 fc-pulse-KyB fc-pulse-JTJ fc-pulse-O5O fc-pulse-yGY fc-pulse-gEy",
+                    listItemEventTitleClass: (data) => joinClassNames("fc-pulse-oee fc-pulse-qbd fc-pulse-jQ9 fc-pulse-KyB fc-pulse-JTJ fc-pulse-O5O fc-pulse-gEy", data.event.url && "fc-pulse-YdZ"),
+                    /* No-Events Screen
+                    ------------------------------------------------------------------------------------- */
+                    noEventsClass: "fc-pulse-oee fc-pulse-Hhr fc-pulse-bXY fc-pulse-gfU fc-pulse-a65",
+                    noEventsInnerClass: "fc-pulse-UyD",
+                    ...userViews?.list,
+                },
+            }, ...restOptions })));
+}
+
+export { dayRowCommonClasses, EventCalendarViews as default, faintBgClass, faintHoverPressableClass, faintSolidBgClass, getShortDayCellBottomClass, mutedBgClass, mutedHoverPressableClass, outlineInsetClass, outlineOffsetClass, outlineWidthClass, outlineWidthFocusClass, outlineWidthGroupFocusClass, rowPointerResizerClass, rowTouchResizerClass, strongSolidPressableClass, tallDayCellBottomClass, tertiaryClass, tertiaryOutlineColorClass, tertiaryPressableClass, tertiaryPressableGroupClass };

package/esm/pulse/ResourceTimeGrid.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface ResourceTimeGridProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function ResourceTimeGrid({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: ResourceTimeGridProps): React.JSX.Element;
+
+export { ResourceTimeGridProps, ResourceTimeGrid as default };

package/esm/pulse/ResourceTimeGrid.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import adaptivePlugin from '@fullcalendar/adaptive';
+import interactionPlugin from '@fullcalendar/interaction';
+import scrollGridPlugin from '@fullcalendar/scrollgrid';
+import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import SchedulerViews from './SchedulerViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import './EventCalendarViews.js';
+import '@mui/material';
+
+const plugins = [
+    adaptivePlugin,
+    interactionPlugin,
+    scrollGridPlugin,
+    resourceTimeGridPlugin,
+];
+const defaultAvailableViews = [
+    'resourceTimeGridDay',
+    'resourceTimeGridWeek',
+];
+const navLinkDayClick = 'resourceTimeGridDay';
+const navLinkWeekClick = 'resourceTimeGridWeek';
+function ResourceTimeGrid({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton, borderlessX: restOptions.borderlessX ?? restOptions.borderless }),
+        React.createElement(SchedulerViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { ResourceTimeGrid as default };

package/esm/pulse/ResourceTimeline.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CalendarOptions } from '@fullcalendar/core';
+
+interface ResourceTimelineProps extends Omit<CalendarOptions, 'class'> {
+    availableViews?: string[];
+    addButton?: {
+        isPrimary?: boolean;
+        text?: string;
+        hint?: string;
+        click?: (ev: MouseEvent) => void;
+    };
+}
+declare function ResourceTimeline({ availableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins, ...restOptions }: ResourceTimelineProps): React.JSX.Element;
+
+export { ResourceTimelineProps, ResourceTimeline as default };

package/esm/pulse/ResourceTimeline.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useCalendarController } from '@fullcalendar/react';
+import adaptivePlugin from '@fullcalendar/adaptive';
+import resourceTimelinePlugin from '@fullcalendar/resource-timeline';
+import interactionPlugin from '@fullcalendar/interaction';
+import EventCalendarToolbar from './EventCalendarToolbar.js';
+import SchedulerViews from './SchedulerViews.js';
+import EventCalendarContainer from './EventCalendarContainer.js';
+import '@mui/material/Box';
+import '@mui/material/Button';
+import '@mui/material/IconButton';
+import '@mui/material/Typography';
+import '@mui/material/ToggleButtonGroup';
+import '@mui/material/ToggleButton';
+import './icons.js';
+import '@fullcalendar/core';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+import './EventCalendarViews.js';
+import '@mui/material';
+
+const plugins = [
+    adaptivePlugin,
+    interactionPlugin,
+    resourceTimelinePlugin,
+];
+const defaultAvailableViews = [
+    'resourceTimelineDay',
+    'resourceTimelineWeek',
+];
+const navLinkDayClick = 'resourceTimelineDay';
+const navLinkWeekClick = 'resourceTimelineWeek';
+function ResourceTimeline({ availableViews = defaultAvailableViews, addButton, className, height, contentHeight, direction, plugins: userPlugins = [], ...restOptions }) {
+    const controller = useCalendarController();
+    const autoHeight = height === 'auto' || contentHeight === 'auto';
+    return (React.createElement(EventCalendarContainer, { direction: direction, className: className, height: height },
+        React.createElement(EventCalendarToolbar, { controller: controller, availableViews: availableViews, addButton: addButton, borderlessX: restOptions.borderlessX ?? restOptions.borderless }),
+        React.createElement(SchedulerViews, { liquidHeight: !autoHeight && height !== undefined, height: autoHeight ? 'auto' : contentHeight, initialView: availableViews[0], navLinkDayClick: navLinkDayClick, navLinkWeekClick: navLinkWeekClick, controller: controller, plugins: [...plugins, ...userPlugins], ...restOptions })));
+}
+
+export { ResourceTimeline as default };

package/esm/pulse/SchedulerViews.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EventCalendarViewsProps } from './EventCalendarViews.js';
+
+interface SchedulerViewsProps extends EventCalendarViewsProps {
+}
+declare function SchedulerViews({ views: userViews, ...restOptions }: SchedulerViewsProps): React.JSX.Element;
+
+export { SchedulerViewsProps, SchedulerViews as default };

package/esm/pulse/SchedulerViews.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { joinClassNames } from '@fullcalendar/core';
+import EventCalendarViews, { mutedBgClass, mutedHoverPressableClass, outlineWidthFocusClass, tertiaryOutlineColorClass, strongSolidPressableClass } from './EventCalendarViews.js';
+import { EventCalendarExpanderIcon } from './icons.js';
+import '@fullcalendar/react';
+import '@mui/material';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import '@mui/icons-material/Close';
+import '@mui/icons-material/ExpandMore';
+
+function SchedulerViews({ views: userViews, ...restOptions }) {
+    return (React.createElement(EventCalendarViews
+    /* Resource Day Header
+    ------------------------------------------------------------------------------------------- */
+    , { 
+        /* Resource Day Header
+        ------------------------------------------------------------------------------------------- */
+        resourceDayHeaderAlign: "center", resourceDayHeaderClass: (data) => joinClassNames(data.isMajor && "fc-pulse-UZp fc-pulse-I55"), resourceDayHeaderInnerClass: (data) => joinClassNames("fc-pulse-aS8 fc-pulse-Hhr fc-pulse-uEy fc-pulse-gfU fc-pulse-Znt", data.isNarrow ? "fc-pulse-17F" : "fc-pulse-gEy"), 
+        /* Resource Data Grid
+        ------------------------------------------------------------------------------------------- */
+        resourceColumnHeaderClass: "fc-pulse-UZp fc-pulse-G56 fc-pulse-a65", resourceColumnHeaderInnerClass: "fc-pulse-aS8 fc-pulse-HBk fc-pulse-gEy", resourceColumnResizerClass: "fc-pulse-YA2 fc-pulse-8ZZ fc-pulse-Ahl fc-pulse-W3O", resourceGroupHeaderClass: `fc-pulse-UZp fc-pulse-G56 ${mutedBgClass}`, resourceGroupHeaderInnerClass: "fc-pulse-aS8 fc-pulse-HBk fc-pulse-gEy", resourceCellClass: "fc-pulse-UZp fc-pulse-G56", resourceCellInnerClass: "fc-pulse-aS8 fc-pulse-HBk fc-pulse-gEy", resourceIndentClass: "fc-pulse-fpO fc-pulse-aCj fc-pulse-a65", resourceExpanderClass: `fc-pulse-ytQ fc-pulse-KbZ fc-pulse-dpa ${mutedHoverPressableClass} ${outlineWidthFocusClass} ${tertiaryOutlineColorClass}`, resourceExpanderContent: (data) => (React.createElement(EventCalendarExpanderIcon, { isExpanded: data.isExpanded })), resourceHeaderRowClass: "fc-pulse-UZp fc-pulse-G56", resourceRowClass: "fc-pulse-UZp fc-pulse-G56", resourceColumnDividerClass: "fc-pulse-EWl fc-pulse-I55", 
+        /* Timeline Lane
+        ------------------------------------------------------------------------------------------- */
+        resourceGroupLaneClass: `fc-pulse-UZp fc-pulse-G56 ${mutedBgClass}`, resourceLaneClass: "fc-pulse-UZp fc-pulse-G56", resourceLaneBottomClass: (data) => joinClassNames(data.options.eventOverlap && "fc-pulse-433"), timelineBottomClass: "fc-pulse-433", 
+        /* View-Specific Options
+        ------------------------------------------------------------------------------------------- */
+        views: {
+            ...userViews,
+            timeline: {
+                /* Timeline > Row Event
+                --------------------------------------------------------------------------------------- */
+                rowEventClass: (data) => joinClassNames(data.isEnd && "fc-pulse-bpq"),
+                rowEventInnerClass: (data) => data.options.eventOverlap ? "fc-pulse-ztx" : "fc-pulse-KyB",
+                /* Timeline > More-Link
+                --------------------------------------------------------------------------------------- */
+                rowMoreLinkClass: `fc-pulse-bpq fc-pulse-mwm fc-pulse-UZp fc-pulse-lqW fc-pulse-ePV fc-pulse-dpa ${strongSolidPressableClass} fc-pulse-82y`,
+                rowMoreLinkInnerClass: `fc-pulse-xbC fc-pulse-HBk fc-pulse-17F`,
+                /* Timeline > Slot Header
+                --------------------------------------------------------------------------------------- */
+                slotHeaderAlign: (data) => data.isTime ? "start" : "center",
+                slotHeaderClass: (data) => joinClassNames(data.level > 0 && "fc-pulse-UZp fc-pulse-G56", "fc-pulse-a65"),
+                slotHeaderInnerClass: (data) => joinClassNames("fc-pulse-aS8 fc-pulse-gEy", data.isTime && joinClassNames("fc-pulse-vPs fc-pulse-WvE", data.isFirst && "fc-pulse-C9h"), data.hasNavLink && "fc-pulse-jaW"),
+                slotHeaderDividerClass: `fc-pulse-QTT fc-pulse-I55 fc-pulse-5jb`,
+                ...userViews?.timeline,
+            },
+        }, ...restOptions }));
+}
+
+export { SchedulerViews as default };

package/esm/pulse/icons.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+declare function EventCalendarPrevIcon(): React.JSX.Element;
+declare function EventCalendarNextIcon(): React.JSX.Element;
+declare function EventCalendarCloseIcon(): React.JSX.Element;
+interface EventCalendarExpanderIconProps {
+    isExpanded: boolean;
+}
+declare function EventCalendarExpanderIcon({ isExpanded }: EventCalendarExpanderIconProps): React.JSX.Element;
+
+export { EventCalendarCloseIcon, EventCalendarExpanderIcon, EventCalendarExpanderIconProps, EventCalendarNextIcon, EventCalendarPrevIcon };

package/esm/pulse/icons.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { joinClassNames } from '@fullcalendar/core';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import CloseIcon from '@mui/icons-material/Close';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+const pressableIconClass = "fc-pulse-5Kh fc-pulse-HHp fc-pulse-La2";
+function EventCalendarPrevIcon() {
+    return React.createElement(ChevronLeftIcon, { className: "fc-pulse-AAt" });
+}
+function EventCalendarNextIcon() {
+    return React.createElement(ChevronRightIcon, { className: "fc-pulse-AAt" });
+}
+function EventCalendarCloseIcon() {
+    return (React.createElement(CloseIcon, { sx: { fontSize: 18, margin: "1px" }, className: pressableIconClass }));
+}
+function EventCalendarExpanderIcon({ isExpanded }) {
+    return (React.createElement(ExpandMoreIcon, { sx: { fontSize: 18, margin: "1px" }, className: joinClassNames(pressableIconClass, !isExpanded && "fc-pulse-doO fc-pulse-Bzb") }));
+}
+
+export { EventCalendarCloseIcon, EventCalendarExpanderIcon, EventCalendarNextIcon, EventCalendarPrevIcon };