@pnp/spfx-controls-react 3.21.0-beta.1365660 → 3.21.0-beta.1370835

package/lib/controls/calendar/WeekView.js

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { Body1, Body1Strong, Caption1Strong, Text, mergeClasses, } from '@fluentui/react-components';
+import { addDays, format, isToday, startOfWeek } from 'date-fns';
+import { useEffect, useRef, useState } from 'react';
+import { EventRenderer } from './EventRender';
+import { ResizeObserver } from '@juggle/resize-observer';
+import strings from 'ControlStrings';
+import { useCalendar } from './hooks/useCalendar';
+import { useUtils } from './hooks/useUtils';
+import { useWeekViewStyles } from './hooks/useWeekViewStyles';
+export var WeekView = function (props) {
+    var events = props.events, currentDay = props.currentDay, height = props.height;
+    var styles = useWeekViewStyles().styles;
+    var currentDate = useState(currentDay)[0];
+    var _a = useState(32), rowHeight = _a[0], setRowHeight = _a[1]; // Default row height
+    var calendarRef = useRef(null);
+    var _b = useUtils(), getSpanSlots = _b.getSpanSlots, getEventColors = _b.getEventColors, getCalendarColors = _b.getCalendarColors, formatDate = _b.formatDate;
+    var weekStart = startOfWeek(currentDate, { weekStartsOn: 0 });
+    var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    var getWeekEvents = useCalendar(timeZone).getWeekEvents;
+    // Dynamic row height calculation using ResizeObserver
+    useEffect(function () {
+        var observer = new ResizeObserver(function () {
+            if (calendarRef.current) {
+                var firstRowCell = calendarRef.current.querySelector('.dayCell');
+                if (firstRowCell) {
+                    setRowHeight(firstRowCell.offsetHeight);
+                }
+            }
+        });
+        if (calendarRef.current) {
+            observer.observe(calendarRef.current);
+        }
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    var renderTimeColumn = React.useCallback(function () {
+        return Array.from({ length: 24 }, function (_, hour) { return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.timeCell },
+                React.createElement(Body1Strong, null,
+                    " ",
+                    hour,
+                    ":00 ")),
+            React.createElement("div", { className: styles.timeCell }))); });
+    }, []);
+    var renderDayHeaders = React.useCallback(function () {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.blankHeader }),
+            Array.from({ length: 7 }, function (_, dayIndex) {
+                var day = addDays(weekStart, dayIndex);
+                var isTodayClass = isToday(day) ? styles.todayHeaderCell : '';
+                return (React.createElement("div", { key: dayIndex, className: mergeClasses(styles.dayHeaderCell, isTodayClass) },
+                    React.createElement(Text, { weight: "regular", size: 600, style: { paddingRight: 10 } }, formatDate(day.toISOString(), 'dd')),
+                    React.createElement(Body1, null, formatDate(day.toISOString(), 'EEE'))));
+            })));
+    }, [weekStart, styles]);
+    var renderFullDayEvents = React.useCallback(function () {
+        var weekEvents = getWeekEvents(events, weekStart.toISOString());
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.fullDayLabel },
+                React.createElement(Body1, null, strings.CalendarControlFullDaylabel)),
+            Array.from({ length: 7 }, function (_, dayIndex) {
+                var weekDay = formatDate(addDays(weekStart, dayIndex).toISOString(), 'yyyy-MM-dd');
+                var dayEvents = weekEvents.find(function (day) { return day.date === weekDay; });
+                var fullDayEvents = (dayEvents === null || dayEvents === void 0 ? void 0 : dayEvents.fullDayEvents) || [];
+                return (React.createElement("div", { key: dayIndex, className: styles.fullDayCell }, fullDayEvents.map(function (event) { return (React.createElement("div", { key: event.id, className: styles.fullDayEvent, style: {
+                        gridColumn: "".concat(dayIndex + 2),
+                        backgroundColor: event.color
+                            ? getCalendarColors(event.color).backgroundColor
+                            : getEventColors(event.category).backgroundColor,
+                    } },
+                    React.createElement(Caption1Strong, { className: styles.eventTitle }, event.title))); })));
+            })));
+    }, [
+        weekStart,
+        styles,
+        getWeekEvents,
+        getCalendarColors,
+        getEventColors,
+        events,
+    ]);
+    var renderDayCells = React.useCallback(function () {
+        var weekEvents = getWeekEvents(events, weekStart.toISOString());
+        return Array.from({ length: 7 }, function (_, dayIndex) {
+            var weekDay = format(addDays(weekStart, dayIndex), 'yyyy-MM-dd');
+            var dayEvents = weekEvents.find(function (day) { return day.date === weekDay; });
+            return (React.createElement(React.Fragment, null, dayEvents === null || dayEvents === void 0 ? void 0 : dayEvents.timeSlots.map(function (timeSlot, slotIndex) {
+                var eventCount = timeSlot.events.length; // Total events in the slot
+                return (React.createElement("div", { key: slotIndex, className: styles.dayCell, style: {
+                        gridRow: slotIndex + 3, // Offset to account for header and full-day row
+                    } }, timeSlot.events.map(function (event, eventIndex) {
+                    var startDate = new Date(event.start);
+                    var endDate = new Date(event.end);
+                    // Calculate the start and end slots based on event times
+                    var _a = getSpanSlots(startDate, endDate), spanSlots = _a.spanSlots, startSlot = _a.startSlot;
+                    // Only render the event in its starting timeslot
+                    if (slotIndex === startSlot) {
+                        // Event Render
+                        return (React.createElement(EventRenderer, { key: event.id, event: event, eventCount: eventCount, spanSlots: spanSlots, rowHeight: rowHeight, eventIndex: eventIndex, view: "week" }));
+                    }
+                    return null; // Skip rendering for non-starting slots
+                })));
+            })));
+        });
+    }, [weekStart, styles, getWeekEvents, getSpanSlots, rowHeight, events]);
+    return (React.createElement("div", { className: styles.container, style: { height: height } },
+        React.createElement("div", { ref: calendarRef, className: styles.weekGrid },
+            React.createElement("div", { className: styles.timeColumn }, renderTimeColumn()),
+            renderDayHeaders(),
+            renderFullDayEvents(),
+            renderDayCells())));
+};
+export default WeekView;
+//# sourceMappingURL=WeekView.js.map

