@mantine/schedule 9.5.2 → 9.6.0

package/cjs/utils/to-date-string/to-date-string.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"to-date-string.cjs","names":[],"sources":["../../../src/utils/to-date-string/to-date-string.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue } from '../../types';\n\nexport function toDateString(date: AnyDateValue): DateStringValue {\n  return dayjs(date).format('YYYY-MM-DD 00:00:00');\n}\n"],"mappings":";;;;;AAGA,SAAgB,aAAa,MAAqC;CAChE,QAAA,GAAA,MAAA,QAAA,CAAa,IAAI,CAAC,CAAC,OAAO,qBAAqB;AACjD"}
+{"version":3,"file":"to-date-string.cjs","names":[],"sources":["../../../src/utils/to-date-string/to-date-string.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue } from '../../types';\n\nexport function toDateString(date: AnyDateValue): DateStringValue {\n  return dayjs(date).format('YYYY-MM-DD 00:00:00');\n}\n"],"mappings":";;;;;AAGA,SAAgB,aAAa,MAAqC;CAChE,QAAA,GAAO,MAAA,QAAA,CAAM,IAAI,CAAC,CAAC,OAAO,qBAAqB;AACjD"}

package/cjs/utils/validate-event/validate-event.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"validate-event.cjs","names":[],"sources":["../../../src/utils/validate-event/validate-event.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\nexport function validateEvent(eventData: ScheduleEventData) {\n  if (!dayjs(eventData.start).isValid()) {\n    throw new Error(`[@mantine/schedule] Invalid start date for event id: ${eventData.id}`);\n  }\n\n  if (!dayjs(eventData.end).isValid()) {\n    throw new Error(`[@mantine/schedule] Invalid end date for event id: ${eventData.id}`);\n  }\n\n  if (dayjs(eventData.end).isBefore(dayjs(eventData.start))) {\n    throw new Error(\n      `[@mantine/schedule] Event end date is before start date for event id: ${eventData.id}`\n    );\n  }\n\n  return eventData;\n}\n"],"mappings":";;;;;AAGA,SAAgB,cAAc,WAA8B;CAC1D,IAAI,EAAA,GAAA,MAAA,QAAA,CAAO,UAAU,KAAK,CAAC,CAAC,QAAQ,GAClC,MAAM,IAAI,MAAM,wDAAwD,UAAU,IAAI;CAGxF,IAAI,EAAA,GAAA,MAAA,QAAA,CAAO,UAAU,GAAG,CAAC,CAAC,QAAQ,GAChC,MAAM,IAAI,MAAM,sDAAsD,UAAU,IAAI;CAGtF,KAAA,GAAA,MAAA,QAAA,CAAU,UAAU,GAAG,CAAC,CAAC,UAAA,GAAA,MAAA,QAAA,CAAe,UAAU,KAAK,CAAC,GACtD,MAAM,IAAI,MACR,yEAAyE,UAAU,IACrF;CAGF,OAAO;AACT"}
+{"version":3,"file":"validate-event.cjs","names":[],"sources":["../../../src/utils/validate-event/validate-event.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\nexport function validateEvent(eventData: ScheduleEventData) {\n  if (!dayjs(eventData.start).isValid()) {\n    throw new Error(`[@mantine/schedule] Invalid start date for event id: ${eventData.id}`);\n  }\n\n  if (!dayjs(eventData.end).isValid()) {\n    throw new Error(`[@mantine/schedule] Invalid end date for event id: ${eventData.id}`);\n  }\n\n  if (dayjs(eventData.end).isBefore(dayjs(eventData.start))) {\n    throw new Error(\n      `[@mantine/schedule] Event end date is before start date for event id: ${eventData.id}`\n    );\n  }\n\n  return eventData;\n}\n"],"mappings":";;;;;AAGA,SAAgB,cAAc,WAA8B;CAC1D,IAAI,EAAA,GAAC,MAAA,QAAA,CAAM,UAAU,KAAK,CAAC,CAAC,QAAQ,GAClC,MAAM,IAAI,MAAM,wDAAwD,UAAU,IAAI;CAGxF,IAAI,EAAA,GAAC,MAAA,QAAA,CAAM,UAAU,GAAG,CAAC,CAAC,QAAQ,GAChC,MAAM,IAAI,MAAM,sDAAsD,UAAU,IAAI;CAGtF,KAAA,GAAI,MAAA,QAAA,CAAM,UAAU,GAAG,CAAC,CAAC,UAAA,GAAS,MAAA,QAAA,CAAM,UAAU,KAAK,CAAC,GACtD,MAAM,IAAI,MACR,yEAAyE,UAAU,IACrF;CAGF,OAAO;AACT"}

package/esm/components/AgendaView/AgendaView.mjs

@@ -39,15 +39,16 @@ const AgendaView = factory((_props) => {
 		varsResolver,
 		rootSelector: "agendaView"
 	});
