@mantine/schedule 9.5.1 → 9.6.0

package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScheduleHeaderBase.mjs","names":["classes"],"sources":["../../../src/components/ScheduleHeader/ScheduleHeaderBase.tsx"],"sourcesContent":["import { NativeSelect, StylesApiProps } from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { DateStringValue, ScheduleViewLevel } from '../../types';\nimport { MonthYearSelectProps } from './MonthYearSelect/MonthYearSelect';\nimport { ScheduleHeader } from './ScheduleHeader';\nimport { ViewSelectProps } from './ViewSelect/ViewSelect';\nimport classes from './ScheduleHeader.module.css';\n\ninterface NavigationHandlers {\n  /** Handler for previous button click, returns new date */\n  previous: () => DateStringValue;\n\n  /** Handler for next button click, returns new date */\n  next: () => DateStringValue;\n\n  /** Handler for today button click, returns new date */\n  today: () => DateStringValue;\n}\n\ninterface HeaderControlOptions {\n  /** Title to render in a simple control (used by DayView, WeekView) */\n  title?: React.ReactNode;\n  /** MonthYearSelect props (used by MonthView, YearView) */\n  monthYearSelect?: {\n    yearValue: number;\n    monthValue: number;\n    onYearChange?: (year: number) => void;\n    onMonthChange?: (month: number) => void;\n    withMonths?: boolean;\n  } & Partial<MonthYearSelectProps>;\n  /** Minimum width for control */\n  miw?: React.CSSProperties['minWidth'];\n}\n\nexport interface ScheduleHeaderBaseProps {\n  /** Current view level */\n  view: ScheduleViewLevel;\n\n  /** Navigation handlers for previous, next, and today */\n  navigationHandlers: NavigationHandlers;\n\n  /** Central control configuration (either title or monthYearSelect) */\n  control: HeaderControlOptions;\n\n  /** Label overrides */\n  labels?: ScheduleLabelsOverride;\n\n  /** Called when date is changed */\n  onDateChange?: (date: DateStringValue) => void;\n\n  /** Called when view is changed */\n  onViewChange?: (view: ScheduleViewLevel) => void;\n\n  /** Props passed to previous control button */\n  previousControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to next control button */\n  nextControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to today control button */\n  todayControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to view select */\n  viewSelectProps?: Partial<ViewSelectProps>;\n\n  /** Styles API props to pass through */\n  stylesApiProps?: StylesApiProps<any>;\n\n  /** Called when agenda button is clicked */\n  onAgendaClick?: () => void;\n\n  /** Whether the agenda view is currently active */\n  agendaActive?: boolean;\n}\n\nconst VIEW_LEVELS: ScheduleViewLevel[] = ['day', 'week', 'month', 'year'];\n\nexport function ScheduleHeaderBase({\n  view,\n  navigationHandlers,\n  control,\n  labels,\n  onDateChange,\n  onViewChange,\n  previousControlProps,\n  nextControlProps,\n  todayControlProps,\n  viewSelectProps,\n  stylesApiProps,\n  onAgendaClick,\n  agendaActive,\n}: ScheduleHeaderBaseProps) {\n  const centralControl = control.monthYearSelect ? (\n    <ScheduleHeader.MonthYearSelect\n      {...stylesApiProps}\n      labels={labels}\n      {...control.monthYearSelect}\n    />\n  ) : (\n    <ScheduleHeader.Control {...stylesApiProps} interactive={false} miw={control.miw}>\n      {control.title}\n    </ScheduleHeader.Control>\n  );\n\n  const views = viewSelectProps?.views || VIEW_LEVELS;\n  const compactViewSelectData = views.map((v) => ({\n    value: v,\n    label: getLabel(v, labels) as string,\n  }));\n\n  return (\n    <ScheduleHeader {...stylesApiProps} labels={labels}>\n      <div className={classes.navigationGroup}>\n        <ScheduleHeader.Previous\n          {...stylesApiProps}\n          onClick={() => onDateChange?.(navigationHandlers.previous())}\n          labels={labels}\n          {...previousControlProps}\n        />\n\n        {centralControl}\n\n        <ScheduleHeader.Next\n          {...stylesApiProps}\n          onClick={() => onDateChange?.(navigationHandlers.next())}\n          labels={labels}\n          {...nextControlProps}\n        />\n      </div>\n\n      <div className={classes.todayControl}>\n        <ScheduleHeader.Today\n          {...stylesApiProps}\n          onClick={() => onDateChange?.(navigationHandlers.today())}\n          labels={labels}\n          {...todayControlProps}\n        />\n        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\n        )}\n      </div>\n\n      <div className={classes.compactControls}>\n        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n            className={classes.compactAgendaControl}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\n        )}\n        <NativeSelect\n          className={classes.compactViewSelect}\n          data={compactViewSelectData}\n          value={view}\n          onChange={(event) => onViewChange?.(event.currentTarget.value as ScheduleViewLevel)}\n          aria-label={getLabel('viewSelectLabel', labels) as string}\n          size=\"sm\"\n        />\n      </div>\n\n      <div className={classes.viewSelect} style={{ marginInlineStart: 'auto' }}>\n        <ScheduleHeader.ViewSelect\n          value={view}\n          onChange={onViewChange}\n          labels={labels}\n          {...stylesApiProps}\n          {...viewSelectProps}\n        />\n      </div>\n    </ScheduleHeader>\n  );\n}\n"],"mappings":";;;;;;;AA2EA,MAAM,cAAmC;CAAC;CAAO;CAAQ;CAAS;AAAM;AAExE,SAAgB,mBAAmB,EACjC,MACA,oBACA,SACA,QACA,cACA,cACA,sBACA,kBACA,mBACA,iBACA,gBACA,eACA,gBAC0B;CAC1B,MAAM,iBAAiB,QAAQ,kBAC7B,oBAAC,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;CACb,CAAA,IAED,oBAAC,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;YAC1E,QAAQ;CACa,CAAA;CAI1B,MAAM,yBADQ,iBAAiB,SAAS,YAAA,CACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAO,SAAS,GAAG,MAAM;CAC3B,EAAE;CAEF,OACE,qBAAC,gBAAD;EAAgB,GAAI;EAAwB;YAA5C;GACE,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;cAAxB;KACE,oBAAC,eAAe,UAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,SAAS,CAAC;MACnD;MACR,GAAI;KACL,CAAA;KAEA;KAED,oBAAC,eAAe,MAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,KAAK,CAAC;MAC/C;MACR,GAAI;KACL,CAAA;IACE;;GAEL,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;cAAxB,CACE,oBAAC,eAAe,OAAhB;KACE,GAAI;KACJ,eAAe,eAAe,mBAAmB,MAAM,CAAC;KAChD;KACR,GAAI;IACL,CAAA,GACA,iBACC,oBAAC,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAY,SAAS,UAAU,MAAM;eAEpC,SAAS,UAAU,MAAM;IACJ,CAAA,CAEvB;;GAEL,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;cAAxB,CACG,iBACC,oBAAC,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAY,SAAS,UAAU,MAAM;KACrC,WAAWA,8BAAQ;eAElB,SAAS,UAAU,MAAM;IACJ,CAAA,GAE1B,oBAAC,cAAD;KACE,WAAWA,8BAAQ;KACnB,MAAM;KACN,OAAO;KACP,WAAW,UAAU,eAAe,MAAM,cAAc,KAA0B;KAClF,cAAY,SAAS,mBAAmB,MAAM;KAC9C,MAAK;IACN,CAAA,CACE;;GAEL,oBAAC,OAAD;IAAK,WAAWA,8BAAQ;IAAY,OAAO,EAAE,mBAAmB,OAAO;cACrE,oBAAC,eAAe,YAAhB;KACE,OAAO;KACP,UAAU;KACF;KACR,GAAI;KACJ,GAAI;IACL,CAAA;GACE,CAAA;EACS;;AAEpB"}
+{"version":3,"file":"ScheduleHeaderBase.mjs","names":["classes"],"sources":["../../../src/components/ScheduleHeader/ScheduleHeaderBase.tsx"],"sourcesContent":["import { NativeSelect, StylesApiProps } from '@mantine/core';\nimport { getLabel, ScheduleLabelsOverride } from '../../labels';\nimport { DateStringValue, ScheduleViewLevel } from '../../types';\nimport { MonthYearSelectProps } from './MonthYearSelect/MonthYearSelect';\nimport { ScheduleHeader } from './ScheduleHeader';\nimport { ViewSelectProps } from './ViewSelect/ViewSelect';\nimport classes from './ScheduleHeader.module.css';\n\ninterface NavigationHandlers {\n  /** Handler for previous button click, returns new date */\n  previous: () => DateStringValue;\n\n  /** Handler for next button click, returns new date */\n  next: () => DateStringValue;\n\n  /** Handler for today button click, returns new date */\n  today: () => DateStringValue;\n}\n\ninterface HeaderControlOptions {\n  /** Title to render in a simple control (used by DayView, WeekView) */\n  title?: React.ReactNode;\n  /** MonthYearSelect props (used by MonthView, YearView) */\n  monthYearSelect?: {\n    yearValue: number;\n    monthValue: number;\n    onYearChange?: (year: number) => void;\n    onMonthChange?: (month: number) => void;\n    withMonths?: boolean;\n  } & Partial<MonthYearSelectProps>;\n  /** Minimum width for control */\n  miw?: React.CSSProperties['minWidth'];\n}\n\nexport interface ScheduleHeaderBaseProps {\n  /** Current view level */\n  view: ScheduleViewLevel;\n\n  /** Navigation handlers for previous, next, and today */\n  navigationHandlers: NavigationHandlers;\n\n  /** Central control configuration (either title or monthYearSelect) */\n  control: HeaderControlOptions;\n\n  /** Label overrides */\n  labels?: ScheduleLabelsOverride;\n\n  /** Called when date is changed */\n  onDateChange?: (date: DateStringValue) => void;\n\n  /** Called when view is changed */\n  onViewChange?: (view: ScheduleViewLevel) => void;\n\n  /** Props passed to previous control button */\n  previousControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to next control button */\n  nextControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to today control button */\n  todayControlProps?: React.ComponentProps<'button'>;\n\n  /** Props passed to view select */\n  viewSelectProps?: Partial<ViewSelectProps>;\n\n  /** Styles API props to pass through */\n  stylesApiProps?: StylesApiProps<any>;\n\n  /** Called when agenda button is clicked */\n  onAgendaClick?: () => void;\n\n  /** Whether the agenda view is currently active */\n  agendaActive?: boolean;\n}\n\nconst VIEW_LEVELS: ScheduleViewLevel[] = ['day', 'week', 'month', 'year'];\n\nexport function ScheduleHeaderBase({\n  view,\n  navigationHandlers,\n  control,\n  labels,\n  onDateChange,\n  onViewChange,\n  previousControlProps,\n  nextControlProps,\n  todayControlProps,\n  viewSelectProps,\n  stylesApiProps,\n  onAgendaClick,\n  agendaActive,\n}: ScheduleHeaderBaseProps) {\n  const centralControl = control.monthYearSelect ? (\n    <ScheduleHeader.MonthYearSelect\n      {...stylesApiProps}\n      labels={labels}\n      {...control.monthYearSelect}\n    />\n  ) : (\n    <ScheduleHeader.Control {...stylesApiProps} interactive={false} miw={control.miw}>\n      {control.title}\n    </ScheduleHeader.Control>\n  );\n\n  const views = viewSelectProps?.views || VIEW_LEVELS;\n  const compactViewSelectData = views.map((v) => ({\n    value: v,\n    label: getLabel(v, labels) as string,\n  }));\n\n  return (\n    <ScheduleHeader {...stylesApiProps} labels={labels}>\n      <div className={classes.navigationGroup}>\n        <ScheduleHeader.Previous\n          {...stylesApiProps}\n          onClick={() => onDateChange?.(navigationHandlers.previous())}\n          labels={labels}\n          {...previousControlProps}\n        />\n\n        {centralControl}\n\n        <ScheduleHeader.Next\n          {...stylesApiProps}\n          onClick={() => onDateChange?.(navigationHandlers.next())}\n          labels={labels}\n          {...nextControlProps}\n        />\n      </div>\n\n      <div className={classes.todayControl}>\n        <ScheduleHeader.Today\n          {...stylesApiProps}\n          onClick={() => onDateChange?.(navigationHandlers.today())}\n          labels={labels}\n          {...todayControlProps}\n        />\n        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\n        )}\n      </div>\n\n      <div className={classes.compactControls}>\n        {onAgendaClick && (\n          <ScheduleHeader.Control\n            {...stylesApiProps}\n            data-type=\"agenda\"\n            active={agendaActive}\n            onClick={onAgendaClick}\n            aria-label={getLabel('agenda', labels) as string}\n            className={classes.compactAgendaControl}\n          >\n            {getLabel('agenda', labels)}\n          </ScheduleHeader.Control>\n        )}\n        <NativeSelect\n          className={classes.compactViewSelect}\n          data={compactViewSelectData}\n          value={view}\n          onChange={(event) => onViewChange?.(event.currentTarget.value as ScheduleViewLevel)}\n          aria-label={getLabel('viewSelectLabel', labels) as string}\n          size=\"sm\"\n        />\n      </div>\n\n      <div className={classes.viewSelect} style={{ marginInlineStart: 'auto' }}>\n        <ScheduleHeader.ViewSelect\n          value={view}\n          onChange={onViewChange}\n          labels={labels}\n          {...stylesApiProps}\n          {...viewSelectProps}\n        />\n      </div>\n    </ScheduleHeader>\n  );\n}\n"],"mappings":";;;;;;;AA2EA,MAAM,cAAmC;CAAC;CAAO;CAAQ;CAAS;AAAM;AAExE,SAAgB,mBAAmB,EACjC,MACA,oBACA,SACA,QACA,cACA,cACA,sBACA,kBACA,mBACA,iBACA,gBACA,eACA,gBAC0B;CAC1B,MAAM,iBAAiB,QAAQ,kBAC7B,oBAAC,eAAe,iBAAhB;EACE,GAAI;EACI;EACR,GAAI,QAAQ;CACb,CAAA,IAED,oBAAC,eAAe,SAAhB;EAAwB,GAAI;EAAgB,aAAa;EAAO,KAAK,QAAQ;EAC1E,UAAA,QAAQ;CACa,CAAA;CAI1B,MAAM,yBADQ,iBAAiB,SAAS,YAAA,CACJ,KAAK,OAAO;EAC9C,OAAO;EACP,OAAO,SAAS,GAAG,MAAM;CAC3B,EAAE;CAEF,OACE,qBAAC,gBAAD;EAAgB,GAAI;EAAwB;EAA5C,UAAA;GACE,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;IAAxB,UAAA;KACE,oBAAC,eAAe,UAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,SAAS,CAAC;MACnD;MACR,GAAI;KACL,CAAA;KAEA;KAED,oBAAC,eAAe,MAAhB;MACE,GAAI;MACJ,eAAe,eAAe,mBAAmB,KAAK,CAAC;MAC/C;MACR,GAAI;KACL,CAAA;IACE;;GAEL,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;IAAxB,UAAA,CACE,oBAAC,eAAe,OAAhB;KACE,GAAI;KACJ,eAAe,eAAe,mBAAmB,MAAM,CAAC;KAChD;KACR,GAAI;IACL,CAAA,GACA,iBACC,oBAAC,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAY,SAAS,UAAU,MAAM;KAEpC,UAAA,SAAS,UAAU,MAAM;IACJ,CAAA,CAEvB;;GAEL,qBAAC,OAAD;IAAK,WAAWA,8BAAQ;IAAxB,UAAA,CACG,iBACC,oBAAC,eAAe,SAAhB;KACE,GAAI;KACJ,aAAU;KACV,QAAQ;KACR,SAAS;KACT,cAAY,SAAS,UAAU,MAAM;KACrC,WAAWA,8BAAQ;KAElB,UAAA,SAAS,UAAU,MAAM;IACJ,CAAA,GAE1B,oBAAC,cAAD;KACE,WAAWA,8BAAQ;KACnB,MAAM;KACN,OAAO;KACP,WAAW,UAAU,eAAe,MAAM,cAAc,KAA0B;KAClF,cAAY,SAAS,mBAAmB,MAAM;KAC9C,MAAK;IACN,CAAA,CACE;;GAEL,oBAAC,OAAD;IAAK,WAAWA,8BAAQ;IAAY,OAAO,EAAE,mBAAmB,OAAO;IACrE,UAAA,oBAAC,eAAe,YAAhB;KACE,OAAO;KACP,UAAU;KACF;KACR,GAAI;KACJ,GAAI;IACL,CAAA;GACE,CAAA;EACS;;AAEpB"}