package/lib/controls/calendar/WeekView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekView.js","sourceRoot":"","sources":["../../../src/controls/calendar/WeekView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,KAAK,EACL,WAAW,EACX,cAAc,EACd,IAAI,EACJ,YAAY,GACb,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,OAAO,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAQ9D,MAAM,CAAC,IAAM,QAAQ,GAA6B,UAAC,KAAqB;IAC9D,IAAA,MAAM,GAAyB,KAAK,OAA9B,EAAE,UAAU,GAAa,KAAK,WAAlB,EAAE,MAAM,GAAK,KAAK,OAAV,CAAW;IACrC,IAAA,MAAM,GAAK,iBAAiB,EAAE,OAAxB,CAAyB;IAChC,IAAA,WAAW,GAAI,QAAQ,CAAC,UAAU,CAAC,GAAxB,CAAyB;IACrC,IAAA,KAA4B,QAAQ,CAAS,EAAE,CAAC,EAA/C,SAAS,QAAA,EAAE,YAAY,QAAwB,CAAC,CAAC,qBAAqB;IAC7E,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC3C,IAAA,KACJ,QAAQ,EAAE,EADJ,YAAY,kBAAA,EAAE,cAAc,oBAAA,EAAE,iBAAiB,uBAAA,EAAE,UAAU,gBACvD,CAAC;IACb,IAAM,SAAS,GAAG,WAAW,CAAC,WAAW,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;IAChE,IAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC;IAE1D,IAAA,aAAa,GAAK,WAAW,CAAC,QAAQ,CAAC,cAA1B,CAA2B;IAEhD,sDAAsD;IACtD,SAAS,CAAC;QACR,IAAM,QAAQ,GAAG,IAAI,cAAc,CAAC;YAClC,IAAI,WAAW,CAAC,OAAO,EAAE;gBACvB,IAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,aAAa,CACpD,UAAU,CACO,CAAC;gBACpB,IAAI,YAAY,EAAE;oBAChB,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;iBACzC;aACF;QACH,CAAC,CAAC,CAAC;QACH,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;SACvC;QACD,OAAO;YACL,QAAQ,CAAC,UAAU,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,UAAC,CAAC,EAAE,IAAI,IAAK,OAAA,CAC7C;YACE,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ;gBAC7B,oBAAC,WAAW;;oBAAG,IAAI;2BAAmB,CAClC;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,GAAI,CAClC,CACJ,EAP8C,CAO9C,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC;QACzC,OAAO,CACL;YAEE,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,GAAI;YAErC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,UAAC,CAAC,EAAE,QAAQ;gBACrC,IAAM,GAAG,GAAG,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;gBACzC,IAAM,YAAY,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;gBAChE,OAAO,CACL,6BACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC;oBAE3D,oBAAC,IAAI,IAAC,MAAM,EAAC,SAAS,EAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,IAC1D,UAAU,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,CAC/B;oBACP,oBAAC,KAAK,QAAE,UAAU,CAAC,GAAG,CAAC,WAAW,EAAE,EAAE,KAAK,CAAC,CAAS,CACjD,CACP,CAAC;YACJ,CAAC,CAAC,CACD,CACJ,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAExB,IAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC;QAC5C,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC;QAClE,OAAO,CACL;YACE,6BAAK,SAAS,EAAE,MAAM,CAAC,YAAY;gBACjC,oBAAC,KAAK,QAAE,OAAO,CAAC,2BAA2B,CAAS,CAChD;YACL,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,UAAC,CAAC,EAAE,QAAQ;gBACrC,IAAM,OAAO,GAAG,UAAU,CACxB,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,WAAW,EAAE,EAC1C,YAAY,CACb,CAAC;gBACF,IAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,CAAC,IAAI,KAAK,OAAO,EAApB,CAAoB,CAAC,CAAC;gBACjE,IAAM,aAAa,GAAG,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,KAAI,EAAE,CAAC;gBAErD,OAAO,CACL,6BAAK,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,WAAW,IAC9C,aAAa,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,CAC5B,6BACE,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,KAAK,EAAE;wBACL,UAAU,EAAE,UAAG,QAAQ,GAAG,CAAC,CAAE;wBAC7B,eAAe,EAAE,KAAK,CAAC,KAAK;4BAC1B,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,eAAe;4BAChD,CAAC,CAAC,cAAc,CAAC,KAAK,CAAC,QAAS,CAAC,CAAC,eAAe;qBACpD;oBAED,oBAAC,cAAc,IAAC,SAAS,EAAE,MAAM,CAAC,UAAU,IACzC,KAAK,CAAC,KAAK,CACG,CACb,CACP,EAf6B,CAe7B,CAAC,CACE,CACP,CAAC;YACJ,CAAC,CAAC,CACD,CACJ,CAAC;IACJ,CAAC,EAAE;QACD,SAAS;QACT,MAAM;QACN,aAAa;QACb,iBAAiB;QACjB,cAAc;QACd,MAAM;KACP,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CAAC;QACvC,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,CAAC,CAAC;QAClE,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,UAAC,CAAC,EAAE,QAAQ;YAC3C,IAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC;YACnE,IAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,UAAC,GAAG,IAAK,OAAA,GAAG,CAAC,IAAI,KAAK,OAAO,EAApB,CAAoB,CAAC,CAAC;YAEjE,OAAO,CACL,0CACG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,CAAC,GAAG,CAAC,UAAC,QAAQ,EAAE,SAAS;gBAC5C,IAAM,UAAU,GAAG,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,2BAA2B;gBAEtE,OAAO,CACL,6BACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,KAAK,EAAE;wBACL,OAAO,EAAE,SAAS,GAAG,CAAC,EAAE,gDAAgD;qBACzE,IAEA,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,UAAU;oBACrC,IAAM,SAAS,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;oBACxC,IAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBACpC,yDAAyD;oBACnD,IAAA,KAA2B,YAAY,CAC3C,SAAS,EACT,OAAO,CACR,EAHO,SAAS,eAAA,EAAE,SAAS,eAG3B,CAAC;oBACF,iDAAiD;oBACjD,IAAI,SAAS,KAAK,SAAS,EAAE;wBAC3B,eAAe;wBACf,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAC,MAAM,GACX,CACH,CAAC;qBACH;oBACD,OAAO,IAAI,CAAC,CAAC,wCAAwC;gBACvD,CAAC,CAAC,CACE,CACP,CAAC;YACJ,CAAC,CAAC,CACD,CACJ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAExE,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;QAEzD,6BAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,QAAQ;YAC/C,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,IAAG,gBAAgB,EAAE,CAAO;YAC5D,gBAAgB,EAAE;YAClB,mBAAmB,EAAE;YACrB,cAAc,EAAE,CACb,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/controls/calendar/hooks/useCalendar.d.ts