+	const expandedEvents = expandRecurringEvents({
+		events,
+		rangeStart: dayjs(rangeStart).startOf("day").toDate(),
+		rangeEnd: dayjs(rangeEnd).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	});
 	const groupedEvents = getAgendaViewEvents({
 		rangeStart,
 		rangeEnd,
-		events: expandRecurringEvents({
-			events,
-			rangeStart: dayjs(rangeStart).startOf("day").toDate(),
-			rangeEnd: dayjs(rangeEnd).endOf("day").toDate(),
-			expansionLimit: recurrenceExpansionLimit
-		})
+		events: expandedEvents
 	});
 	const sortedDates = Object.keys(groupedEvents).sort();
 	const headerLabel = `${formatDate({

package/esm/components/AgendaView/AgendaView.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AgendaView.mjs","names":["classes"],"sources":["../../../src/components/AgendaView/AgendaView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport React from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineRadius,\n  StylesApiProps,\n  Text,\n  UnstyledButton,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { AnyDateValue, DateLabelFormat, ScheduleEventData, ScheduleMode } from '../../types';\nimport {\n  expandRecurringEvents,\n  formatDate,\n  isAllDayEvent,\n  isMultidayEvent,\n  sortEvents,\n} from '../../utils';\nimport { RenderEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { getAgendaViewEvents } from './get-agenda-view-events';\nimport classes from './AgendaView.module.css';\n\nexport type AgendaViewStylesNames =\n  | 'agendaView'\n  | 'agendaViewHeader'\n  | 'agendaViewHeaderLabel'\n  | 'agendaViewBody'\n  | 'agendaViewDateGroup'\n  | 'agendaViewDateHeader'\n  | 'agendaViewEvent'\n  | 'agendaViewEventBody'\n  | 'agendaViewEventColor'\n  | 'agendaViewEventTitle'\n  | 'agendaViewEventTime'\n  | 'agendaViewNoEvents';\n\nexport type AgendaViewCssVariables = {\n  agendaView: '--agenda-view-radius';\n};\n\nexport interface AgendaViewProps\n  extends BoxProps, StylesApiProps<AgendaViewFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Start of the date range to display events for */\n  rangeStart: AnyDateValue;\n\n  /** End of the date range to display events for */\n  rangeEnd: AnyDateValue;\n\n  /** Events to display */\n  events?: ScheduleEventData[];\n\n  /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n  locale?: string;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n  renderEvent?: RenderEvent;\n\n  /** Format for the date group headers @default 'dddd, MMMM D' */\n  dateHeaderFormat?: DateLabelFormat;\n\n  /** Format for the header label showing the date range @default 'MMMM D, YYYY' */\n  headerFormat?: DateLabelFormat;\n\n  /** Called when event is clicked */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n}\n\nexport type AgendaViewFactory = Factory<{\n  props: AgendaViewProps;\n  ref: HTMLDivElement;\n  stylesNames: AgendaViewStylesNames;\n  vars: AgendaViewCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'AgendaView',\n  mode: 'default',\n  dateHeaderFormat: 'dddd, MMMM D',\n  headerFormat: 'MMMM D, YYYY',\n} satisfies Partial<AgendaViewProps>;\n\nconst varsResolver = createVarsResolver<AgendaViewFactory>((_theme, { radius }) => ({\n  agendaView: {\n    '--agenda-view-radius': getRadius(radius),\n  },\n}));\n\nexport const AgendaView = factory<AgendaViewFactory>((_props) => {\n  const props = useProps('AgendaView', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    rangeStart,\n    rangeEnd,\n    events,\n    locale,\n    radius,\n    labels,\n    mode,\n    renderEvent,\n    dateHeaderFormat,\n    headerFormat,\n    onEventClick,\n    recurrenceExpansionLimit,\n    ...others\n  } = props;\n\n  const ctx = useDatesContext();\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<AgendaViewFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'agendaView',\n  });\n\n  const expandedEvents = expandRecurringEvents({\n    events,\n    rangeStart: dayjs(rangeStart).startOf('day').toDate(),\n    rangeEnd: dayjs(rangeEnd).endOf('day').toDate(),\n    expansionLimit: recurrenceExpansionLimit,\n  });\n\n  const groupedEvents = getAgendaViewEvents({\n    rangeStart,\n    rangeEnd,\n    events: expandedEvents,\n  });\n\n  const sortedDates = Object.keys(groupedEvents).sort();\n\n  const headerLabel = `${formatDate({\n    locale: ctx.getLocale(locale),\n    date: rangeStart,\n    format: headerFormat,\n  })} – ${formatDate({\n    locale: ctx.getLocale(locale),\n    date: rangeEnd,\n    format: headerFormat,\n  })}`;\n\n  const dateGroups = sortedDates.map((dateStr) => {\n    const dateEvents = sortEvents(groupedEvents[dateStr]);\n\n    const eventNodes = dateEvents.map((event) => {\n      const startTime = dayjs(event.start).format('HH:mm');\n      const endTime = dayjs(event.end).format('HH:mm');\n      const isAllDay = isMultidayEvent(event) || isAllDayEvent({ event, date: dateStr });\n\n      const eventChildren = (\n        <Box {...getStyles('agendaViewEventBody')}>\n          <div\n            {...getStyles('agendaViewEventColor', {\n              style: { backgroundColor: getThemeColor(event.color, theme) },\n            })}\n          />\n          <div>\n            <Text {...getStyles('agendaViewEventTitle')}>{event.title}</Text>\n            <Text {...getStyles('agendaViewEventTime')}>\n              {isAllDay ? getLabel('allDay', labels) : `${startTime} – ${endTime}`}\n            </Text>\n          </div>\n        </Box>\n      );\n\n      const rootProps: React.ComponentPropsWithoutRef<'button'> & { children: React.ReactNode } = {\n        ...getStyles('agendaViewEvent'),\n        onClick:\n          mode === 'static'\n            ? undefined\n            : (e: React.MouseEvent<HTMLButtonElement>) => {\n                onEventClick?.(event, e);\n              },\n        tabIndex: mode === 'static' ? -1 : 0,\n        children: eventChildren,\n      };\n\n      if (typeof renderEvent === 'function') {\n        return <React.Fragment key={event.id}>{renderEvent(event, rootProps)}</React.Fragment>;\n      }\n\n      return <UnstyledButton {...rootProps} key={event.id} />;\n    });\n\n    return (\n      <div {...getStyles('agendaViewDateGroup')} key={dateStr}>\n        <Text {...getStyles('agendaViewDateHeader')}>\n          {formatDate({\n            locale: ctx.getLocale(locale),\n            date: dateStr,\n            format: dateHeaderFormat,\n          })}\n        </Text>\n        {eventNodes}\n      </div>\n    );\n  });\n\n  return (\n    <Box {...getStyles('agendaView')} {...others}>\n      <div {...getStyles('agendaViewHeader')}>\n        <Text {...getStyles('agendaViewHeaderLabel')}>{headerLabel}</Text>\n      </div>\n\n      <Box {...getStyles('agendaViewBody')}>\n        {dateGroups.length > 0 ? (\n          dateGroups\n        ) : (\n          <Text {...getStyles('agendaViewNoEvents')}>{getLabel('noEvents', labels)}</Text>\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nAgendaView.displayName = '@mantine/schedule/AgendaView';\nAgendaView.classes = classes;\nAgendaView.varsResolver = varsResolver;\n\nexport namespace AgendaView {\n  export type Props = AgendaViewProps;\n  export type Factory = AgendaViewFactory;\n  export type StylesNames = AgendaViewStylesNames;\n  export type CssVariables = AgendaViewCssVariables;\n}\n"],"mappings":"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"}
+{"version":3,"file":"AgendaView.mjs","names":["classes"],"sources":["../../../src/components/AgendaView/AgendaView.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport React from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getRadius,\n  getThemeColor,\n  MantineRadius,\n  StylesApiProps,\n  Text,\n  UnstyledButton,\n  useMantineTheme,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { AnyDateValue, DateLabelFormat, ScheduleEventData, ScheduleMode } from '../../types';\nimport {\n  expandRecurringEvents,\n  formatDate,\n  isAllDayEvent,\n  isMultidayEvent,\n  sortEvents,\n} from '../../utils';\nimport { RenderEvent } from '../ScheduleEvent/ScheduleEvent';\nimport { getAgendaViewEvents } from './get-agenda-view-events';\nimport classes from './AgendaView.module.css';\n\nexport type AgendaViewStylesNames =\n  | 'agendaView'\n  | 'agendaViewHeader'\n  | 'agendaViewHeaderLabel'\n  | 'agendaViewBody'\n  | 'agendaViewDateGroup'\n  | 'agendaViewDateHeader'\n  | 'agendaViewEvent'\n  | 'agendaViewEventBody'\n  | 'agendaViewEventColor'\n  | 'agendaViewEventTitle'\n  | 'agendaViewEventTime'\n  | 'agendaViewNoEvents';\n\nexport type AgendaViewCssVariables = {\n  agendaView: '--agenda-view-radius';\n};\n\nexport interface AgendaViewProps\n  extends BoxProps, StylesApiProps<AgendaViewFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Start of the date range to display events for */\n  rangeStart: AnyDateValue;\n\n  /** End of the date range to display events for */\n  rangeEnd: AnyDateValue;\n\n  /** Events to display */\n  events?: ScheduleEventData[];\n\n  /** Locale passed down to dayjs, overrides value defined on `DatesProvider` */\n  locale?: string;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Labels override for i18n */\n  labels?: ScheduleLabelsOverride;\n\n  /** Interaction mode: 'default' allows all interactions, 'static' disables event interactions @default 'default' */\n  mode?: ScheduleMode;\n\n  /** Function to fully customize event rendering, receives all props that would be passed to the root element including children */\n  renderEvent?: RenderEvent;\n\n  /** Format for the date group headers @default 'dddd, MMMM D' */\n  dateHeaderFormat?: DateLabelFormat;\n\n  /** Format for the header label showing the date range @default 'MMMM D, YYYY' */\n  headerFormat?: DateLabelFormat;\n\n  /** Called when event is clicked */\n  onEventClick?: (event: ScheduleEventData, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Max number of generated recurring instances per recurring series @default 2000 */\n  recurrenceExpansionLimit?: number;\n}\n\nexport type AgendaViewFactory = Factory<{\n  props: AgendaViewProps;\n  ref: HTMLDivElement;\n  stylesNames: AgendaViewStylesNames;\n  vars: AgendaViewCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'AgendaView',\n  mode: 'default',\n  dateHeaderFormat: 'dddd, MMMM D',\n  headerFormat: 'MMMM D, YYYY',\n} satisfies Partial<AgendaViewProps>;\n\nconst varsResolver = createVarsResolver<AgendaViewFactory>((_theme, { radius }) => ({\n  agendaView: {\n    '--agenda-view-radius': getRadius(radius),\n  },\n}));\n\nexport const AgendaView = factory<AgendaViewFactory>((_props) => {\n  const props = useProps('AgendaView', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    __staticSelector,\n    rangeStart,\n    rangeEnd,\n    events,\n    locale,\n    radius,\n    labels,\n    mode,\n    renderEvent,\n    dateHeaderFormat,\n    headerFormat,\n    onEventClick,\n    recurrenceExpansionLimit,\n    ...others\n  } = props;\n\n  const ctx = useDatesContext();\n  const theme = useMantineTheme();\n\n  const getStyles = useStyles<AgendaViewFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n    rootSelector: 'agendaView',\n  });\n\n  const expandedEvents = expandRecurringEvents({\n    events,\n    rangeStart: dayjs(rangeStart).startOf('day').toDate(),\n    rangeEnd: dayjs(rangeEnd).endOf('day').toDate(),\n    expansionLimit: recurrenceExpansionLimit,\n  });\n\n  const groupedEvents = getAgendaViewEvents({\n    rangeStart,\n    rangeEnd,\n    events: expandedEvents,\n  });\n\n  const sortedDates = Object.keys(groupedEvents).sort();\n\n  const headerLabel = `${formatDate({\n    locale: ctx.getLocale(locale),\n    date: rangeStart,\n    format: headerFormat,\n  })} – ${formatDate({\n    locale: ctx.getLocale(locale),\n    date: rangeEnd,\n    format: headerFormat,\n  })}`;\n\n  const dateGroups = sortedDates.map((dateStr) => {\n    const dateEvents = sortEvents(groupedEvents[dateStr]);\n\n    const eventNodes = dateEvents.map((event) => {\n      const startTime = dayjs(event.start).format('HH:mm');\n      const endTime = dayjs(event.end).format('HH:mm');\n      const isAllDay = isMultidayEvent(event) || isAllDayEvent({ event, date: dateStr });\n\n      const eventChildren = (\n        <Box {...getStyles('agendaViewEventBody')}>\n          <div\n            {...getStyles('agendaViewEventColor', {\n              style: { backgroundColor: getThemeColor(event.color, theme) },\n            })}\n          />\n          <div>\n            <Text {...getStyles('agendaViewEventTitle')}>{event.title}</Text>\n            <Text {...getStyles('agendaViewEventTime')}>\n              {isAllDay ? getLabel('allDay', labels) : `${startTime} – ${endTime}`}\n            </Text>\n          </div>\n        </Box>\n      );\n\n      const rootProps: React.ComponentPropsWithoutRef<'button'> & { children: React.ReactNode } = {\n        ...getStyles('agendaViewEvent'),\n        onClick:\n          mode === 'static'\n            ? undefined\n            : (e: React.MouseEvent<HTMLButtonElement>) => {\n                onEventClick?.(event, e);\n              },\n        tabIndex: mode === 'static' ? -1 : 0,\n        children: eventChildren,\n      };\n\n      if (typeof renderEvent === 'function') {\n        return <React.Fragment key={event.id}>{renderEvent(event, rootProps)}</React.Fragment>;\n      }\n\n      return <UnstyledButton {...rootProps} key={event.id} />;\n    });\n\n    return (\n      <div {...getStyles('agendaViewDateGroup')} key={dateStr}>\n        <Text {...getStyles('agendaViewDateHeader')}>\n          {formatDate({\n            locale: ctx.getLocale(locale),\n            date: dateStr,\n            format: dateHeaderFormat,\n          })}\n        </Text>\n        {eventNodes}\n      </div>\n    );\n  });\n\n  return (\n    <Box {...getStyles('agendaView')} {...others}>\n      <div {...getStyles('agendaViewHeader')}>\n        <Text {...getStyles('agendaViewHeaderLabel')}>{headerLabel}</Text>\n      </div>\n\n      <Box {...getStyles('agendaViewBody')}>\n        {dateGroups.length > 0 ? (\n          dateGroups\n        ) : (\n          <Text {...getStyles('agendaViewNoEvents')}>{getLabel('noEvents', labels)}</Text>\n        )}\n      </Box>\n    </Box>\n  );\n});\n\nAgendaView.displayName = '@mantine/schedule/AgendaView';\nAgendaView.classes = classes;\nAgendaView.varsResolver = varsResolver;\n\nexport namespace AgendaView {\n  export type Props = AgendaViewProps;\n  export type Factory = AgendaViewFactory;\n  export type StylesNames = AgendaViewStylesNames;\n  export type CssVariables = AgendaViewCssVariables;\n}\n"],"mappings":"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"}

package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs

@@ -5,7 +5,7 @@ import { isInTimeRange } from "../../utils/is-in-time-range/is-in-time-range.mjs
 import CurrentTimeIndicator_module_default from "./CurrentTimeIndicator.module.mjs";
 import dayjs from "dayjs";
 import { Box, createVarsResolver, factory, getThemeColor, useProps, useStyles } from "@mantine/core";
-import { useInterval } from "@mantine/hooks";
+import { useInterval, useMounted } from "@mantine/hooks";
 import { useState } from "react";
 import { useDatesContext } from "@mantine/dates";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -36,8 +36,9 @@ const CurrentTimeIndicator = factory((_props) => {
 		rootSelector: "currentTimeIndicator"
 	});
 	const ctx = useDatesContext();
+	const mounted = useMounted();
 	const [, setTick] = useState(0);
-	useInterval(() => setTick((tick) => tick + 1), 1e3 * 60, { autoInvoke: true });
+	useInterval(() => setTick((tick) => tick + 1), 6e4, { autoInvoke: true });
 	const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();
 	const offsetPercent = getCurrentTimePosition({
 		startTime,
@@ -50,7 +51,7 @@ const CurrentTimeIndicator = factory((_props) => {
 		date: now,
 		format: currentTimeFormat
 	}) : "";
-	if (!isInTimeRange({
+	if (!mounted || !isInTimeRange({
 		date: now,
 		startTime,
 		endTime

package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CurrentTimeIndicator.mjs","names":["classes"],"sources":["../../../src/components/CurrentTimeIndicator/CurrentTimeIndicator.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval } from '@mantine/hooks';\nimport { AnyDateValue, DateLabelFormat } from '../../types';\nimport { formatDate, getCurrentTimePosition, isInTimeRange } from '../../utils';\nimport classes from './CurrentTimeIndicator.module.css';\n\nexport type CurrentTimeIndicatorStylesNames =\n  | 'currentTimeIndicator'\n  | 'currentTimeIndicatorLine'\n  | 'currentTimeIndicatorThumb'\n  | 'currentTimeIndicatorTimeBubble';\n\nexport type CurrentTimeIndicatorCssVariables = {\n  currentTimeIndicator: '--indicator-color';\n};\n\nexport interface CurrentTimeIndicatorProps\n  extends BoxProps, StylesApiProps<CurrentTimeIndicatorFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Key of `theme.colors` or any valid CSS color value @default 'red' */\n  color?: MantineColor;\n\n  /** Offset from the left side */\n  startOffset?: string;\n\n  /** Offset from the right side */\n  endOffset?: string;\n\n  /** Extra configurable offset from the top */\n  topOffset?: string;\n\n  /** Offset for the time bubble */\n  timeBubbleStartOffset?: string;\n\n  /** If set, displays a bubble with the current time @default @true */\n  withTimeBubble?: boolean;\n\n  /** If set, displays thumb next to the line @default true */\n  withThumb?: boolean;\n\n  /** Format of the time displayed in the time bubble @default 'HH:mm' */\n  currentTimeFormat?: DateLabelFormat;\n\n  /** Locale passed down to dayjs during formatting */\n  locale?: string;\n\n  /** Start time of the day */\n  startTime?: string;\n\n  /** End time of the day */\n  endTime?: string;\n\n  /** Number of minutes per time slot. Used to align the indicator to whole slots when `endTime` does not divide evenly. */\n  intervalMinutes?: number;\n\n  /** A function to get the current time, called on every tick. Can be used to display the indicator in a different timezone. @default () => dayjs() */\n  getCurrentTime?: () => AnyDateValue;\n}\n\nexport type CurrentTimeIndicatorFactory = Factory<{\n  props: CurrentTimeIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CurrentTimeIndicatorStylesNames;\n  vars: CurrentTimeIndicatorCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'CurrentTimeIndicator',\n  withTimeBubble: true,\n  withThumb: true,\n  currentTimeFormat: 'HH:mm',\n  topOffset: '0rem',\n} satisfies Partial<CurrentTimeIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CurrentTimeIndicatorFactory>((theme, { color }) => ({\n  currentTimeIndicator: {\n    '--indicator-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const CurrentTimeIndicator = factory<CurrentTimeIndicatorFactory>((_props) => {\n  const props = useProps('CurrentTimeIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    startOffset,\n    endOffset,\n    color,\n    withTimeBubble,\n    withThumb,\n    currentTimeFormat,\n    locale,\n    timeBubbleStartOffset,\n    __staticSelector,\n    topOffset,\n    startTime,\n    endTime,\n    intervalMinutes,\n    getCurrentTime,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CurrentTimeIndicatorFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n    rootSelector: 'currentTimeIndicator',\n  });\n\n  const ctx = useDatesContext();\n  const [, setTick] = useState(0);\n  useInterval(() => setTick((tick) => tick + 1), 1000 * 60, {\n    autoInvoke: true,\n  });\n\n  const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();\n  const offsetPercent = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n  const formattedTime = withTimeBubble\n    ? formatDate({ locale: ctx.getLocale(locale), date: now, format: currentTimeFormat })\n    : '';\n\n  if (!isInTimeRange({ date: now, startTime, endTime })) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('currentTimeIndicator')}\n      __vars={{\n        '--top-offset': `calc(${offsetPercent}% + ${topOffset})`,\n        '--start-offset': startOffset,\n        '--end-offset': endOffset,\n        '--time-bubble-start-offset': timeBubbleStartOffset,\n\n        // Adjust time bubble width for formats including AM/PM\n        '--time-bubble-width': formattedTime?.toString().toLowerCase().includes('m')\n          ? '64px'\n          : '46px',\n      }}\n      {...others}\n    >\n      {withTimeBubble && (\n        <div {...getStyles('currentTimeIndicatorTimeBubble')}>{formattedTime}</div>\n      )}\n\n      {withThumb && <div {...getStyles('currentTimeIndicatorThumb')} />}\n\n      <div {...getStyles('currentTimeIndicatorLine')} />\n    </Box>\n  );\n});\n\nCurrentTimeIndicator.displayName = '@mantine/schedule/CurrentTimeIndicator';\nCurrentTimeIndicator.classes = classes;\nCurrentTimeIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;AAkFA,MAAM,eAAe;CACnB,kBAAkB;CAClB,gBAAgB;CAChB,WAAW;CACX,mBAAmB;CACnB,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiD,OAAO,EAAE,aAAa,EAC1F,sBAAsB,EACpB,qBAAqB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAC7D,EACF,EAAE;AAEF,MAAa,uBAAuB,SAAsC,WAAW;CACnF,MAAM,QAAQ,SAAS,wBAAwB,cAAc,MAAM;CACnE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,aACA,WACA,OACA,gBACA,WACA,mBACA,QACA,uBACA,kBACA,WACA,WACA,SACA,iBACA,gBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuC;EACvD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,gBAAgB;CAC5B,MAAM,GAAG,WAAW,SAAS,CAAC;CAC9B,kBAAkB,SAAS,SAAS,OAAO,CAAC,GAAG,MAAO,IAAI,EACxD,YAAY,KACd,CAAC;CAED,MAAM,MAAM,iBAAiB,MAAM,eAAe,CAAC,IAAI,MAAM;CAC7D,MAAM,gBAAgB,uBAAuB;EAAE;EAAW;EAAS;EAAiB;CAAI,CAAC;CACzF,MAAM,gBAAgB,iBAClB,WAAW;EAAE,QAAQ,IAAI,UAAU,MAAM;EAAG,MAAM;EAAK,QAAQ;CAAkB,CAAC,IAClF;CAEJ,IAAI,CAAC,cAAc;EAAE,MAAM;EAAK;EAAW;CAAQ,CAAC,GAClD,OAAO;CAGT,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,sBAAsB;EACpC,QAAQ;GACN,gBAAgB,QAAQ,cAAc,MAAM,UAAU;GACtD,kBAAkB;GAClB,gBAAgB;GAChB,8BAA8B;GAG9B,uBAAuB,eAAe,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,GAAG,IACvE,SACA;EACN;EACA,GAAI;YAbN;GAeG,kBACC,oBAAC,OAAD;IAAK,GAAI,UAAU,gCAAgC;cAAI;GAAmB,CAAA;GAG3E,aAAa,oBAAC,OAAD,EAAK,GAAI,UAAU,2BAA2B,EAAI,CAAA;GAEhE,oBAAC,OAAD,EAAK,GAAI,UAAU,0BAA0B,EAAI,CAAA;EAC9C;;AAET,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,UAAUA;AAC/B,qBAAqB,eAAe"}
+{"version":3,"file":"CurrentTimeIndicator.mjs","names":["classes"],"sources":["../../../src/components/CurrentTimeIndicator/CurrentTimeIndicator.tsx"],"sourcesContent":["import dayjs from 'dayjs';\nimport { useState } from 'react';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getThemeColor,\n  MantineColor,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '@mantine/core';\nimport { useDatesContext } from '@mantine/dates';\nimport { useInterval, useMounted } from '@mantine/hooks';\nimport { AnyDateValue, DateLabelFormat } from '../../types';\nimport { formatDate, getCurrentTimePosition, isInTimeRange } from '../../utils';\nimport classes from './CurrentTimeIndicator.module.css';\n\nexport type CurrentTimeIndicatorStylesNames =\n  | 'currentTimeIndicator'\n  | 'currentTimeIndicatorLine'\n  | 'currentTimeIndicatorThumb'\n  | 'currentTimeIndicatorTimeBubble';\n\nexport type CurrentTimeIndicatorCssVariables = {\n  currentTimeIndicator: '--indicator-color';\n};\n\nexport interface CurrentTimeIndicatorProps\n  extends BoxProps, StylesApiProps<CurrentTimeIndicatorFactory>, ElementProps<'div'> {\n  __staticSelector?: string;\n\n  /** Key of `theme.colors` or any valid CSS color value @default 'red' */\n  color?: MantineColor;\n\n  /** Offset from the left side */\n  startOffset?: string;\n\n  /** Offset from the right side */\n  endOffset?: string;\n\n  /** Extra configurable offset from the top */\n  topOffset?: string;\n\n  /** Offset for the time bubble */\n  timeBubbleStartOffset?: string;\n\n  /** If set, displays a bubble with the current time @default @true */\n  withTimeBubble?: boolean;\n\n  /** If set, displays thumb next to the line @default true */\n  withThumb?: boolean;\n\n  /** Format of the time displayed in the time bubble @default 'HH:mm' */\n  currentTimeFormat?: DateLabelFormat;\n\n  /** Locale passed down to dayjs during formatting */\n  locale?: string;\n\n  /** Start time of the day */\n  startTime?: string;\n\n  /** End time of the day */\n  endTime?: string;\n\n  /** Number of minutes per time slot. Used to align the indicator to whole slots when `endTime` does not divide evenly. */\n  intervalMinutes?: number;\n\n  /** A function to get the current time, called on every tick. Can be used to display the indicator in a different timezone. @default () => dayjs() */\n  getCurrentTime?: () => AnyDateValue;\n}\n\nexport type CurrentTimeIndicatorFactory = Factory<{\n  props: CurrentTimeIndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: CurrentTimeIndicatorStylesNames;\n  vars: CurrentTimeIndicatorCssVariables;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'CurrentTimeIndicator',\n  withTimeBubble: true,\n  withThumb: true,\n  currentTimeFormat: 'HH:mm',\n  topOffset: '0rem',\n} satisfies Partial<CurrentTimeIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CurrentTimeIndicatorFactory>((theme, { color }) => ({\n  currentTimeIndicator: {\n    '--indicator-color': color ? getThemeColor(color, theme) : undefined,\n  },\n}));\n\nexport const CurrentTimeIndicator = factory<CurrentTimeIndicatorFactory>((_props) => {\n  const props = useProps('CurrentTimeIndicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    startOffset,\n    endOffset,\n    color,\n    withTimeBubble,\n    withThumb,\n    currentTimeFormat,\n    locale,\n    timeBubbleStartOffset,\n    __staticSelector,\n    topOffset,\n    startTime,\n    endTime,\n    intervalMinutes,\n    getCurrentTime,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<CurrentTimeIndicatorFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    vars,\n    varsResolver,\n    attributes,\n    rootSelector: 'currentTimeIndicator',\n  });\n\n  const ctx = useDatesContext();\n  const mounted = useMounted();\n  const [, setTick] = useState(0);\n  useInterval(() => setTick((tick) => tick + 1), 1000 * 60, {\n    autoInvoke: true,\n  });\n\n  const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();\n  const offsetPercent = getCurrentTimePosition({ startTime, endTime, intervalMinutes, now });\n  const formattedTime = withTimeBubble\n    ? formatDate({ locale: ctx.getLocale(locale), date: now, format: currentTimeFormat })\n    : '';\n\n  if (!mounted || !isInTimeRange({ date: now, startTime, endTime })) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('currentTimeIndicator')}\n      __vars={{\n        '--top-offset': `calc(${offsetPercent}% + ${topOffset})`,\n        '--start-offset': startOffset,\n        '--end-offset': endOffset,\n        '--time-bubble-start-offset': timeBubbleStartOffset,\n\n        // Adjust time bubble width for formats including AM/PM\n        '--time-bubble-width': formattedTime?.toString().toLowerCase().includes('m')\n          ? '64px'\n          : '46px',\n      }}\n      {...others}\n    >\n      {withTimeBubble && (\n        <div {...getStyles('currentTimeIndicatorTimeBubble')}>{formattedTime}</div>\n      )}\n\n      {withThumb && <div {...getStyles('currentTimeIndicatorThumb')} />}\n\n      <div {...getStyles('currentTimeIndicatorLine')} />\n    </Box>\n  );\n});\n\nCurrentTimeIndicator.displayName = '@mantine/schedule/CurrentTimeIndicator';\nCurrentTimeIndicator.classes = classes;\nCurrentTimeIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;AAkFA,MAAM,eAAe;CACnB,kBAAkB;CAClB,gBAAgB;CAChB,WAAW;CACX,mBAAmB;CACnB,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiD,OAAO,EAAE,aAAa,EAC1F,sBAAsB,EACpB,qBAAqB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAC7D,EACF,EAAE;AAEF,MAAa,uBAAuB,SAAsC,WAAW;CACnF,MAAM,QAAQ,SAAS,wBAAwB,cAAc,MAAM;CACnE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,aACA,WACA,OACA,gBACA,WACA,mBACA,QACA,uBACA,kBACA,WACA,WACA,SACA,iBACA,gBACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuC;EACvD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,gBAAgB;CAC5B,MAAM,UAAU,WAAW;CAC3B,MAAM,GAAG,WAAW,SAAS,CAAC;CAC9B,kBAAkB,SAAS,SAAS,OAAO,CAAC,GAAG,KAAW,EACxD,YAAY,KACd,CAAC;CAED,MAAM,MAAM,iBAAiB,MAAM,eAAe,CAAC,IAAI,MAAM;CAC7D,MAAM,gBAAgB,uBAAuB;EAAE;EAAW;EAAS;EAAiB;CAAI,CAAC;CACzF,MAAM,gBAAgB,iBAClB,WAAW;EAAE,QAAQ,IAAI,UAAU,MAAM;EAAG,MAAM;EAAK,QAAQ;CAAkB,CAAC,IAClF;CAEJ,IAAI,CAAC,WAAW,CAAC,cAAc;EAAE,MAAM;EAAK;EAAW;CAAQ,CAAC,GAC9D,OAAO;CAGT,OACE,qBAAC,KAAD;EACE,GAAI,UAAU,sBAAsB;EACpC,QAAQ;GACN,gBAAgB,QAAQ,cAAc,MAAM,UAAU;GACtD,kBAAkB;GAClB,gBAAgB;GAChB,8BAA8B;GAG9B,uBAAuB,eAAe,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC,SAAS,GAAG,IACvE,SACA;EACN;EACA,GAAI;EAbN,UAAA;GAeG,kBACC,oBAAC,OAAD;IAAK,GAAI,UAAU,gCAAgC;IAAI,UAAA;GAAmB,CAAA;GAG3E,aAAa,oBAAC,OAAD,EAAK,GAAI,UAAU,2BAA2B,EAAI,CAAA;GAEhE,oBAAC,OAAD,EAAK,GAAI,UAAU,0BAA0B,EAAI,CAAA;EAC9C;;AAET,CAAC;AAED,qBAAqB,cAAc;AACnC,qBAAqB,UAAUA;AAC/B,qBAAqB,eAAe"}

package/esm/components/DayView/DayView.mjs

@@ -6,6 +6,7 @@ import { getDayTimeIntervals } from "../../utils/get-day-time-intervals/get-day-
 import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
 import { isAllDayEvent } from "../../utils/is-all-day-event/is-all-day-event.mjs";
 import { getVisibleEvents } from "../../utils/get-visible-events/get-visible-events.mjs";
+import { getDayPosition } from "../../utils/get-day-position/get-day-position.mjs";
 import { getTimeAxisEventStyle } from "../../utils/get-time-axis-event-style/get-time-axis-event-style.mjs";
 import { calculateDropTime } from "../../utils/calculate-drop-time/calculate-drop-time.mjs";
 import { getBusinessHoursMod } from "../../utils/get-business-hours-mod/get-business-hours-mod.mjs";
@@ -19,11 +20,12 @@ import { CurrentTimeIndicator } from "../CurrentTimeIndicator/CurrentTimeIndicat
 import { DragContext } from "../DragContext/DragContext.mjs";
 import { ScheduleEvent } from "../ScheduleEvent/ScheduleEvent.mjs";
 import { MoreEvents } from "../MoreEvents/MoreEvents.mjs";
+import { ScheduleBackgroundEvent } from "../ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs";
 import { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
 import { getDayViewEvents } from "./get-day-view-events/get-day-view-events.mjs";
 import DayView_module_default from "./DayView.module.mjs";
 import dayjs from "dayjs";
-import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, rem, useMantineTheme, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
+import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, rem, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
 import { useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
 import { createElement, useCallback, useRef, useState } from "react";
 import { useDatesContext } from "@mantine/dates";
@@ -45,7 +47,8 @@ const defaultProps = {
 	withEventsDragAndDrop: false,
 	withDragSlotSelect: false,
 	withEventResize: false,
-	mode: "default"
+	mode: "default",
+	withInteractiveBackgroundEvents: false
 };
 const varsResolver = createVarsResolver((_theme, { radius, slotHeight, allDaySlotHeight }) => ({ dayView: {
 	"--day-view-radius": radius !== void 0 ? getRadius(radius) : void 0,
@@ -54,7 +57,7 @@ const varsResolver = createVarsResolver((_theme, { radius, slotHeight, allDaySlo
 } }));
 const DayView = factory((_props) => {
 	const props = useProps("DayView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withSubHourGridLines, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, getCurrentTime, withCurrentTimeIndicator, withCurrentTimeBubble, withHeader, radius, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, slotHeight, allDaySlotHeight, scrollAreaProps, events, moreEventsProps, renderEventBody, renderEvent, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withSubHourGridLines, withAllDaySlot, date, locale, slotLabelFormat, headerFormat, getCurrentTime, withCurrentTimeIndicator, withCurrentTimeBubble, withHeader, radius, onDateChange, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, slotHeight, allDaySlotHeight, scrollAreaProps, events, moreEventsProps, renderEventBody, renderEvent, labels, highlightBusinessHours, businessHours, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
 	const [agendaOpen, setAgendaOpen] = useState(false);
 	const getStyles = useStyles({
 		name: __staticSelector,
@@ -82,7 +85,6 @@ const DayView = factory((_props) => {
 		__staticSelector,
 		radius
 	};
-	const theme = useMantineTheme();
 	const ctx = useDatesContext();
 	const resolveNow = () => getCurrentTime ? dayjs(getCurrentTime()) : dayjs();
 	const showCurrentTimeIndicator = withCurrentTimeIndicator ?? dayjs(date).isSame(resolveNow(), "day");
@@ -112,20 +114,43 @@ const DayView = factory((_props) => {
 			top: slotRect.top - viewportRect.top
 		});
 	}, []);
+	const dragOffsetRef = useRef({
+		offset: 0,
+		size: 0
+	});
 	const getSlotIndexFromDragPoint = useCallback((event) => {
 		const slotIndex = slotsRef.current.findIndex((slotNode) => {
 			if (!slotNode) return false;
 			const rect = slotNode.getBoundingClientRect();
 			return event.clientY >= rect.top && event.clientY <= rect.bottom;
 		});
-		if (slotIndex >= 0) return slotIndex;
+		if (slotIndex >= 0) {
+			const rect = slotsRef.current[slotIndex].getBoundingClientRect();
+			dragOffsetRef.current = {
+				offset: event.clientY - rect.top,
+				size: rect.height
+			};
+			return slotIndex;
+		}
 		const firstSlot = slotsRef.current[0];
 		const lastSlot = slotsRef.current[slotsRef.current.length - 1];
 		if (!firstSlot || !lastSlot) return null;
 		const firstRect = firstSlot.getBoundingClientRect();
 		const lastRect = lastSlot.getBoundingClientRect();
-		if (event.clientY < firstRect.top) return 0;
-		if (event.clientY > lastRect.bottom) return slotsRef.current.length - 1;
+		if (event.clientY < firstRect.top) {
+			dragOffsetRef.current = {
+				offset: 0,
+				size: firstRect.height
+			};
+			return 0;
+		}
+		if (event.clientY > lastRect.bottom) {
+			dragOffsetRef.current = {
+				offset: lastRect.height,
+				size: lastRect.height
+			};
+			return slotsRef.current.length - 1;
+		}
 		return null;
 	}, []);
 	const handleSlotKeyDown = (event, slotIndex) => {
@@ -146,13 +171,14 @@ const DayView = factory((_props) => {
 			onSlotDragEnd(`${slotDate} ${slots[startIndex].startTime}`, `${slotDate} ${slots[endIndex].endTime}`);
 		}
 	});
+	const expandedEvents = expandRecurringEvents({
+		events,
+		rangeStart: dayjs(date).startOf("day").toDate(),
+		rangeEnd: dayjs(date).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	});
 	const eventsData = getDayViewEvents({
-		events: expandRecurringEvents({
-			events,
-			rangeStart: dayjs(date).startOf("day").toDate(),
-			rangeEnd: dayjs(date).endOf("day").toDate(),
-			expansionLimit: recurrenceExpansionLimit
-		}),
+		events: expandedEvents,
 		date,
 		startTime,
 		endTime,
@@ -161,12 +187,50 @@ const DayView = factory((_props) => {
 	const handleExternalDrop = useCallback((e, slotIndex) => {
 		if (!onExternalEventDrop) return;
 		const slotDate = dayjs(date).format("YYYY-MM-DD");
-		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[slotIndex].startTime}`);
+		const slotTime = slots[slotIndex].startTime;
+		if (eventDragInterval == null) {
+			onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
+			return;
+		}
+		const slotStart = `${slotDate} ${slotTime}`;
+		const { start } = calculateDropTime({
+			draggedEvent: {
+				start: slotStart,
+				end: slotStart
+			},
+			targetDate: date,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: dragOffsetRef.current.offset,
+			slotSize: dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+		onExternalEventDrop(e.dataTransfer, dayjs(start).format("YYYY-MM-DD HH:mm:ss"));
 	}, [
 		onExternalEventDrop,
 		date,
-		slots
+		slots,
+		eventDragInterval,
+		intervalMinutes,
+		startTime,
+		endTime
 	]);
