@super-calendar/dom 2.2.0 → 2.3.0

package/dist/index.js

@@ -1218,13 +1218,19 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 							onPointerMove: cellEnabled ? moveCreate : void 0,
 							onPointerUp: cellEnabled ? endCreate : void 0,
 							onPointerCancel: cellEnabled ? cancelCreate : void 0,
-							...dataState({ "data-today": (0, _super_calendar_core.getIsToday)(day) }),
+							...dataState({
+								"data-today": (0, _super_calendar_core.getIsToday)(day),
+								"data-weekend": (0, _super_calendar_core.isWeekend)(day)
+							}),
 							...slot("dayColumn", {
 								base: {
 									flex: 1,
 									position: "relative"
 								},
-								themed: { borderLeft: `1px solid ${theme.gridLine}` }
+								themed: {
+									borderLeft: `1px solid ${theme.gridLine}`,
+									...(0, _super_calendar_core.isWeekend)(day) ? { background: theme.weekendBackground } : null
+								}
 							}),
 							children: [
 								bands.map((b) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { LegendList } from "@legendapp/list/react";
 import { addDays, addMinutes, addMonths, endOfMonth, format, isSameDay, isSameMonth, startOfDay, startOfMonth } from "date-fns";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { bandRounding, buildMonthGrid, buildMonthGrid as buildMonthGrid$1, cellRangeFromDrag, closedHourBands, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, expandRecurringEvents, formatHour, getIsToday, getViewDays, getViewDays as getViewDays$1, groupEventsByDay, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, lightColors, monthVisibleCount, nextDateRange, nextDateRange as nextDateRange$1, parseICalendar, rangeBandKind, titleNumberOfLines, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken, weekdayFormatToken as weekdayFormatToken$1 } from "@super-calendar/core";
+import { bandRounding, buildMonthGrid, buildMonthGrid as buildMonthGrid$1, cellRangeFromDrag, closedHourBands, compareDayEvents, darkColors, dayBadgeKind, daySelectionState, eventAccessibilityLabel, eventChipLayout, eventTimeLabel, expandRecurringEvents, formatHour, getIsToday, getViewDays, getViewDays as getViewDays$1, groupEventsByDay, isAllDayEvent, isAllDayEvent as isAllDayEvent$1, isDateSelectable, isRangeEndpoint, isSameCalendarDay, isWeekend, isWithinDateRange, layoutDayEvents, layoutDayEvents as layoutDayEvents$1, lightColors, monthVisibleCount, nextDateRange, nextDateRange as nextDateRange$1, parseICalendar, rangeBandKind, titleNumberOfLines, toICalendar, useDateRange, useMonthGrid, weekdayFormatToken, weekdayFormatToken as weekdayFormatToken$1 } from "@super-calendar/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/slots.ts
 /** Join truthy class names (a dependency-free clsx-lite). */
@@ -1217,13 +1217,19 @@ function TimeGrid({ date, events = [], mode = "day", numberOfDays = 1, weekStart
 							onPointerMove: cellEnabled ? moveCreate : void 0,
 							onPointerUp: cellEnabled ? endCreate : void 0,
 							onPointerCancel: cellEnabled ? cancelCreate : void 0,
-							...dataState({ "data-today": getIsToday(day) }),
+							...dataState({
+								"data-today": getIsToday(day),
+								"data-weekend": isWeekend(day)
+							}),
 							...slot("dayColumn", {
 								base: {
 									flex: 1,
 									position: "relative"
 								},
-								themed: { borderLeft: `1px solid ${theme.gridLine}` }
+								themed: {
+									borderLeft: `1px solid ${theme.gridLine}`,
+									...isWeekend(day) ? { background: theme.weekendBackground } : null
+								}
 							}),
 							children: [
 								bands.map((b) => /* @__PURE__ */ jsx("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@super-calendar/dom",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Virtualized month / week / day calendar and date picker for react-dom. No React Native, no react-native-web.",
   "keywords": [
     "calendar",
@@ -48,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@super-calendar/core": "2.2.0"
+    "@super-calendar/core": "2.3.0"
   },
   "peerDependencies": {
     "@legendapp/list": ">=3",

package/src/TimeGrid.tsx

@@ -25,6 +25,7 @@ import {
   getViewDays,
   isAllDayEvent,
   isSameCalendarDay,
+  isWeekend,
   layoutDayEvents,
   type TimeGridMode,
   titleNumberOfLines,
@@ -770,10 +771,15 @@ export function TimeGrid<T = unknown>({
                 onPointerMove={cellEnabled ? moveCreate : undefined}
                 onPointerUp={cellEnabled ? endCreate : undefined}
                 onPointerCancel={cellEnabled ? cancelCreate : undefined}
-                {...dataState({ "data-today": getIsToday(day) })}
+                {...dataState({ "data-today": getIsToday(day), "data-weekend": isWeekend(day) })}
                 {...slot("dayColumn", {
                   base: { flex: 1, position: "relative" },
-                  themed: { borderLeft: `1px solid ${theme.gridLine}` },
+                  // Weekend columns are tinted (matching the native renderer); the
+                  // tint sits behind the grid lines, business-hours shade and events.
+                  themed: {
+                    borderLeft: `1px solid ${theme.gridLine}`,
+                    ...(isWeekend(day) ? { background: theme.weekendBackground } : null),
+                  },
                 })}
               >
                 {/* Business-hours shade, behind the grid lines and events. */}