@@ -0,0 +1,17 @@
+import { IEvent } from '../models/IEvents';
+export interface TimeSlot {
+    time: string;
+    events: IEvent[];
+}
+export interface DayEvents {
+    date: string;
+    fullDayEvents: IEvent[];
+    timeSlots: TimeSlot[];
+}
+export interface IUseCalendar {
+    getMonthCalendar: (events: IEvent[], year: number, month: number) => Record<string, IEvent[]>;
+    getWeekEvents: (events: IEvent[], startDate: string) => DayEvents[];
+}
+export declare const useCalendar: (timezone: string) => IUseCalendar;
+export default useCalendar;
+//# sourceMappingURL=useCalendar.d.ts.map

package/lib/controls/calendar/hooks/useCalendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendar.d.ts","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useCalendar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAI3C,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,SAAS,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,gBAAgB,EAAE,CAChB,MAAM,EAAE,MAAM,EAAE,EAChB,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,KACV,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAE9B,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,SAAS,EAAE,CAAC;CACrE;AAED,eAAO,MAAM,WAAW,aAAc,MAAM,KAAG,YAoI9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/controls/calendar/hooks/useCalendar.js

@@ -0,0 +1,104 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { useCallback, } from 'react';
+import { v4 as uuidv4 } from 'uuid'; // Use UUID for generating unique IDs
+export var useCalendar = function (timezone) {
+    // Initialize events with a unique ID
+    var initializeEventsWithId = useCallback(function (events) {
+        return events.map(function (event) { return (__assign(__assign({}, event), { id: event.id || uuidv4() })); });
+    }, []);
+    // Memoized helper for timezone handling
+    var toLocalDate = useCallback(function (dateString) {
+        return new Date(new Date(dateString).toLocaleString(undefined, { timeZone: timezone }));
+    }, [timezone]);
+    // Memoize getMonthCalendar to avoid re-creation unless dependencies change
+    var getMonthCalendar = useCallback(function (events, year, month) {
+        var eventsWithId = initializeEventsWithId(events);
+        var daysInMonth = new Date(year, month + 1, 0).getDate();
+        var calendarEventsByDay = {};
+        for (var day = 1; day <= daysInMonth; day++) {
+            var date = new Date(year, month, day);
+            var dateString = date.toISOString().split('T')[0];
+            calendarEventsByDay[dateString] = [];
+        }
+        eventsWithId.forEach(function (event) {
+            var eventStart = toLocalDate(event.start);
+            var eventEnd = toLocalDate(event.end);
+            var currentDate = new Date(eventStart);
+            while (currentDate <= eventEnd) {
+                var dateString = currentDate.toISOString().split('T')[0];
+                if (calendarEventsByDay[dateString]) {
+                    calendarEventsByDay[dateString].push(event);
+                }
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+        });
+        return calendarEventsByDay;
+    }, [toLocalDate]);
+    // Memoize getWeekEvents to avoid unnecessary re-computation
+    var getWeekEvents = useCallback(function (events, startDate) {
+        var weekEvents = [];
+        var start = toLocalDate(startDate);
+        var eventsWithId = initializeEventsWithId(events);
+        var _loop_1 = function (i) {
+            var currentDate = new Date(start);
+            currentDate.setDate(start.getDate() + i);
+            var dateString = currentDate.toISOString().split('T')[0];
+            var dayTimeSlots = Array.from({ length: 48 }, function (_, index) { return ({
+                time: "".concat(String(Math.floor(index / 2)).padStart(2, '0'), ":").concat(index % 2 === 0 ? '00' : '30'),
+                events: [],
+            }); });
+            var fullDayEvents = [];
+            eventsWithId.forEach(function (event) {
+                var eventStart = toLocalDate(event.start);
+                var eventEnd = toLocalDate(event.end);
+                if (event.isFullDay) {
+                    if (eventStart.toISOString().split('T')[0] <= dateString &&
+                        eventEnd.toISOString().split('T')[0] >= dateString) {
+                        fullDayEvents.push(event);
+                    }
+                    return;
+                }
+                if (eventStart.toISOString().split('T')[0] <= dateString &&
+                    eventEnd.toISOString().split('T')[0] >= dateString) {
+                    var currentSlot = new Date(eventStart);
+                    while (currentSlot <= eventEnd) {
+                        var slotDateString = currentSlot.toISOString().split('T')[0];
+                        if (slotDateString === dateString) {
+                            var slotIndex = currentSlot.getHours() * 2 +
+                                (currentSlot.getMinutes() >= 30 ? 1 : 0);
+                            if (dayTimeSlots[slotIndex]) {
+                                dayTimeSlots[slotIndex].events.push(event);
+                            }
+                        }
+                        currentSlot.setMinutes(currentSlot.getMinutes() + 30);
+                    }
+                }
+            });
+            weekEvents.push({
+                date: dateString,
+                fullDayEvents: fullDayEvents,
+                timeSlots: dayTimeSlots,
+            });
+        };
+        for (var i = 0; i < 7; i++) {
+            _loop_1(i);
+        }
+        return weekEvents;
+    }, [toLocalDate]);
+    return {
+        getMonthCalendar: getMonthCalendar,
+        getWeekEvents: getWeekEvents,
+    };
+};
+export default useCalendar;
+//# sourceMappingURL=useCalendar.js.map

package/lib/controls/calendar/hooks/useCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendar.js","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useCalendar.ts"],"names":[],"mappings":";;;;;;;;;;;AAEA,OAAO,EAAE,WAAW,GAAG,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC,CAAC,qCAAqC;AAuB1E,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,QAAgB;IAC1C,qCAAqC;IAErC,IAAM,sBAAsB,GAAG,WAAW,CACxC,UAAC,MAAgB;QACf,OAAA,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,uBACf,KAAK,KACR,EAAE,EAAE,KAAK,CAAC,EAAE,IAAI,MAAM,EAAE,IACxB,EAHkB,CAGlB,CAAC;IAHH,CAGG,EACL,EAAE,CACH,CAAC;IAEF,wCAAwC;IACxC,IAAM,WAAW,GAAG,WAAW,CAC7B,UAAC,UAAkB;QACjB,OAAO,IAAI,IAAI,CACb,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CACvE,CAAC;IACJ,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,2EAA2E;IAC3E,IAAM,gBAAgB,GAAG,WAAW,CAClC,UACE,MAAgB,EAChB,IAAY,EACZ,KAAa;QAEb,IAAM,YAAY,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;QACpD,IAAM,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QAC3D,IAAM,mBAAmB,GAA6B,EAAE,CAAC;QAEzD,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI,WAAW,EAAE,GAAG,EAAE,EAAE;YAC3C,IAAM,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;YACxC,IAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,mBAAmB,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC;SACtC;QAED,YAAY,CAAC,OAAO,CAAC,UAAA,KAAK;YACxB,IAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5C,IAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YACxC,IAAM,WAAW,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;YAEzC,OAAO,WAAW,IAAI,QAAQ,EAAE;gBAC9B,IAAM,UAAU,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC3D,IAAI,mBAAmB,CAAC,UAAU,CAAC,EAAE;oBACnC,mBAAmB,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC7C;gBACD,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;aAChD;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,mBAAmB,CAAC;IAC7B,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,4DAA4D;IAC5D,IAAM,aAAa,GAAG,WAAW,CAC/B,UAAC,MAAgB,EAAE,SAAiB;QAClC,IAAM,UAAU,GAAgB,EAAE,CAAC;QACnC,IAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;QACrC,IAAM,YAAY,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;gCAC3C,CAAC;YACR,IAAM,WAAW,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;YACpC,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;YACzC,IAAM,UAAU,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAE3D,IAAM,YAAY,GAAe,KAAK,CAAC,IAAI,CACzC,EAAE,MAAM,EAAE,EAAE,EAAE,EACd,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,CAAC;gBACb,IAAI,EAAE,UAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,cACrD,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAC7B;gBACF,MAAM,EAAE,EAAE;aACX,CAAC,EALY,CAKZ,CACH,CAAC;YAEF,IAAM,aAAa,GAAa,EAAE,CAAC;YAEnC,YAAY,CAAC,OAAO,CAAC,UAAA,KAAK;gBACxB,IAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBAC5C,IAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBAExC,IAAI,KAAK,CAAC,SAAS,EAAE;oBACnB,IACE,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU;wBACpD,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU,EAClD;wBACA,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;qBAC3B;oBACD,OAAO;iBACR;gBAED,IACE,UAAU,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU;oBACpD,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU,EAClD;oBACA,IAAM,WAAW,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;oBACzC,OAAO,WAAW,IAAI,QAAQ,EAAE;wBAC9B,IAAM,cAAc,GAAG,WAAW,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC/D,IAAI,cAAc,KAAK,UAAU,EAAE;4BACjC,IAAM,SAAS,GACb,WAAW,CAAC,QAAQ,EAAE,GAAG,CAAC;gCAC1B,CAAC,WAAW,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;4BAC3C,IAAI,YAAY,CAAC,SAAS,CAAC,EAAE;gCAC3B,YAAY,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;6BAC5C;yBACF;wBACD,WAAW,CAAC,UAAU,CAAC,WAAW,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;qBACvD;iBACF;YACH,CAAC,CAAC,CAAC;YAEH,UAAU,CAAC,IAAI,CAAC;gBACd,IAAI,EAAE,UAAU;gBAChB,aAAa,eAAA;gBACb,SAAS,EAAE,YAAY;aACxB,CAAC,CAAC;;QAvDL,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;oBAAjB,CAAC;SAwDT;QAED,OAAO,UAAU,CAAC;IACpB,CAAC,EACD,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO;QACL,gBAAgB,kBAAA;QAEhB,aAAa,eAAA;KACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/controls/calendar/hooks/useCalendarStyles.d.ts

@@ -0,0 +1,21 @@
+export interface IUseCalendarStyles {
+    styles: ICalendarStyles;
+    applyEventHouverColorClass: (backgroundColor: string, houverColor: string) => string;
+}
+export interface ICalendarStyles {
+    calendarWrapper: string;
+    header: string;
+    dayHeader: string;
+    day: string;
+    otherMonthDay: string;
+    cardDay: string;
+    cardDayOnHover: string;
+    currentDay: string;
+    currentDayLabel: string;
+    eventCard: string;
+    eventContainer: string;
+    eventCardWeekView: string;
+    popoverContent: string;
+}
+export declare const useCalendarStyles: () => IUseCalendarStyles;
+//# sourceMappingURL=useCalendarStyles.d.ts.map

package/lib/controls/calendar/hooks/useCalendarStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarStyles.d.ts","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useCalendarStyles.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,eAAe,CAAC;IACxB,0BAA0B,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;CACtF;AAED,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,iBAAiB,QAAQ,kBAuHrC,CAAC"}

package/lib/controls/calendar/hooks/useCalendarStyles.js

@@ -0,0 +1,118 @@
+import { css } from "@emotion/css";
+import { tokens } from "@fluentui/react-components";
+export var useCalendarStyles = function () {
+    var styles = {
+        calendarWrapper: css({
+            padding: "20px",
+            paddingTop: "10px",
+            overflow: "auto",
+            flex: 1,
+            display: "grid",
+            gridTemplateColumns: "repeat(7, 1fr)",
+            gridTemplateRows: "auto",
+            gridAutoRows: "minmax(100px, 1fr)",
+            gap: "1px",
+            width: "calc(100% - 40px)", // Full width minus padding
+        }),
+        header: css({
+            display: "flex",
+            justifyContent: "start",
+            gap: "10px",
+            alignItems: "center",
+            padding: "16px",
+        }),
+        dayHeader: css({
+            textAlign: "start",
+            padding: "8px",
+            borderBottom: "1px solid ".concat(tokens.colorNeutralStroke1),
+        }),
+        day: css({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            border: "1px solid ".concat(tokens.colorNeutralStroke1),
+            backgroundColor: tokens.colorNeutralBackground1,
+            position: "relative", // Ensure proper stacking context
+        }),
+        otherMonthDay: css({
+            color: tokens.colorNeutralStroke2,
+            backgroundColor: tokens.colorNeutralBackground2,
+        }),
+        cardDay: css({
+            height: "100%",
+            minHeight: 100,
+            borderRadius: 0,
+            overflow: "hidden !important",
+        }),
+        cardDayOnHover: css({
+            ":hover": {
+                backgroundColor: tokens.colorNeutralBackground2,
+            },
+        }),
+        currentDay: css({
+            borderTop: "5px solid ".concat(tokens.colorBrandBackground),
+        }),
+        currentDayLabel: css({
+            color: tokens.colorBrandBackground,
+            fontWeight: 600,
+        }),
+        eventCard: css({
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            zIndex: 1, // Ensure it appears above parent hover styles
+        }),
+        eventContainer: css({
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto",
+            paddingTop: "5px",
+            paddingBottom: "5px",
+            paddingLeft: "5px",
+            paddingRight: "5px",
+            // Scrollbar styles
+            "::-webkit-scrollbar": {
+                width: "5px",
+                height: "5px", // Height for horizontal scrollbars
+            },
+            "::-webkit-scrollbar-track": {
+                background: tokens.colorNeutralBackground4,
+                borderRadius: "10px",
+            },
+            "::-webkit-scrollbar-thumb": {
+                background: tokens.colorBrandStroke2Hover,
+                borderRadius: "10px",
+            },
+            "::-webkit-scrollbar-thumb:hover": {
+                background: tokens.colorNeutralStroke2, // Dark gray for the thumb
+            },
+        }),
+        eventCardWeekView: css({
+            backgroundColor: tokens.colorBrandBackground,
+            color: tokens.colorNeutralForegroundOnBrand,
+            borderRadius: "4px",
+            padding: "4px",
+            margin: "2px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            height: "100%",
+        }),
+        popoverContent: css({
+            padding: 0,
+            borderTopWidth: 20,
+            borderTopStyle: "solid",
+        }),
+    };
+    var applyEventHouverColorClass = function (backgroundColor, houverColor) {
+        return css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : tokens.colorBrandBackground,
+            ":hover": {
+                backgroundColor: houverColor !== null && houverColor !== void 0 ? houverColor : tokens.colorBrandBackgroundHover,
+            },
+        });
+    };
+    return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass };
+};
+//# sourceMappingURL=useCalendarStyles.js.map