+	const getDropTimeForSlot = (slotIndex, draggedEvent) => {
+		const slotTime = slots[slotIndex].startTime;
+		return calculateDropTime({
+			draggedEvent,
+			targetDate: date,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
+			slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+	};
 	const dragDrop = useDragDropHandlers({
 		enabled: withEventsDragAndDrop,
 		mode,
@@ -174,23 +238,27 @@ const DayView = factory((_props) => {
 		canDragEvent,
 		onEventDragStart,
 		onEventDragEnd,
-		calculateDropTarget: (slotIndex, draggedEvent) => {
-			const slotTime = slots[slotIndex].startTime;
-			return calculateDropTime({
-				draggedEvent,
-				targetDate: date,
-				targetSlotTime: slotTime,
-				intervalMinutes
-			});
-		},
+		calculateDropTarget: getDropTimeForSlot,
 		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
 	});
+	const updateDragPreview = (slotIndex) => {
+		const draggedEvent = dragDrop.dragContextValue.draggedEvent;
+		if (eventDragInterval == null || !draggedEvent) return;
+		const { start, end } = getDropTimeForSlot(slotIndex, draggedEvent);
+		const newStart = dayjs(start).format("YYYY-MM-DD HH:mm:ss");
+		if (dragDrop.dragPreview?.start !== newStart) dragDrop.setDragPreview({
+			start: newStart,
+			end: dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
+			target: slotIndex
+		});
+	};
 	const eventResize = useEventResize({
 		enabled: withEventResize,
 		mode,
 		startTime,
 		endTime,
 		intervalMinutes,
+		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
 		canResizeEvent
 	});
@@ -255,8 +323,9 @@ const DayView = factory((_props) => {
 		...stylesApiProps
 	}, event.id));
 	const dayGroup = dayjs(date).format("YYYY-MM-DD");
+	const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;
 	const items = slots.map((slot, index) => {
-		const isDropTarget = dragDrop.isDropTarget(index);
+		const isDropTarget = !suppressDropHighlight && dragDrop.isDropTarget(index);
 		const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
 		const slotStart = `${dayGroup} ${slot.startTime}`;
 		const slotEnd = `${dayGroup} ${slot.endTime}`;
@@ -322,59 +391,34 @@ const DayView = factory((_props) => {
 		}
 		return acc;
 	}, []);
-	const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => {
-		const colors = theme.variantColorResolver({
-			color: event.color || theme.primaryColor,
-			theme,
-			variant: "light",
-			autoContrast: true
-		});
-		const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
-		const bgEventProps = {
-			key: `bg-allday-${event.id}`,
-			...getStyles("dayViewBackgroundEvent", { style: {
-				top: 0,
-				height: "100%",
-				width: "100%"
-			} }),
-			__vars: {
-				"--bg-event-bg": colors.background,
-				"--bg-event-color": colors.color
-			},
-			children: bgEventBody
-		};
-		if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
-		const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
-		return /* @__PURE__ */ jsx(Box, { ...restBgEventProps }, bgEventKey);
-	});
-	const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => {
-		const colors = theme.variantColorResolver({
-			color: event.color || theme.primaryColor,
-			theme,
-			variant: "light",
-			autoContrast: true
-		});
-		const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
-		const bgEventProps = {
-			key: event.id,
-			...getStyles("dayViewBackgroundEvent", { style: {
-				...getTimeAxisEventStyle({
-					start: event.position.top,
-					span: event.position.height,
-					axis: "vertical"
-				}),
-				width: "100%"
-			} }),
-			__vars: {
-				"--bg-event-bg": colors.background,
-				"--bg-event-color": colors.color
-			},
-			children: bgEventBody
-		};
-		if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
-		const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
-		return /* @__PURE__ */ jsx(Box, { ...restBgEventProps }, bgEventKey);
-	});
+	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
+	const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
+		event,
+		renderEvent,
+		renderEventBody,
+		interactive: interactiveBackgroundEvents,
+		onEventClick,
+		...getStyles("dayViewBackgroundEvent", { style: {
+			top: 0,
+			height: "100%",
+			width: "100%"
+		} })
+	}, `bg-allday-${event.id}`));
+	const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
+		event,
+		renderEvent,
+		renderEventBody,
+		interactive: interactiveBackgroundEvents,
+		onEventClick,
+		...getStyles("dayViewBackgroundEvent", { style: {
+			...getTimeAxisEventStyle({
+				start: event.position.top,
+				span: event.position.height,
+				axis: "vertical"
+			}),
+			width: "100%"
+		} })
+	}, event.id));
 	const content = /* @__PURE__ */ jsxs(Box, {
 		...getStyles("dayView"),
 		mod: {
@@ -476,7 +520,10 @@ const DayView = factory((_props) => {
 							...getStyles("dayViewTimeSlots"),
 							onDragOver: withDragHandlers ? (event) => {
 								const slotIndex = getSlotIndexFromDragPoint(event);
-								if (slotIndex !== null) dragDrop.handleDragOver(event, slotIndex);
+								if (slotIndex !== null) {
+									dragDrop.handleDragOver(event, slotIndex);
+									updateDragPreview(slotIndex);
+								}
 							} : void 0,
 							onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
 							onDrop: withDragHandlers ? (event) => {
@@ -486,6 +533,25 @@ const DayView = factory((_props) => {
 							children: [
 								backgroundTimedEventNodes,
 								eventsNodes,
+								dragDrop.dragPreview && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ jsx(Box, { ...getStyles("dayViewDragPreview", { style: (() => {
+									const { top, height } = getDayPosition({
+										event: {
+											...dragDrop.dragContextValue.draggedEvent,
+											start: dragDrop.dragPreview.start,
+											end: dragDrop.dragPreview.end
+										},
+										startTime,
+										endTime,
+										intervalMinutes
+									});
+									return {
+										position: "absolute",
+										insetInlineStart: 0,
+										insetInlineEnd: 0,
+										top: `${top}%`,
+										height: `${height}%`
+									};
+								})() }) }),
 								showCurrentTimeIndicator && /* @__PURE__ */ jsx(CurrentTimeIndicator, {
 									startOffset: "calc(var(--day-view-slot-labels-width) * -1)",
 									endOffset: "0rem",