package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSelect.mjs","names":["classes"],"sources":["../../../../src/components/ScheduleHeader/ViewSelect/ViewSelect.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineRadius,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { getLabel, ScheduleLabels, ScheduleLabelsOverride } from '../../../labels';\nimport { ScheduleViewLevel } from '../../../types';\nimport { HeaderControl } from '../HeaderControl/HeaderControl';\nimport { useScheduleHeaderLabels } from '../ScheduleHeaderContext';\nimport classes from './ViewSelect.module.css';\n\nexport type ViewSelectStylesNames = 'viewSelect';\n\nexport interface ViewSelectProps\n  extends BoxProps, StylesApiProps<ViewSelectFactory>, ElementProps<'div', 'value' | 'onChange'> {\n  __staticSelector?: string;\n\n  /** A list of views to display @default ['day', 'week', 'month', 'year'] */\n  views?: readonly ScheduleViewLevel[];\n\n  /** Selected view type */\n  value?: ScheduleViewLevel;\n\n  /** Called when view type changes */\n  onChange?: (value: ScheduleViewLevel) => void;\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 */\n  labels?: ScheduleLabelsOverride;\n}\n\nexport type ViewSelectFactory = Factory<{\n  props: ViewSelectProps;\n  ref: HTMLDivElement;\n  stylesNames: ViewSelectStylesNames;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'ViewSelect',\n  views: ['day', 'week', 'month', 'year'],\n} satisfies Partial<ViewSelectProps>;\n\nexport const ViewSelect = factory<ViewSelectFactory>((_props) => {\n  const props = useProps('ViewSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    value,\n    onChange,\n    views,\n    __staticSelector,\n    radius,\n    labels,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ViewSelectFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    rootSelector: 'viewSelect',\n  });\n\n  const resolvedLabels = useScheduleHeaderLabels(labels);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ViewSelectFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { dir } = useDirection();\n  const controlsRef = useRef<(HTMLButtonElement | null)[]>([]);\n  const activatedWithKeyboardRef = useRef(false);\n\n  // Restore focus to the selected tab when the component mounts\n  // This handles the case where focus is lost due to view switch (header unmount/remount)\n  // Only restore focus if the view was activated via keyboard (Enter/Space)\n  useEffect(() => {\n    if (activatedWithKeyboardRef.current && document.activeElement === document.body) {\n      const selectedIndex = views!.findIndex((view) => view === value);\n      if (selectedIndex !== -1) {\n        controlsRef.current[selectedIndex]?.focus();\n      }\n    }\n    activatedWithKeyboardRef.current = false;\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const isRtl = dir === 'rtl';\n    const nextKey = isRtl ? 'ArrowLeft' : 'ArrowRight';\n    const prevKey = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key === nextKey) {\n      event.preventDefault();\n      const nextIndex = index < views!.length - 1 ? index + 1 : 0;\n      controlsRef.current[nextIndex]?.focus();\n    } else if (event.key === prevKey) {\n      event.preventDefault();\n      const prevIndex = index > 0 ? index - 1 : views!.length - 1;\n      controlsRef.current[prevIndex]?.focus();\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      controlsRef.current[0]?.focus();\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      controlsRef.current[views!.length - 1]?.focus();\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      activatedWithKeyboardRef.current = true;\n    }\n  };\n\n  const switchToLabelKeys: Record<ScheduleViewLevel, keyof ScheduleLabels> = {\n    day: 'switchToDayView',\n    week: 'switchToWeekView',\n    month: 'switchToMonthView',\n    year: 'switchToYearView',\n  };\n\n  const items = views!.map((view, index) => {\n    const isSelected = value === view;\n    return (\n      <HeaderControl\n        key={view}\n        ref={(node) => {\n          controlsRef.current[index] = node;\n        }}\n        data-type={view}\n        active={isSelected}\n        onClick={() => onChange?.(view)}\n        onKeyDown={(event) => handleKeyDown(event, index)}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        __staticSelector={__staticSelector}\n        radius={radius}\n        role=\"tab\"\n        aria-label={getLabel(switchToLabelKeys[view], resolvedLabels) as string}\n        aria-selected={isSelected}\n        tabIndex={isSelected ? 0 : -1}\n      >\n        {getLabel(view, resolvedLabels)}\n      </HeaderControl>\n    );\n  });\n\n  return (\n    <Box\n      {...getStyles('viewSelect')}\n      role=\"tablist\"\n      aria-label={getLabel('viewSelectLabel', resolvedLabels)}\n      {...others}\n    >\n      {items}\n    </Box>\n  );\n});\n\nViewSelect.displayName = '@mantine/schedule/ViewSelect';\nViewSelect.classes = classes;\n"],"mappings":";;;;;;;;;AAgDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,OAAO;EAAC;EAAO;EAAQ;EAAS;CAAM;AACxC;AAEA,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,OACA,UACA,OACA,kBACA,QACA,QACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,iBAAiB,wBAAwB,MAAM;CAErD,MAAM,EAAE,oBAAoB,mBAAmB,qBAAwC;EACrF;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,cAAc,OAAqC,CAAC,CAAC;CAC3D,MAAM,2BAA2B,OAAO,KAAK;CAK7C,gBAAgB;EACd,IAAI,yBAAyB,WAAW,SAAS,kBAAkB,SAAS,MAAM;GAChF,MAAM,gBAAgB,MAAO,WAAW,SAAS,SAAS,KAAK;GAC/D,IAAI,kBAAkB,IACpB,YAAY,QAAQ,cAAc,EAAE,MAAM;EAE9C;EACA,yBAAyB,UAAU;CACrC,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,OAA+C,UAAkB;EACtF,MAAM,QAAQ,QAAQ;EACtB,MAAM,UAAU,QAAQ,cAAc;EACtC,MAAM,UAAU,QAAQ,eAAe;EAEvC,IAAI,MAAM,QAAQ,SAAS;GACzB,MAAM,eAAe;GACrB,MAAM,YAAY,QAAQ,MAAO,SAAS,IAAI,QAAQ,IAAI;GAC1D,YAAY,QAAQ,UAAU,EAAE,MAAM;EACxC,OAAO,IAAI,MAAM,QAAQ,SAAS;GAChC,MAAM,eAAe;GACrB,MAAM,YAAY,QAAQ,IAAI,QAAQ,IAAI,MAAO,SAAS;GAC1D,YAAY,QAAQ,UAAU,EAAE,MAAM;EACxC,OAAO,IAAI,MAAM,QAAQ,QAAQ;GAC/B,MAAM,eAAe;GACrB,YAAY,QAAQ,EAAE,EAAE,MAAM;EAChC,OAAO,IAAI,MAAM,QAAQ,OAAO;GAC9B,MAAM,eAAe;GACrB,YAAY,QAAQ,MAAO,SAAS,EAAE,EAAE,MAAM;EAChD,OAAO,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAChD,yBAAyB,UAAU;CAEvC;CAEA,MAAM,oBAAqE;EACzE,KAAK;EACL,MAAM;EACN,OAAO;EACP,MAAM;CACR;CAEA,MAAM,QAAQ,MAAO,KAAK,MAAM,UAAU;EACxC,MAAM,aAAa,UAAU;EAC7B,OACE,oBAAC,eAAD;GAEE,MAAM,SAAS;IACb,YAAY,QAAQ,SAAS;GAC/B;GACA,aAAW;GACX,QAAQ;GACR,eAAe,WAAW,IAAI;GAC9B,YAAY,UAAU,cAAc,OAAO,KAAK;GAChD,YAAY;GACZ,QAAQ;GACU;GACV;GACR,MAAK;GACL,cAAY,SAAS,kBAAkB,OAAO,cAAc;GAC5D,iBAAe;GACf,UAAU,aAAa,IAAI;aAE1B,SAAS,MAAM,cAAc;EACjB,GAlBR,IAkBQ;CAEnB,CAAC;CAED,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,YAAY;EAC1B,MAAK;EACL,cAAY,SAAS,mBAAmB,cAAc;EACtD,GAAI;YAEH;CACE,CAAA;AAET,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,UAAUA"}
+{"version":3,"file":"ViewSelect.mjs","names":["classes"],"sources":["../../../../src/components/ScheduleHeader/ViewSelect/ViewSelect.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport {\n  Box,\n  BoxProps,\n  ElementProps,\n  factory,\n  Factory,\n  MantineRadius,\n  StylesApiProps,\n  useDirection,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '@mantine/core';\nimport { getLabel, ScheduleLabels, ScheduleLabelsOverride } from '../../../labels';\nimport { ScheduleViewLevel } from '../../../types';\nimport { HeaderControl } from '../HeaderControl/HeaderControl';\nimport { useScheduleHeaderLabels } from '../ScheduleHeaderContext';\nimport classes from './ViewSelect.module.css';\n\nexport type ViewSelectStylesNames = 'viewSelect';\n\nexport interface ViewSelectProps\n  extends BoxProps, StylesApiProps<ViewSelectFactory>, ElementProps<'div', 'value' | 'onChange'> {\n  __staticSelector?: string;\n\n  /** A list of views to display @default ['day', 'week', 'month', 'year'] */\n  views?: readonly ScheduleViewLevel[];\n\n  /** Selected view type */\n  value?: ScheduleViewLevel;\n\n  /** Called when view type changes */\n  onChange?: (value: ScheduleViewLevel) => void;\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 */\n  labels?: ScheduleLabelsOverride;\n}\n\nexport type ViewSelectFactory = Factory<{\n  props: ViewSelectProps;\n  ref: HTMLDivElement;\n  stylesNames: ViewSelectStylesNames;\n}>;\n\nconst defaultProps = {\n  __staticSelector: 'ViewSelect',\n  views: ['day', 'week', 'month', 'year'],\n} satisfies Partial<ViewSelectProps>;\n\nexport const ViewSelect = factory<ViewSelectFactory>((_props) => {\n  const props = useProps('ViewSelect', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    attributes,\n    value,\n    onChange,\n    views,\n    __staticSelector,\n    radius,\n    labels,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<ViewSelectFactory>({\n    name: __staticSelector,\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    rootSelector: 'viewSelect',\n  });\n\n  const resolvedLabels = useScheduleHeaderLabels(labels);\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<ViewSelectFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const { dir } = useDirection();\n  const controlsRef = useRef<(HTMLButtonElement | null)[]>([]);\n  const activatedWithKeyboardRef = useRef(false);\n\n  // Restore focus to the selected tab when the component mounts\n  // This handles the case where focus is lost due to view switch (header unmount/remount)\n  // Only restore focus if the view was activated via keyboard (Enter/Space)\n  useEffect(() => {\n    if (activatedWithKeyboardRef.current && document.activeElement === document.body) {\n      const selectedIndex = views!.findIndex((view) => view === value);\n      if (selectedIndex !== -1) {\n        controlsRef.current[selectedIndex]?.focus();\n      }\n    }\n    activatedWithKeyboardRef.current = false;\n  }, []);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const isRtl = dir === 'rtl';\n    const nextKey = isRtl ? 'ArrowLeft' : 'ArrowRight';\n    const prevKey = isRtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.key === nextKey) {\n      event.preventDefault();\n      const nextIndex = index < views!.length - 1 ? index + 1 : 0;\n      controlsRef.current[nextIndex]?.focus();\n    } else if (event.key === prevKey) {\n      event.preventDefault();\n      const prevIndex = index > 0 ? index - 1 : views!.length - 1;\n      controlsRef.current[prevIndex]?.focus();\n    } else if (event.key === 'Home') {\n      event.preventDefault();\n      controlsRef.current[0]?.focus();\n    } else if (event.key === 'End') {\n      event.preventDefault();\n      controlsRef.current[views!.length - 1]?.focus();\n    } else if (event.key === 'Enter' || event.key === ' ') {\n      activatedWithKeyboardRef.current = true;\n    }\n  };\n\n  const switchToLabelKeys: Record<ScheduleViewLevel, keyof ScheduleLabels> = {\n    day: 'switchToDayView',\n    week: 'switchToWeekView',\n    month: 'switchToMonthView',\n    year: 'switchToYearView',\n  };\n\n  const items = views!.map((view, index) => {\n    const isSelected = value === view;\n    return (\n      <HeaderControl\n        key={view}\n        ref={(node) => {\n          controlsRef.current[index] = node;\n        }}\n        data-type={view}\n        active={isSelected}\n        onClick={() => onChange?.(view)}\n        onKeyDown={(event) => handleKeyDown(event, index)}\n        classNames={resolvedClassNames}\n        styles={resolvedStyles}\n        __staticSelector={__staticSelector}\n        radius={radius}\n        role=\"tab\"\n        aria-label={getLabel(switchToLabelKeys[view], resolvedLabels) as string}\n        aria-selected={isSelected}\n        tabIndex={isSelected ? 0 : -1}\n      >\n        {getLabel(view, resolvedLabels)}\n      </HeaderControl>\n    );\n  });\n\n  return (\n    <Box\n      {...getStyles('viewSelect')}\n      role=\"tablist\"\n      aria-label={getLabel('viewSelectLabel', resolvedLabels)}\n      {...others}\n    >\n      {items}\n    </Box>\n  );\n});\n\nViewSelect.displayName = '@mantine/schedule/ViewSelect';\nViewSelect.classes = classes;\n"],"mappings":";;;;;;;;;AAgDA,MAAM,eAAe;CACnB,kBAAkB;CAClB,OAAO;EAAC;EAAO;EAAQ;EAAS;CAAM;AACxC;AAEA,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,OACA,UACA,OACA,kBACA,QACA,QACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,iBAAiB,wBAAwB,MAAM;CAErD,MAAM,EAAE,oBAAoB,mBAAmB,qBAAwC;EACrF;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,cAAc,OAAqC,CAAC,CAAC;CAC3D,MAAM,2BAA2B,OAAO,KAAK;CAK7C,gBAAgB;EACd,IAAI,yBAAyB,WAAW,SAAS,kBAAkB,SAAS,MAAM;GAChF,MAAM,gBAAgB,MAAO,WAAW,SAAS,SAAS,KAAK;GAC/D,IAAI,kBAAkB,IACpB,YAAY,QAAQ,cAAc,EAAE,MAAM;EAE9C;EACA,yBAAyB,UAAU;CACrC,GAAG,CAAC,CAAC;CAEL,MAAM,iBAAiB,OAA+C,UAAkB;EACtF,MAAM,QAAQ,QAAQ;EACtB,MAAM,UAAU,QAAQ,cAAc;EACtC,MAAM,UAAU,QAAQ,eAAe;EAEvC,IAAI,MAAM,QAAQ,SAAS;GACzB,MAAM,eAAe;GACrB,MAAM,YAAY,QAAQ,MAAO,SAAS,IAAI,QAAQ,IAAI;GAC1D,YAAY,QAAQ,UAAU,EAAE,MAAM;EACxC,OAAO,IAAI,MAAM,QAAQ,SAAS;GAChC,MAAM,eAAe;GACrB,MAAM,YAAY,QAAQ,IAAI,QAAQ,IAAI,MAAO,SAAS;GAC1D,YAAY,QAAQ,UAAU,EAAE,MAAM;EACxC,OAAO,IAAI,MAAM,QAAQ,QAAQ;GAC/B,MAAM,eAAe;GACrB,YAAY,QAAQ,EAAE,EAAE,MAAM;EAChC,OAAO,IAAI,MAAM,QAAQ,OAAO;GAC9B,MAAM,eAAe;GACrB,YAAY,QAAQ,MAAO,SAAS,EAAE,EAAE,MAAM;EAChD,OAAO,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAChD,yBAAyB,UAAU;CAEvC;CAEA,MAAM,oBAAqE;EACzE,KAAK;EACL,MAAM;EACN,OAAO;EACP,MAAM;CACR;CAEA,MAAM,QAAQ,MAAO,KAAK,MAAM,UAAU;EACxC,MAAM,aAAa,UAAU;EAC7B,OACE,oBAAC,eAAD;GAEE,MAAM,SAAS;IACb,YAAY,QAAQ,SAAS;GAC/B;GACA,aAAW;GACX,QAAQ;GACR,eAAe,WAAW,IAAI;GAC9B,YAAY,UAAU,cAAc,OAAO,KAAK;GAChD,YAAY;GACZ,QAAQ;GACU;GACV;GACR,MAAK;GACL,cAAY,SAAS,kBAAkB,OAAO,cAAc;GAC5D,iBAAe;GACf,UAAU,aAAa,IAAI;GAE1B,UAAA,SAAS,MAAM,cAAc;EACjB,GAlBR,IAkBQ;CAEnB,CAAC;CAED,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,YAAY;EAC1B,MAAK;EACL,cAAY,SAAS,mBAAmB,cAAc;EACtD,GAAI;EAEH,UAAA;CACE,CAAA;AAET,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,UAAUA"}

package/esm/components/WeekView/WeekView.mjs

@@ -8,6 +8,7 @@ import { getWeekDays } from "../../utils/get-week-days/get-week-days.mjs";
 import { nextWeek } from "../../utils/next-week/next-week.mjs";
 import { previousWeek } from "../../utils/previous-week/previous-week.mjs";
 import { isAllDayEvent } from "../../utils/is-all-day-event/is-all-day-event.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";
@@ -20,6 +21,7 @@ import { AgendaView } from "../AgendaView/AgendaView.mjs";
 import { CurrentTimeIndicator } from "../CurrentTimeIndicator/CurrentTimeIndicator.mjs";
 import { DragContext } from "../DragContext/DragContext.mjs";
 import { ScheduleEvent } from "../ScheduleEvent/ScheduleEvent.mjs";
+import { ScheduleBackgroundEvent } from "../ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs";
 import { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
 import { getWeekLabel } from "./get-week-label/get-week-label.mjs";
 import { getWeekViewEvents } from "./get-week-view-events/get-week-view-events.mjs";
@@ -27,7 +29,7 @@ import { handleWeekViewKeyDown } from "./handle-week-view-key-down.mjs";
 import { WeekViewDay } from "./WeekViewDay.mjs";
 import WeekView_module_default from "./WeekView.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, useMemo, useRef, useState } from "react";
 import { useDatesContext } from "@mantine/dates";
@@ -53,7 +55,8 @@ const defaultProps = {
 	withEventsDragAndDrop: false,
 	withDragSlotSelect: false,
 	withEventResize: false,
-	mode: "default"
+	mode: "default",
+	withInteractiveBackgroundEvents: false
 };
 const varsResolver = createVarsResolver((_theme, { radius, allDaySlotHeight, slotHeight }) => ({ weekView: {
 	"--week-view-radius": radius !== void 0 ? getRadius(radius) : void 0,
@@ -62,7 +65,7 @@ const varsResolver = createVarsResolver((_theme, { radius, allDaySlotHeight, slo
 } }));
 const WeekView = factory((_props) => {
 	const props = useProps("WeekView", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
+	const { classNames, className, style, styles, unstyled, attributes, vars, startTime, endTime, date, onDateChange, intervalMinutes, withSubHourGridLines, slotLabelFormat, withWeekendDays, weekendDays, firstDayOfWeek, weekdayFormat, radius, highlightToday, withCurrentTimeIndicator, forceCurrentTimeIndicator, getCurrentTime, scrollAreaProps, locale, withWeekNumber, withCurrentTimeBubble, withAllDaySlots, __staticSelector, withHeader, onViewChange, previousControlProps, nextControlProps, todayControlProps, viewSelectProps, weekLabelFormat, events, allDaySlotHeight, slotHeight, labels, highlightBusinessHours, businessHours, renderEventBody, renderEvent, withEventsDragAndDrop, onEventDrop, canDragEvent, eventDragInterval, onEventDragStart, onEventDragEnd, onTimeSlotClick, onAllDaySlotClick, onEventClick, withInteractiveBackgroundEvents, withDragSlotSelect, onSlotDragEnd, mode, startScrollTime, renderWeekLabel, onExternalEventDrop, withEventResize, onEventResize, canResizeEvent, eventResizeInterval, recurrenceExpansionLimit, getTimeSlotProps, withAgenda, ...others } = props;
 	const [agendaOpen, setAgendaOpen] = useState(false);
 	const getStyles = useStyles({
 		name: __staticSelector,
@@ -90,7 +93,6 @@ const WeekView = factory((_props) => {
 		__staticSelector,
 		radius
 	};
-	const theme = useMantineTheme();
 	const [scrolled, setScrolled] = useState(false);
 	const ctx = useDatesContext();
 	const slots = getDayTimeIntervals({
@@ -103,11 +105,56 @@ const WeekView = factory((_props) => {
 		viewportRef,
 		enabled: (withEventsDragAndDrop || !!onExternalEventDrop) && mode !== "static"
 	});
+	const dragOffsetRef = useRef({
+		offset: 0,
+		size: 0
+	});
+	const getDropTimeForSlot = (target, draggedEvent) => {
+		const slotTime = slots[target.slotIndex].startTime;
+		return calculateDropTime({
+			draggedEvent,
+			targetDate: target.day,
+			targetSlotTime: slotTime,
+			intervalMinutes,
+			dragIntervalMinutes: eventDragInterval,
+			slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
+			slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
+			startTime,
+			endTime
+		});
+	};
 	const handleExternalDrop = useCallback((e, target) => {
 		if (!onExternalEventDrop) return;
 		const slotDate = dayjs(target.day).format("YYYY-MM-DD");
-		onExternalEventDrop(e.dataTransfer, `${slotDate} ${slots[target.slotIndex].startTime}`);
-	}, [onExternalEventDrop, slots]);
+		const slotTime = slots[target.slotIndex].startTime;
+		if (eventDragInterval == null) {
+			onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
+			return;
+		}
+		const slotStart = `${slotDate} ${slotTime}`;
+		const { start } = calculateDropTime({
+			draggedEvent: {
+				start: slotStart,
+				end: slotStart
+			},
+			targetDate: target.day,
+			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,
+		slots,
+		eventDragInterval,
+		intervalMinutes,
+		startTime,
+		endTime
+	]);
 	const handleExternalAllDayDrop = useCallback((e, day) => {
 		if (!onExternalEventDrop) return;
 		onExternalEventDrop(e.dataTransfer, `${dayjs(day).format("YYYY-MM-DD")} 00:00:00`);
@@ -119,17 +166,21 @@ const WeekView = factory((_props) => {
 		canDragEvent,
 		onEventDragStart,
 		onEventDragEnd,
-		calculateDropTarget: (target, draggedEvent) => {
-			const slotTime = slots[target.slotIndex].startTime;
-			return calculateDropTime({
-				draggedEvent,
-				targetDate: target.day,
-				targetSlotTime: slotTime,
-				intervalMinutes
-			});
-		},
+		calculateDropTarget: getDropTimeForSlot,
 		onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
 	});
+	const updateDragPreview = (target) => {
+		const draggedEvent = dragDrop.dragContextValue.draggedEvent;
+		if (eventDragInterval == null || !draggedEvent) return;
+		const { start, end } = getDropTimeForSlot(target, draggedEvent);
+		const newStart = dayjs(start).format("YYYY-MM-DD HH:mm:ss");
+		if (dragDrop.dragPreview?.start !== newStart || dragDrop.dragPreview?.target.day !== target.day) dragDrop.setDragPreview({
+			start: newStart,
+			end: dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
+			target
+		});
+	};
+	const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;
 	const allDayDragDrop = useDragDropHandlers({
 		enabled: withEventsDragAndDrop,
 		mode,
@@ -161,6 +212,7 @@ const WeekView = factory((_props) => {
 		startTime,
 		endTime,
 		intervalMinutes,
+		resizeIntervalMinutes: eventResizeInterval,
 		onEventResize,
 		canResizeEvent
 	});
@@ -183,14 +235,15 @@ const WeekView = factory((_props) => {
 		weekendDays: ctx.getWeekendDays(weekendDays),
 		firstDayOfWeek: ctx.getFirstDayOfWeek(firstDayOfWeek)
 	});
+	const expandedEvents = expandRecurringEvents({
+		events,
+		rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
+		rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
+		expansionLimit: recurrenceExpansionLimit
+	});
 	const weekEvents = getWeekViewEvents({
 		date,
-		events: expandRecurringEvents({
-			events,
-			rangeStart: dayjs(weekdays[0]).startOf("day").toDate(),
-			rangeEnd: dayjs(weekdays[weekdays.length - 1]).endOf("day").toDate(),
-			expansionLimit: recurrenceExpansionLimit
-		}),
+		events: expandedEvents,
 		startTime,
 		endTime,
 		intervalMinutes,
@@ -200,8 +253,9 @@ const WeekView = factory((_props) => {
 	});
 	const timeValues = slots.reduce((acc, interval) => {
 		if (!interval.isHourStart) return acc;
+		const intervalTime = dayjs(`${dayjs(date).format("YYYY-MM-DD")} ${interval.startTime}`);
 		const label = formatDate({
-			date: dayjs(`${dayjs(date).format("YYYY-MM-DD")} ${interval.startTime}`),
+			date: intervalTime,
 			locale: ctx.getLocale(locale),
 			format: slotLabelFormat
 		});
@@ -250,14 +304,33 @@ const WeekView = factory((_props) => {
 			const rect = slotNode.getBoundingClientRect();
 			return event.clientY >= rect.top && event.clientY <= rect.bottom;
 		});
-		if (slotIndex >= 0) return slotIndex;
+		if (slotIndex >= 0) {
+			const rect = daySlots[slotIndex].getBoundingClientRect();
+			dragOffsetRef.current = {
+				offset: event.clientY - rect.top,
+				size: rect.height
+			};
+			return slotIndex;
+		}
 		const firstSlot = daySlots[0];
 		const lastSlot = daySlots[daySlots.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 daySlots.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 daySlots.length - 1;
+		}
 		return null;
 	}, []);
 	const handleSlotKeyDown = (event, dayIndex, slotIndex) => {
@@ -323,32 +396,20 @@ const WeekView = factory((_props) => {
 		...getStyles("weekViewDayNumber"),
 		key: "date"
 	}, dayjs(day).date())));
+	const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
 	const days = weekdays.map((day, dayIndex) => {
-		const backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).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-${event.id}`,
-				...getStyles("weekViewBackgroundEvent", { style: {
-					top: `${event.position.top}%`,
-					height: `${event.position.height}%`,
-					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 backgroundEventNodes = (weekEvents.backgroundEvents[day] || []).filter((event) => !event.position.allDay).map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
+			event,
+			renderEvent,
+			renderEventBody,
+			interactive: interactiveBackgroundEvents,
+			onEventClick,
+			...getStyles("weekViewBackgroundEvent", { style: {
+				top: `${event.position.top}%`,
+				height: `${event.position.height}%`,
+				width: "100%"
+			} })
+		}, `bg-${event.id}`));
 		const dayEvents = (weekEvents.regularEvents[day] || []).map((event) => {
 			const eventIsAllDay = isAllDayEvent({
 				event,
@@ -418,10 +479,16 @@ const WeekView = factory((_props) => {
 			} : void 0,
 			onDaySlotsDragOver: (event, dayStr, dayIdx) => {
 				const slotIndex = getSlotIndexFromDragPoint(event, dayIdx);
-				if (slotIndex !== null) dragDrop.handleDragOver(event, {
-					day: dayStr,
-					slotIndex
-				});
+				if (slotIndex !== null) {
+					dragDrop.handleDragOver(event, {
+						day: dayStr,
+						slotIndex
+					});
+					updateDragPreview({
+						day: dayStr,
+						slotIndex
+					});
+				}
 			},
 			onDaySlotsDragLeave: dragDrop.handleDragLeave,
 			onDaySlotsDrop: (event, dayStr, dayIdx) => {
@@ -431,7 +498,7 @@ const WeekView = factory((_props) => {
 					slotIndex
 				});
 			},
-			dropTargetSlotIndex: dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
+			dropTargetSlotIndex: !suppressDropHighlight && dragDrop.dropTarget?.day === day ? dragDrop.dropTarget.slotIndex : void 0,
 			withDragSlotSelect,
 			onSlotPointerDown: slotDragSelect.handleSlotPointerDown,
 			isSlotDragSelected: slotDragSelect.isSlotSelected,
@@ -439,7 +506,29 @@ const WeekView = factory((_props) => {
 				daySlotsContainersRef.current[dayIndex] = node;
 			},
 			getTimeSlotProps,
-			children: [backgroundEventNodes, dayEvents]
+			children: [
+				backgroundEventNodes,
+				dayEvents,
+				dragDrop.dragPreview?.target.day === day && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ jsx(Box, { ...getStyles("weekViewDragPreview", { 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}%`
+					};
+				})() }) })
+			]
 		}, day);
 	});
 	const allDaySlots = weekdays.map((day, dayIndex) => /* @__PURE__ */ jsx(UnstyledButton, {
@@ -480,32 +569,19 @@ const WeekView = factory((_props) => {
 		const allDayBgEvents = (weekEvents.backgroundEvents[day] || []).filter((event) => event.position.allDay);
 		const dayWidth = 100 / weekdays.length;
 		const dayOffset = dayIndex * dayWidth;
-		return allDayBgEvents.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}-${day}`,
-				...getStyles("weekViewBackgroundEvent", { style: {
-					top: 0,
-					height: "100%",
-					left: `${dayOffset}%`,
-					width: `${dayWidth}%`
-				} }),
-				__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);
-		});
+		return allDayBgEvents.map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
+			event,
+			renderEvent,
+			renderEventBody,
+			interactive: interactiveBackgroundEvents,
+			onEventClick,
+			...getStyles("weekViewBackgroundEvent", { style: {
+				top: 0,
+				height: "100%",
+				left: `${dayOffset}%`,
+				width: `${dayWidth}%`
+			} })
+		}, `bg-allday-${event.id}-${day}`));
 	});
 	const extraRows = Math.max(...weekEvents.allDayEvents.map((event) => event.position.row), 1) - 1;
 	const content = /* @__PURE__ */ jsxs(Box, {
@@ -563,7 +639,8 @@ const WeekView = factory((_props) => {
 				mod: {
 					"with-weekends": withWeekendDays,
 					"hide-sub-hour-grid-lines": !withSubHourGridLines,
-					"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging
+					"event-interaction": eventResize.isResizing || dragDrop.dragContextValue.isDragging,
+					"all-day-dragging": allDayDragDrop.dragContextValue.isDragging
 				},
 				children: /* @__PURE__ */ jsxs(ScrollArea.Autosize, {
 					scrollbarSize: 4,