package/lib/controls/calendar/hooks/useCalendarStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCalendarStyles.js","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useCalendarStyles.ts"],"names":[],"mappings":"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"}

package/lib/controls/calendar/hooks/useDayViewStyles.d.ts

@@ -0,0 +1,23 @@
+export declare const useDayViewStyles: () => {
+    styles: {
+        container: string;
+        header: string;
+        dayGrid: string;
+        blankHeader: string;
+        timeColumn: string;
+        timeCell: string;
+        fullDayRow: string;
+        fullDayLabel: string;
+        fullDayCell: string;
+        fullDayEvent: string;
+        dayHeaderCell: string;
+        todayHeaderCell: string;
+        eventCard: string;
+        dayCell: string;
+        currentTimeIndicator: string;
+        currentHalfHourCell: string;
+        eventTitle: string;
+    };
+    applyEventHouverColorClass: (backgroundColor: string, houveColor: string) => string;
+};
+//# sourceMappingURL=useDayViewStyles.d.ts.map

package/lib/controls/calendar/hooks/useDayViewStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDayViewStyles.d.ts","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useDayViewStyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;kDA6KR,MAAM,cACX,MAAM;CAWrB,CAAC"}

package/lib/controls/calendar/hooks/useDayViewStyles.js

@@ -0,0 +1,181 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+import { css } from "@emotion/css";
+import { tokens } from "@fluentui/react-components";
+export var useDayViewStyles = function () {
+    var styles = {
+        container: css({
+            display: "flex",
+            flexDirection: "column",
+            width: "calc(100% - 40px)",
+            height: "100vh",
+            overflow: "hidden",
+            padding: "20px",
+        }),
+        header: css({
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "16px",
+            borderBottom: "1px solid ".concat(tokens.colorNeutralStroke1),
+        }),
+        dayGrid: css({
+            display: "grid",
+            gridTemplateColumns: "80px 1fr",
+            gridTemplateRows: "50px 40px repeat(48, 33px)",
+            height: "calc(100vh - 100px)",
+            overflowY: "auto",
+            border: "1px solid ".concat(tokens.colorNeutralStroke1),
+            maxHeight: "fit-content",
+            scrollbarWidth: "thin",
+            scrollbarColor: "".concat(tokens.colorBrandBackground, " ").concat(tokens.colorNeutralBackground1),
+            "&::-webkit-scrollbar": {
+                width: "8px", // Width of the scrollbar
+            },
+            "&::-webkit-scrollbar-track": {
+                background: tokens.colorNeutralBackground1, // Scrollbar track background
+            },
+            "&::-webkit-scrollbar-thumb": {
+                background: tokens.colorBrandBackground,
+                borderRadius: "4px", // Rounded corners for the thumb
+            },
+            "&::-webkit-scrollbar-thumb:hover": {
+                background: tokens.colorBrandBackgroundHover, // Lighter color on hover
+            },
+        }),
+        blankHeader: css({
+            gridColumn: "1",
+            backgroundColor: tokens.colorNeutralBackground3,
+            borderBottom: "3px solid ".concat(tokens.colorNeutralStroke3),
+            position: 'sticky',
+            top: 0,
+            zIndex: 10, // Ensures it stays above the scrolling grid
+        }),
+        timeColumn: css({
+            gridColumn: "1",
+            gridRow: "3 / span 49",
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: tokens.colorNeutralBackground1,
+            borderRight: "1px solid ".concat(tokens.colorNeutralStroke1),
+        }),
+        timeCell: css({
+            height: "100%",
+            maxHeight: "32px",
+            minHeight: "32px",
+            display: "flex",
+            alignItems: "center",
+            fontSize: "12px",
+            color: tokens.colorNeutralForeground3,
+            borderBottom: "1px solid ".concat(tokens.colorNeutralStroke1),
+            justifyContent: "center",
+        }),
+        fullDayRow: css({
+            gridRow: "2",
+            display: "grid",
+            gridTemplateColumns: "80px 33px",
+            gap: "0",
+            padding: "0",
+            backgroundColor: tokens.colorNeutralBackground2,
+            borderBottom: "3px solid ".concat(tokens.colorNeutralStroke2), // Bottom border for the row
+        }),
+        fullDayLabel: css({
+            gridColumn: "1",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            alignContent: "center",
+            color: tokens.colorBrandBackground,
+            padding: "5px",
+            borderRight: "1px solid ".concat(tokens.colorNeutralStroke1),
+            borderBottom: "3px solid ".concat(tokens.colorNeutralStroke2), // Bottom border for the cell
+        }),
+        fullDayCell: css({
+            borderRight: "1px solid ".concat(tokens.colorNeutralStroke1),
+            display: "flex",
+            flexDirection: "row",
+            gap: "2px",
+            padding: "4px",
+            borderBottom: "3px solid ".concat(tokens.colorNeutralStroke2),
+            overflow: "hidden", // Ensure events don’t overflow the cell
+        }),
+        fullDayEvent: css({
+            flex: "1 1 auto",
+            minWidth: "24px",
+            height: "24px",
+            padding: "4px 8px",
+            backgroundColor: tokens.colorBrandBackground,
+            borderRadius: "4px",
+            overflow: "hidden",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+        }),
+        dayHeaderCell: css({
+            textAlign: "center",
+            backgroundColor: tokens.colorNeutralBackground2,
+            padding: "8px",
+            fontWeight: "bold",
+            borderBottom: "1px solid ".concat(tokens.colorNeutralStroke1),
+            position: 'sticky',
+            top: 0,
+            zIndex: 10, // Ensures it stays above the scrolling grid
+        }),
+        todayHeaderCell: css({
+            borderTop: "5px solid ".concat(tokens.colorBrandBackground),
+        }),
+        eventCard: css({
+            alignItems: "center",
+            justifyContent: "center",
+            marginRight: "2px",
+            zIndex: 1,
+            position: "absolute",
+            alignContent: "center",
+            overflow: "hidden",
+            /* ':hover': {
+              pointerEvents: 'auto',
+              cursor: 'pointer',
+              opacity: 0.8,
+              color: tokens.colorNeutralForegroundOnBrand,
+            }, */
+        }),
+        dayCell: css({
+            borderBottom: "1px solid ".concat(tokens.colorNeutralStroke1),
+            borderRight: "1px solid ".concat(tokens.colorNeutralStroke1),
+            position: "relative",
+            overflow: "visible",
+            FlexDirection: "column",
+            gap: "4px",
+        }),
+        currentTimeIndicator: css({
+            position: "absolute",
+            left: 0,
+            height: "2px",
+            backgroundColor: tokens.colorPaletteRedBorderActive,
+            width: "100%",
+            zIndex: 1,
+        }),
+        currentHalfHourCell: css({
+            border: "2px solid ".concat(tokens.colorPaletteRedBorderActive), // Highlight with a red border
+        }),
+        eventTitle: css({
+            display: "-webkit-box",
+            "-webkit-line-clamp": "1",
+            "-webkit-box-orient": "vertical",
+            textAlign: "start",
+            textOverflow: "ellipsis",
+            paddingLeft: "8px",
+            wordBreak: "break-word",
+            overflow: "hidden",
+        }),
+    };
+    var applyEventHouverColorClass = function (backgroundColor, houveColor) {
+        return css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : tokens.colorBrandBackground,
+            ":hover": {
+                backgroundColor: houveColor !== null && houveColor !== void 0 ? houveColor : tokens.colorBrandBackgroundHover,
+            },
+        });
+    };
+    return { styles: styles, applyEventHouverColorClass: applyEventHouverColorClass };
+};
+//# sourceMappingURL=useDayViewStyles.js.map

package/lib/controls/calendar/hooks/useDayViewStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDayViewStyles.js","sourceRoot":"","sources":["../../../../src/controls/calendar/hooks/useDayViewStyles.ts"],"names":[],"mappings":"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"}