@stfrigerio/sito-template 0.1.31 → 0.1.33

package/dist/index.js

@@ -2690,14 +2690,38 @@ var styles$8 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar
  *   onEventClick={handleEventClick}
  * />
  */
-function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState }) {
+function Calendar({ events, onEventClick, onDateClick, onEventClickByView, onDateClickByView, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState, hideHeader = false }) {
     const [currentDate, setCurrentDate] = React.useState(initialDate);
     const [currentViewMode, setCurrentViewMode] = React.useState(viewMode);
+    const dayViewScrollRef = React.useRef(null);
     const { eventColors = {}, iconRenderer, maxEventsPerDay = 3, mondayStart = false, showWeekNumbers = false, dateFormat = { month: 'long', year: 'numeric' }, locale = 'en-US', dayLabels, monthNames } = config;
     const defaultDayLabels = mondayStart
         ? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
     const finalDayLabels = dayLabels || defaultDayLabels;
+    // Auto-scroll to current time in day view
+    React.useEffect(() => {
+        if (currentViewMode === 'day' && dayViewScrollRef.current) {
+            // Check if viewing today
+            const now = new Date();
+            const isToday = currentDate.toDateString() === now.toDateString();
+            if (isToday) {
+                // Calculate scroll position based on current time
+                const currentHour = now.getHours();
+                const currentMinute = now.getMinutes();
+                const minutesSinceMidnight = currentHour * 60 + currentMinute;
+                // Each hour is 60px, so calculate pixel position
+                // Scroll to put current time in the upper third of the view
+                const scrollPosition = (minutesSinceMidnight / 60) * 60 - 100; // Subtract 100 to show some context above
+                // Use setTimeout to ensure DOM is ready
+                setTimeout(() => {
+                    if (dayViewScrollRef.current) {
+                        dayViewScrollRef.current.scrollTop = Math.max(0, scrollPosition);
+                    }
+                }, 0);
+            }
+        }
+    }, [currentViewMode, currentDate]);
     const calendarData = React.useMemo(() => {
         const year = currentDate.getFullYear();
         const month = currentDate.getMonth();
@@ -2840,12 +2864,22 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
         return getContrastColor(bgColor);
     };
     const handleEventClick = (event) => {
-        if (onEventClick) {
+        // Check for view-specific handler first
+        if (onEventClickByView && onEventClickByView[currentViewMode]) {
+            onEventClickByView[currentViewMode](event);
+        }
+        else if (onEventClick) {
+            // Fall back to general handler
             onEventClick(event);
         }
     };
     const handleDateClick = (date) => {
-        if (onDateClick) {
+        // Check for view-specific handler first
+        if (onDateClickByView && onDateClickByView[currentViewMode]) {
+            onDateClickByView[currentViewMode](date);
+        }
+        else if (onDateClick) {
+            // Fall back to general handler
             onDateClick(date);
         }
     };
@@ -2865,9 +2899,9 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
     if (loading) {
         return (jsxRuntime.jsx("div", { className: `${styles$8.calendar} ${styles$8.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$8.loadingSpinner, children: "Loading..." }) }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${styles$8.calendar} ${className}`, style: style, children: [jsxRuntime.jsxs("div", { className: styles$8.header, children: [jsxRuntime.jsxs("div", { className: styles$8.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$8.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$8.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$8.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$8.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$8.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'month' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'week' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'day' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] }), currentViewMode !== 'day' && (jsxRuntime.jsxs("div", { className: styles$8.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$8.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$8.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
+    return (jsxRuntime.jsxs("div", { className: `${styles$8.calendar} ${className}`, style: style, children: [!hideHeader && (jsxRuntime.jsxs("div", { className: styles$8.header, children: [jsxRuntime.jsxs("div", { className: styles$8.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$8.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$8.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$8.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$8.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$8.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'month' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'week' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'day' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] })), currentViewMode !== 'day' && (jsxRuntime.jsxs("div", { className: styles$8.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$8.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$8.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
             // Day view layout
-            jsxRuntime.jsxs("div", { className: styles$8.dayView, children: [jsxRuntime.jsxs("div", { className: styles$8.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$8.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$8.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsxRuntime.jsx("div", { className: styles$8.dayViewScrollContainer, children: jsxRuntime.jsxs("div", { className: styles$8.dayViewContent, children: [(() => {
+            jsxRuntime.jsxs("div", { className: styles$8.dayView, children: [jsxRuntime.jsxs("div", { className: styles$8.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$8.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$8.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsxRuntime.jsx("div", { className: styles$8.dayViewScrollContainer, ref: dayViewScrollRef, children: jsxRuntime.jsxs("div", { className: styles$8.dayViewContent, children: [(() => {
                                     const now = new Date();
                                     const currentHour = now.getHours();
                                     const currentMinute = now.getMinutes();