@mantine/schedule 9.5.2 → 9.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/_virtual/_rolldown/runtime.cjs +1 -1
- package/cjs/components/AgendaView/AgendaView.cjs +7 -6
- package/cjs/components/AgendaView/AgendaView.cjs.map +1 -1
- package/cjs/components/AgendaView/get-agenda-view-events.cjs.map +1 -1
- package/cjs/components/CurrentTimeIndicator/CurrentTimeIndicator.cjs +3 -2
- package/cjs/components/CurrentTimeIndicator/CurrentTimeIndicator.cjs.map +1 -1
- package/cjs/components/DayView/DayView.cjs +153 -80
- package/cjs/components/DayView/DayView.cjs.map +1 -1
- package/cjs/components/DayView/DayView.module.cjs +1 -0
- package/cjs/components/DayView/DayView.module.cjs.map +1 -1
- package/cjs/components/DayView/get-day-view-events/get-day-positioned-events.cjs +12 -7
- package/cjs/components/DayView/get-day-view-events/get-day-positioned-events.cjs.map +1 -1
- package/cjs/components/DayView/get-day-view-events/get-day-view-events.cjs +3 -2
- package/cjs/components/DayView/get-day-view-events/get-day-view-events.cjs.map +1 -1
- package/cjs/components/DragContext/DragContext.cjs.map +1 -1
- package/cjs/components/MobileMonthView/MobileMonthView.cjs +7 -6
- package/cjs/components/MobileMonthView/MobileMonthView.cjs.map +1 -1
- package/cjs/components/MobileMonthView/get-mobile-month-view-events.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.cjs +24 -34
- package/cjs/components/MonthView/MonthView.cjs.map +1 -1
- package/cjs/components/MonthView/MonthView.module.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/find-available-row.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-month-positioned-events.cjs +4 -2
- package/cjs/components/MonthView/get-month-view-events/get-month-positioned-events.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-month-view-events.cjs.map +1 -1
- package/cjs/components/MonthView/get-month-view-events/get-weeks-in-range.cjs +3 -2
- package/cjs/components/MonthView/get-month-view-events/get-weeks-in-range.cjs.map +1 -1
- package/cjs/components/MonthView/get-renderable-month-event-segments.cjs +1 -1
- package/cjs/components/MonthView/get-renderable-month-event-segments.cjs.map +1 -1
- package/cjs/components/MoreEvents/MoreEvents.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs +137 -53
- package/cjs/components/ResourcesDayView/ResourcesDayView.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs +2 -1
- package/cjs/components/ResourcesDayView/ResourcesDayView.module.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/ResourcesDayViewColumn.cjs.map +1 -1
- package/cjs/components/ResourcesDayView/get-resources-day-view-events/get-resources-day-view-events.cjs.map +1 -1
- package/cjs/components/ResourcesMonthView/ResourcesMonthView.cjs.map +1 -1
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs +3 -1
- package/cjs/components/ResourcesSchedule/ResourcesSchedule.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs +151 -60
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs +2 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekView.module.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/ResourcesWeekViewRow.cjs.map +1 -1
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs +6 -3
- package/cjs/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.cjs.map +1 -1
- package/cjs/components/Schedule/Schedule.cjs +4 -1
- package/cjs/components/Schedule/Schedule.cjs.map +1 -1
- package/cjs/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs +53 -0
- package/cjs/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.cjs.map +1 -0
- package/cjs/components/ScheduleEvent/ScheduleEvent.cjs.map +1 -1
- package/cjs/components/ScheduleEvent/ScheduleEvent.module.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs +15 -14
- package/cjs/components/ScheduleHeader/HeaderControl/HeaderControl.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeader.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderBase.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ScheduleHeaderContext.cjs.map +1 -1
- package/cjs/components/ScheduleHeader/ViewSelect/ViewSelect.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.cjs +168 -84
- package/cjs/components/WeekView/WeekView.cjs.map +1 -1
- package/cjs/components/WeekView/WeekView.module.cjs +1 -0
- package/cjs/components/WeekView/WeekView.module.cjs.map +1 -1
- package/cjs/components/WeekView/WeekViewDay.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-label/get-week-label.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-all-day-event-offset.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-all-day-event-width.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/calculate-event-days.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-event-end-date.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-hanging-status.cjs.map +1 -1
- package/cjs/components/WeekView/get-week-view-events/get-week-positioned-events.cjs +4 -2
- package/cjs/components/WeekView/get-week-view-events/get-week-positioned-events.cjs.map +1 -1
- package/cjs/components/YearView/YearView.cjs +7 -6
- package/cjs/components/YearView/YearView.cjs.map +1 -1
- package/cjs/components/YearView/YearViewMonth.cjs.map +1 -1
- package/cjs/components/YearView/get-visible-week-days.cjs.map +1 -1
- package/cjs/components/YearView/get-year-view-events/get-year-view-events.cjs.map +1 -1
- package/cjs/hooks/use-auto-scroll-on-drag.cjs.map +1 -1
- package/cjs/hooks/use-day-grid-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-drag-drop-handlers.cjs +13 -2
- package/cjs/hooks/use-drag-drop-handlers.cjs.map +1 -1
- package/cjs/hooks/use-drag-state.cjs.map +1 -1
- package/cjs/hooks/use-event-resize.cjs +30 -15
- package/cjs/hooks/use-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-horizontal-event-resize.cjs +30 -15
- package/cjs/hooks/use-horizontal-event-resize.cjs.map +1 -1
- package/cjs/hooks/use-slot-drag-select.cjs.map +1 -1
- package/cjs/index.cjs +6 -0
- package/cjs/utils/apply-cascade-layout/apply-cascade-layout.cjs +21 -0
- package/cjs/utils/apply-cascade-layout/apply-cascade-layout.cjs.map +1 -0
- package/cjs/utils/calculate-drop-time/calculate-drop-time.cjs +25 -4
- package/cjs/utils/calculate-drop-time/calculate-drop-time.cjs.map +1 -1
- package/cjs/utils/calculate-month-drop-date/calculate-month-drop-date.cjs.map +1 -1
- package/cjs/utils/calculate-month-resize-dates/calculate-month-resize-dates.cjs.map +1 -1
- package/cjs/utils/expand-recurring-events/expand-recurring-events.cjs.map +1 -1
- package/cjs/utils/format-date/format-date.cjs.map +1 -1
- package/cjs/utils/get-current-time-position/get-current-time-position.cjs.map +1 -1
- package/cjs/utils/get-day-position/get-day-position.cjs.map +1 -1
- package/cjs/utils/get-end-of-week/get-end-of-week.cjs.map +1 -1
- package/cjs/utils/get-month-days/get-month-days.cjs +4 -2
- package/cjs/utils/get-month-days/get-month-days.cjs.map +1 -1
- package/cjs/utils/get-month-range/get-month-range.cjs.map +1 -1
- package/cjs/utils/get-months-by-quarter/get-months-by-quarter.cjs.map +1 -1
- package/cjs/utils/get-months-list/get-months-list.cjs.map +1 -1
- package/cjs/{components/ResourcesDayView → utils}/get-overlap-clusters/get-overlap-clusters.cjs +2 -2
- package/cjs/utils/get-overlap-clusters/get-overlap-clusters.cjs.map +1 -0
- package/cjs/utils/get-start-of-week/get-start-of-week.cjs.map +1 -1
- package/cjs/utils/get-week-days/get-week-days.cjs.map +1 -1
- package/cjs/utils/get-week-number/get-week-number.cjs +4 -1
- package/cjs/utils/get-week-number/get-week-number.cjs.map +1 -1
- package/cjs/utils/get-weekdays-names/get-weekdays-names.cjs.map +1 -1
- package/cjs/utils/is-after-min-date/is-after-min-date.cjs.map +1 -1
- package/cjs/utils/is-all-day-event/is-all-day-event.cjs.map +1 -1
- package/cjs/utils/is-before-max-date/is-before-max-date.cjs.map +1 -1
- package/cjs/utils/is-event-in-time-range/is-event-in-time-range.cjs +2 -1
- package/cjs/utils/is-event-in-time-range/is-event-in-time-range.cjs.map +1 -1
- package/cjs/utils/is-events-overlap/is-events-overlap.cjs.map +1 -1
- package/cjs/utils/is-in-time-range/is-in-time-range.cjs.map +1 -1
- package/cjs/utils/is-multiday-event/is-multiday-event.cjs.map +1 -1
- package/cjs/utils/is-same-month/is-same-month.cjs.map +1 -1
- package/cjs/utils/is-within-week/is-within-week.cjs.map +1 -1
- package/cjs/utils/next-week/next-week.cjs.map +1 -1
- package/cjs/utils/previous-week/previous-week.cjs.map +1 -1
- package/cjs/utils/sort-events/sort-events.cjs.map +1 -1
- package/cjs/utils/to-date-string/to-date-string.cjs.map +1 -1
- package/cjs/utils/validate-event/validate-event.cjs.map +1 -1
- package/esm/components/AgendaView/AgendaView.mjs +7 -6
- package/esm/components/AgendaView/AgendaView.mjs.map +1 -1
- package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs +4 -3
- package/esm/components/CurrentTimeIndicator/CurrentTimeIndicator.mjs.map +1 -1
- package/esm/components/DayView/DayView.mjs +154 -81
- package/esm/components/DayView/DayView.mjs.map +1 -1
- package/esm/components/DayView/DayView.module.mjs +1 -0
- package/esm/components/DayView/DayView.module.mjs.map +1 -1
- package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs +12 -7
- package/esm/components/DayView/get-day-view-events/get-day-positioned-events.mjs.map +1 -1
- package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs +3 -2
- package/esm/components/DayView/get-day-view-events/get-day-view-events.mjs.map +1 -1
- package/esm/components/MobileMonthView/MobileMonthView.mjs +7 -6
- package/esm/components/MobileMonthView/MobileMonthView.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.mjs +25 -35
- package/esm/components/MonthView/MonthView.mjs.map +1 -1
- package/esm/components/MonthView/MonthView.module.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/get-month-positioned-events.mjs +4 -2
- package/esm/components/MonthView/get-month-view-events/get-month-positioned-events.mjs.map +1 -1
- package/esm/components/MonthView/get-month-view-events/get-weeks-in-range.mjs +3 -2
- package/esm/components/MonthView/get-month-view-events/get-weeks-in-range.mjs.map +1 -1
- package/esm/components/MonthView/get-renderable-month-event-segments.mjs +1 -1
- package/esm/components/MonthView/get-renderable-month-event-segments.mjs.map +1 -1
- package/esm/components/MoreEvents/MoreEvents.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs +139 -55
- package/esm/components/ResourcesDayView/ResourcesDayView.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs +2 -1
- package/esm/components/ResourcesDayView/ResourcesDayView.module.mjs.map +1 -1
- package/esm/components/ResourcesDayView/ResourcesDayViewColumn.mjs.map +1 -1
- package/esm/components/ResourcesMonthView/ResourcesMonthView.mjs.map +1 -1
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs +3 -1
- package/esm/components/ResourcesSchedule/ResourcesSchedule.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs +153 -62
- package/esm/components/ResourcesWeekView/ResourcesWeekView.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs +2 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekView.module.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/ResourcesWeekViewRow.mjs.map +1 -1
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs +6 -3
- package/esm/components/ResourcesWeekView/get-resources-week-view-events/get-resources-week-view-events.mjs.map +1 -1
- package/esm/components/Schedule/Schedule.mjs +4 -1
- package/esm/components/Schedule/Schedule.mjs.map +1 -1
- package/esm/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs +53 -0
- package/esm/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs.map +1 -0
- package/esm/components/ScheduleEvent/ScheduleEvent.mjs.map +1 -1
- package/esm/components/ScheduleEvent/ScheduleEvent.module.mjs.map +1 -1
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs +15 -14
- package/esm/components/ScheduleHeader/HeaderControl/HeaderControl.mjs.map +1 -1
- package/esm/components/ScheduleHeader/MonthYearSelect/MonthYearSelect.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeader.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ScheduleHeaderBase.mjs.map +1 -1
- package/esm/components/ScheduleHeader/ViewSelect/ViewSelect.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.mjs +169 -85
- package/esm/components/WeekView/WeekView.mjs.map +1 -1
- package/esm/components/WeekView/WeekView.module.mjs +1 -0
- package/esm/components/WeekView/WeekView.module.mjs.map +1 -1
- package/esm/components/WeekView/WeekViewDay.mjs.map +1 -1
- package/esm/components/WeekView/get-week-view-events/get-week-positioned-events.mjs +4 -2
- package/esm/components/WeekView/get-week-view-events/get-week-positioned-events.mjs.map +1 -1
- package/esm/components/YearView/YearView.mjs +7 -6
- package/esm/components/YearView/YearView.mjs.map +1 -1
- package/esm/components/YearView/YearViewMonth.mjs.map +1 -1
- package/esm/hooks/use-drag-drop-handlers.mjs +13 -2
- package/esm/hooks/use-drag-drop-handlers.mjs.map +1 -1
- package/esm/hooks/use-event-resize.mjs +30 -15
- package/esm/hooks/use-event-resize.mjs.map +1 -1
- package/esm/hooks/use-horizontal-event-resize.mjs +30 -15
- package/esm/hooks/use-horizontal-event-resize.mjs.map +1 -1
- package/esm/index.mjs +4 -1
- package/esm/utils/apply-cascade-layout/apply-cascade-layout.mjs +21 -0
- package/esm/utils/apply-cascade-layout/apply-cascade-layout.mjs.map +1 -0
- package/esm/utils/calculate-drop-time/calculate-drop-time.mjs +25 -4
- package/esm/utils/calculate-drop-time/calculate-drop-time.mjs.map +1 -1
- package/esm/utils/get-month-days/get-month-days.mjs +4 -2
- package/esm/utils/get-month-days/get-month-days.mjs.map +1 -1
- package/esm/{components/ResourcesDayView → utils}/get-overlap-clusters/get-overlap-clusters.mjs +2 -2
- package/esm/utils/get-overlap-clusters/get-overlap-clusters.mjs.map +1 -0
- package/esm/utils/get-week-number/get-week-number.mjs +4 -1
- package/esm/utils/get-week-number/get-week-number.mjs.map +1 -1
- package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs +2 -1
- package/esm/utils/is-event-in-time-range/is-event-in-time-range.mjs.map +1 -1
- package/lib/components/DayView/DayView.d.ts +12 -2
- package/lib/components/DayView/get-day-view-events/get-day-positioned-events.d.ts +4 -2
- package/lib/components/DayView/get-day-view-events/get-day-view-events.d.ts +3 -2
- package/lib/components/MonthView/MonthView.d.ts +2 -0
- package/lib/components/ResourcesDayView/ResourcesDayView.d.ts +7 -1
- package/lib/components/ResourcesDayView/ResourcesDayViewColumn.d.ts +1 -1
- package/lib/components/ResourcesSchedule/ResourcesSchedule.d.ts +3 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekView.d.ts +7 -1
- package/lib/components/ResourcesWeekView/ResourcesWeekViewRow.d.ts +1 -1
- package/lib/components/Schedule/Schedule.d.ts +3 -1
- package/lib/components/ScheduleBackgroundEvent/ScheduleBackgroundEvent.d.ts +19 -0
- package/lib/components/ScheduleBackgroundEvent/index.d.ts +2 -0
- package/lib/components/ScheduleHeader/HeaderControl/HeaderControl.d.ts +3 -3
- package/lib/components/ScheduleHeader/ScheduleHeaderBase.d.ts +1 -1
- package/lib/components/WeekView/WeekView.d.ts +12 -2
- package/lib/components/WeekView/WeekViewDay.d.ts +1 -1
- package/lib/components/WeekView/get-week-view-events/get-week-positioned-events.d.ts +4 -2
- package/lib/components/YearView/YearViewMonth.d.ts +1 -1
- package/lib/hooks/use-drag-drop-handlers.d.ts +10 -1
- package/lib/hooks/use-event-resize.d.ts +2 -1
- package/lib/hooks/use-horizontal-event-resize.d.ts +2 -1
- package/lib/index.d.mts +1 -0
- package/lib/index.d.ts +1 -0
- package/lib/types.d.ts +3 -1
- package/lib/utils/apply-cascade-layout/apply-cascade-layout.d.ts +6 -0
- package/lib/utils/calculate-drop-time/calculate-drop-time.d.ts +11 -1
- package/lib/utils/get-overlap-clusters/get-overlap-clusters.d.ts +2 -0
- package/lib/utils/index.d.ts +3 -0
- package/package.json +8 -5
- package/styles.css +221 -0
- package/styles.layer.css +221 -0
- package/cjs/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.cjs.map +0 -1
- package/esm/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.mjs.map +0 -1
- package/lib/components/ResourcesDayView/get-overlap-clusters/get-overlap-clusters.d.ts +0 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-events-overlap.cjs","names":[],"sources":["../../../src/utils/is-events-overlap/is-events-overlap.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\ninterface CachedTimestamps {\n start: ScheduleEventData['start'];\n end: ScheduleEventData['end'];\n startTimestamp: number;\n endTimestamp: number;\n}\n\nconst timestampsCache = new WeakMap<ScheduleEventData, CachedTimestamps>();\n\nfunction getTimestamps(event: ScheduleEventData): CachedTimestamps {\n const cached = timestampsCache.get(event);\n\n if (cached && cached.start === event.start && cached.end === event.end) {\n return cached;\n }\n\n const timestamps: CachedTimestamps = {\n start: event.start,\n end: event.end,\n startTimestamp: dayjs(event.start).valueOf(),\n endTimestamp: dayjs(event.end).valueOf(),\n };\n\n timestampsCache.set(event, timestamps);\n\n return timestamps;\n}\n\n/** Returns true if two events overlap in time */\nexport function isEventsOverlap(event1: ScheduleEventData, event2: ScheduleEventData) {\n const first = getTimestamps(event1);\n const second = getTimestamps(event2);\n return first.startTimestamp < second.endTimestamp && second.startTimestamp < first.endTimestamp;\n}\n"],"mappings":";;;;;AAUA,MAAM,kCAAkB,IAAI,QAA6C;AAEzE,SAAS,cAAc,OAA4C;CACjE,MAAM,SAAS,gBAAgB,IAAI,KAAK;CAExC,IAAI,UAAU,OAAO,UAAU,MAAM,SAAS,OAAO,QAAQ,MAAM,KACjE,OAAO;CAGT,MAAM,aAA+B;EACnC,OAAO,MAAM;EACb,KAAK,MAAM;EACX,iBAAA,
|
|
1
|
+
{"version":3,"file":"is-events-overlap.cjs","names":[],"sources":["../../../src/utils/is-events-overlap/is-events-overlap.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\ninterface CachedTimestamps {\n start: ScheduleEventData['start'];\n end: ScheduleEventData['end'];\n startTimestamp: number;\n endTimestamp: number;\n}\n\nconst timestampsCache = new WeakMap<ScheduleEventData, CachedTimestamps>();\n\nfunction getTimestamps(event: ScheduleEventData): CachedTimestamps {\n const cached = timestampsCache.get(event);\n\n if (cached && cached.start === event.start && cached.end === event.end) {\n return cached;\n }\n\n const timestamps: CachedTimestamps = {\n start: event.start,\n end: event.end,\n startTimestamp: dayjs(event.start).valueOf(),\n endTimestamp: dayjs(event.end).valueOf(),\n };\n\n timestampsCache.set(event, timestamps);\n\n return timestamps;\n}\n\n/** Returns true if two events overlap in time */\nexport function isEventsOverlap(event1: ScheduleEventData, event2: ScheduleEventData) {\n const first = getTimestamps(event1);\n const second = getTimestamps(event2);\n return first.startTimestamp < second.endTimestamp && second.startTimestamp < first.endTimestamp;\n}\n"],"mappings":";;;;;AAUA,MAAM,kCAAkB,IAAI,QAA6C;AAEzE,SAAS,cAAc,OAA4C;CACjE,MAAM,SAAS,gBAAgB,IAAI,KAAK;CAExC,IAAI,UAAU,OAAO,UAAU,MAAM,SAAS,OAAO,QAAQ,MAAM,KACjE,OAAO;CAGT,MAAM,aAA+B;EACnC,OAAO,MAAM;EACb,KAAK,MAAM;EACX,iBAAA,GAAgB,MAAA,QAAA,CAAM,MAAM,KAAK,CAAC,CAAC,QAAQ;EAC3C,eAAA,GAAc,MAAA,QAAA,CAAM,MAAM,GAAG,CAAC,CAAC,QAAQ;CACzC;CAEA,gBAAgB,IAAI,OAAO,UAAU;CAErC,OAAO;AACT;;AAGA,SAAgB,gBAAgB,QAA2B,QAA2B;CACpF,MAAM,QAAQ,cAAc,MAAM;CAClC,MAAM,SAAS,cAAc,MAAM;CACnC,OAAO,MAAM,iBAAiB,OAAO,gBAAgB,OAAO,iBAAiB,MAAM;AACrF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-in-time-range.cjs","names":["parseTimeString"],"sources":["../../../src/utils/is-in-time-range/is-in-time-range.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue } from '../../types';\nimport { parseTimeString } from '../parse-time-string/parse-time-string';\n\ninterface IsInTimeRangeInput {\n date: AnyDateValue;\n startTime?: string;\n endTime?: string;\n}\n\n/** Returns true if the given date's time is within the specified time range */\nexport function isInTimeRange({\n date,\n startTime = '00:00:00',\n endTime = '23:59:59',\n}: IsInTimeRangeInput) {\n const targetDate = dayjs(date);\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n\n const startDateTime = targetDate\n .hour(parsedStartTime.hours)\n .minute(parsedStartTime.minutes)\n .second(parsedStartTime.seconds);\n\n const endDateTime = targetDate\n .hour(parsedEndTime.hours)\n .minute(parsedEndTime.minutes)\n .second(parsedEndTime.seconds);\n\n return targetDate.isAfter(startDateTime) && targetDate.isBefore(endDateTime);\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,cAAc,EAC5B,MACA,YAAY,YACZ,UAAU,cACW;CACrB,MAAM,cAAA,
|
|
1
|
+
{"version":3,"file":"is-in-time-range.cjs","names":["parseTimeString"],"sources":["../../../src/utils/is-in-time-range/is-in-time-range.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue } from '../../types';\nimport { parseTimeString } from '../parse-time-string/parse-time-string';\n\ninterface IsInTimeRangeInput {\n date: AnyDateValue;\n startTime?: string;\n endTime?: string;\n}\n\n/** Returns true if the given date's time is within the specified time range */\nexport function isInTimeRange({\n date,\n startTime = '00:00:00',\n endTime = '23:59:59',\n}: IsInTimeRangeInput) {\n const targetDate = dayjs(date);\n const parsedStartTime = parseTimeString(startTime);\n const parsedEndTime = parseTimeString(endTime);\n\n const startDateTime = targetDate\n .hour(parsedStartTime.hours)\n .minute(parsedStartTime.minutes)\n .second(parsedStartTime.seconds);\n\n const endDateTime = targetDate\n .hour(parsedEndTime.hours)\n .minute(parsedEndTime.minutes)\n .second(parsedEndTime.seconds);\n\n return targetDate.isAfter(startDateTime) && targetDate.isBefore(endDateTime);\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,cAAc,EAC5B,MACA,YAAY,YACZ,UAAU,cACW;CACrB,MAAM,cAAA,GAAa,MAAA,QAAA,CAAM,IAAI;CAC7B,MAAM,kBAAkBA,0BAAAA,gBAAgB,SAAS;CACjD,MAAM,gBAAgBA,0BAAAA,gBAAgB,OAAO;CAE7C,MAAM,gBAAgB,WACnB,KAAK,gBAAgB,KAAK,CAAC,CAC3B,OAAO,gBAAgB,OAAO,CAAC,CAC/B,OAAO,gBAAgB,OAAO;CAEjC,MAAM,cAAc,WACjB,KAAK,cAAc,KAAK,CAAC,CACzB,OAAO,cAAc,OAAO,CAAC,CAC7B,OAAO,cAAc,OAAO;CAE/B,OAAO,WAAW,QAAQ,aAAa,KAAK,WAAW,SAAS,WAAW;AAC7E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-multiday-event.cjs","names":[],"sources":["../../../src/utils/is-multiday-event/is-multiday-event.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\nexport function isMultidayEvent(event: ScheduleEventData) {\n const startDate = dayjs(event.start).startOf('day');\n const rawEnd = dayjs(event.end);\n const endAtMidnight = rawEnd.hour() === 0 && rawEnd.minute() === 0 && rawEnd.second() === 0;\n const endDate = endAtMidnight ? rawEnd.startOf('day').subtract(1, 'day') : rawEnd.startOf('day');\n return endDate.isAfter(startDate);\n}\n"],"mappings":";;;;;AAGA,SAAgB,gBAAgB,OAA0B;CACxD,MAAM,aAAA,
|
|
1
|
+
{"version":3,"file":"is-multiday-event.cjs","names":[],"sources":["../../../src/utils/is-multiday-event/is-multiday-event.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\nexport function isMultidayEvent(event: ScheduleEventData) {\n const startDate = dayjs(event.start).startOf('day');\n const rawEnd = dayjs(event.end);\n const endAtMidnight = rawEnd.hour() === 0 && rawEnd.minute() === 0 && rawEnd.second() === 0;\n const endDate = endAtMidnight ? rawEnd.startOf('day').subtract(1, 'day') : rawEnd.startOf('day');\n return endDate.isAfter(startDate);\n}\n"],"mappings":";;;;;AAGA,SAAgB,gBAAgB,OAA0B;CACxD,MAAM,aAAA,GAAY,MAAA,QAAA,CAAM,MAAM,KAAK,CAAC,CAAC,QAAQ,KAAK;CAClD,MAAM,UAAA,GAAS,MAAA,QAAA,CAAM,MAAM,GAAG;CAG9B,QAFsB,OAAO,KAAK,MAAM,KAAK,OAAO,OAAO,MAAM,KAAK,OAAO,OAAO,MAAM,IAC1D,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,GAAG,KAAK,IAAI,OAAO,QAAQ,KAAK,EAAA,CAChF,QAAQ,SAAS;AAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-same-month.cjs","names":[],"sources":["../../../src/utils/is-same-month/is-same-month.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue } from '../../types';\n\nexport function isSameMonth(date: AnyDateValue, comparison: AnyDateValue) {\n return dayjs(date).format('YYYY-MM') === dayjs(comparison).format('YYYY-MM');\n}\n"],"mappings":";;;;;AAGA,SAAgB,YAAY,MAAoB,YAA0B;CACxE,QAAA,
|
|
1
|
+
{"version":3,"file":"is-same-month.cjs","names":[],"sources":["../../../src/utils/is-same-month/is-same-month.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue } from '../../types';\n\nexport function isSameMonth(date: AnyDateValue, comparison: AnyDateValue) {\n return dayjs(date).format('YYYY-MM') === dayjs(comparison).format('YYYY-MM');\n}\n"],"mappings":";;;;;AAGA,SAAgB,YAAY,MAAoB,YAA0B;CACxE,QAAA,GAAO,MAAA,QAAA,CAAM,IAAI,CAAC,CAAC,OAAO,SAAS,OAAA,GAAM,MAAA,QAAA,CAAM,UAAU,CAAC,CAAC,OAAO,SAAS;AAC7E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-within-week.cjs","names":["getStartOfWeek"],"sources":["../../../src/utils/is-within-week/is-within-week.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DayOfWeek, ScheduleEventData } from '../../types';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\n\ninterface IsWithinWeekInput {\n event: ScheduleEventData;\n targetWeek: AnyDateValue;\n firstDayOfWeek: DayOfWeek;\n}\n\nexport function isWithinWeek({ event, targetWeek, firstDayOfWeek }: IsWithinWeekInput) {\n const startOfWeek = dayjs(getStartOfWeek({ date: targetWeek, firstDayOfWeek }));\n const endOfWeek = startOfWeek.add(7, 'day');\n return dayjs(event.start).isBefore(endOfWeek) && dayjs(event.end).isAfter(startOfWeek);\n}\n"],"mappings":";;;;;;AAUA,SAAgB,aAAa,EAAE,OAAO,YAAY,kBAAqC;CACrF,MAAM,eAAA,
|
|
1
|
+
{"version":3,"file":"is-within-week.cjs","names":["getStartOfWeek"],"sources":["../../../src/utils/is-within-week/is-within-week.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DayOfWeek, ScheduleEventData } from '../../types';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\n\ninterface IsWithinWeekInput {\n event: ScheduleEventData;\n targetWeek: AnyDateValue;\n firstDayOfWeek: DayOfWeek;\n}\n\nexport function isWithinWeek({ event, targetWeek, firstDayOfWeek }: IsWithinWeekInput) {\n const startOfWeek = dayjs(getStartOfWeek({ date: targetWeek, firstDayOfWeek }));\n const endOfWeek = startOfWeek.add(7, 'day');\n return dayjs(event.start).isBefore(endOfWeek) && dayjs(event.end).isAfter(startOfWeek);\n}\n"],"mappings":";;;;;;AAUA,SAAgB,aAAa,EAAE,OAAO,YAAY,kBAAqC;CACrF,MAAM,eAAA,GAAc,MAAA,QAAA,CAAMA,0BAAAA,eAAe;EAAE,MAAM;EAAY;CAAe,CAAC,CAAC;CAC9E,MAAM,YAAY,YAAY,IAAI,GAAG,KAAK;CAC1C,QAAA,GAAO,MAAA,QAAA,CAAM,MAAM,KAAK,CAAC,CAAC,SAAS,SAAS,MAAA,GAAK,MAAA,QAAA,CAAM,MAAM,GAAG,CAAC,CAAC,QAAQ,WAAW;AACvF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"next-week.cjs","names":["getStartOfWeek","toDateString"],"sources":["../../../src/utils/next-week/next-week.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\nimport { toDateString } from '../to-date-string/to-date-string';\n\nexport function nextWeek(date: AnyDateValue, firstDayOfWeek: DayOfWeek): DateStringValue {\n const start = getStartOfWeek({ date, firstDayOfWeek });\n return toDateString(dayjs(start).set('date', dayjs(start).date() + 7));\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,SAAS,MAAoB,gBAA4C;CACvF,MAAM,QAAQA,0BAAAA,eAAe;EAAE;EAAM;CAAe,CAAC;CACrD,OAAOC,uBAAAA,cAAAA,
|
|
1
|
+
{"version":3,"file":"next-week.cjs","names":["getStartOfWeek","toDateString"],"sources":["../../../src/utils/next-week/next-week.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\nimport { toDateString } from '../to-date-string/to-date-string';\n\nexport function nextWeek(date: AnyDateValue, firstDayOfWeek: DayOfWeek): DateStringValue {\n const start = getStartOfWeek({ date, firstDayOfWeek });\n return toDateString(dayjs(start).set('date', dayjs(start).date() + 7));\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,SAAS,MAAoB,gBAA4C;CACvF,MAAM,QAAQA,0BAAAA,eAAe;EAAE;EAAM;CAAe,CAAC;CACrD,OAAOC,uBAAAA,cAAAA,GAAa,MAAA,QAAA,CAAM,KAAK,CAAC,CAAC,IAAI,SAAA,GAAQ,MAAA,QAAA,CAAM,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AACvE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"previous-week.cjs","names":["getStartOfWeek","toDateString"],"sources":["../../../src/utils/previous-week/previous-week.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\nimport { toDateString } from '../to-date-string/to-date-string';\n\nexport function previousWeek(date: AnyDateValue, firstDayOfWeek: DayOfWeek): DateStringValue {\n const start = getStartOfWeek({ date, firstDayOfWeek });\n return toDateString(dayjs(start).set('date', dayjs(start).date() - 7));\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,aAAa,MAAoB,gBAA4C;CAC3F,MAAM,QAAQA,0BAAAA,eAAe;EAAE;EAAM;CAAe,CAAC;CACrD,OAAOC,uBAAAA,cAAAA,
|
|
1
|
+
{"version":3,"file":"previous-week.cjs","names":["getStartOfWeek","toDateString"],"sources":["../../../src/utils/previous-week/previous-week.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { AnyDateValue, DateStringValue, DayOfWeek } from '../../types';\nimport { getStartOfWeek } from '../get-start-of-week/get-start-of-week';\nimport { toDateString } from '../to-date-string/to-date-string';\n\nexport function previousWeek(date: AnyDateValue, firstDayOfWeek: DayOfWeek): DateStringValue {\n const start = getStartOfWeek({ date, firstDayOfWeek });\n return toDateString(dayjs(start).set('date', dayjs(start).date() - 7));\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,aAAa,MAAoB,gBAA4C;CAC3F,MAAM,QAAQA,0BAAAA,eAAe;EAAE;EAAM;CAAe,CAAC;CACrD,OAAOC,uBAAAA,cAAAA,GAAa,MAAA,QAAA,CAAM,KAAK,CAAC,CAAC,IAAI,SAAA,GAAQ,MAAA,QAAA,CAAM,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AACvE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort-events.cjs","names":[],"sources":["../../../src/utils/sort-events/sort-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\n/** Sorts events by start time, then by duration (longer first) */\nexport function sortEvents<T extends ScheduleEventData>(events: T[]): T[] {\n return events.toSorted((a, b) => {\n const startDiff = dayjs(a.start).diff(dayjs(b.start));\n\n if (startDiff !== 0) {\n return startDiff;\n }\n\n return dayjs(b.end).diff(dayjs(b.start)) - dayjs(a.end).diff(dayjs(a.start));\n });\n}\n"],"mappings":";;;;;;AAIA,SAAgB,WAAwC,QAAkB;CACxE,OAAO,OAAO,UAAU,GAAG,MAAM;EAC/B,MAAM,aAAA,
|
|
1
|
+
{"version":3,"file":"sort-events.cjs","names":[],"sources":["../../../src/utils/sort-events/sort-events.ts"],"sourcesContent":["import dayjs from 'dayjs';\nimport { ScheduleEventData } from '../../types';\n\n/** Sorts events by start time, then by duration (longer first) */\nexport function sortEvents<T extends ScheduleEventData>(events: T[]): T[] {\n return events.toSorted((a, b) => {\n const startDiff = dayjs(a.start).diff(dayjs(b.start));\n\n if (startDiff !== 0) {\n return startDiff;\n }\n\n return dayjs(b.end).diff(dayjs(b.start)) - dayjs(a.end).diff(dayjs(a.start));\n });\n}\n"],"mappings":";;;;;;AAIA,SAAgB,WAAwC,QAAkB;CACxE,OAAO,OAAO,UAAU,GAAG,MAAM;EAC/B,MAAM,aAAA,GAAY,MAAA,QAAA,CAAM,EAAE,KAAK,CAAC,CAAC,MAAA,GAAK,MAAA,QAAA,CAAM,EAAE,KAAK,CAAC;EAEpD,IAAI,cAAc,GAChB,OAAO;EAGT,QAAA,GAAO,MAAA,QAAA,CAAM,EAAE,GAAG,CAAC,CAAC,MAAA,GAAK,MAAA,QAAA,CAAM,EAAE,KAAK,CAAC,KAAA,GAAI,MAAA,QAAA,CAAM,EAAE,GAAG,CAAC,CAAC,MAAA,GAAK,MAAA,QAAA,CAAM,EAAE,KAAK,CAAC;CAC7E,CAAC;AACH"}
|
|
@@ -1 +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,
|
|
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,GAAO,MAAA,QAAA,CAAM,IAAI,CAAC,CAAC,OAAO,qBAAqB;AACjD"}
|
|
@@ -1 +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,
|
|
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,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"}
|
|
@@ -39,15 +39,16 @@ const AgendaView = factory((_props) => {
|
|
|
39
39
|
varsResolver,
|
|
40
40
|
rootSelector: "agendaView"
|
|
41
41
|
});
|
|
42
|
+
const expandedEvents = expandRecurringEvents({
|
|
43
|
+
events,
|
|
44
|
+
rangeStart: dayjs(rangeStart).startOf("day").toDate(),
|
|
45
|
+
rangeEnd: dayjs(rangeEnd).endOf("day").toDate(),
|
|
46
|
+
expansionLimit: recurrenceExpansionLimit
|
|
47
|
+
});
|
|
42
48
|
const groupedEvents = getAgendaViewEvents({
|
|
43
49
|
rangeStart,
|
|
44
50
|
rangeEnd,
|
|
45
|
-
events:
|
|
46
|
-
events,
|
|
47
|
-
rangeStart: dayjs(rangeStart).startOf("day").toDate(),
|
|
48
|
-
rangeEnd: dayjs(rangeEnd).endOf("day").toDate(),
|
|
49
|
-
expansionLimit: recurrenceExpansionLimit
|
|
50
|
-
})
|
|
51
|
+
events: expandedEvents
|
|
51
52
|
});
|
|
52
53
|
const sortedDates = Object.keys(groupedEvents).sort();
|
|
53
54
|
const headerLabel = `${formatDate({
|
|
@@ -1 +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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"}
|
|
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":";;;;;;;;;;;;;;;AAmGA,MAAM,eAAe;CACnB,kBAAkB;CAClB,MAAM;CACN,kBAAkB;CAClB,cAAc;AAChB;AAEA,MAAM,eAAe,oBAAuC,QAAQ,EAAE,cAAc,EAClF,YAAY,EACV,wBAAwB,UAAU,MAAM,EAC1C,EACF,EAAE;AAEF,MAAa,aAAa,SAA4B,WAAW;CAC/D,MAAM,QAAQ,SAAS,cAAc,cAAc,MAAM;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,YACA,kBACA,YACA,UACA,QACA,QACA,QACA,QACA,MACA,aACA,kBACA,cACA,cACA,0BACA,GAAG,WACD;CAEJ,MAAM,MAAM,gBAAgB;CAC5B,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,YAAY,UAA6B;EAC7C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,iBAAiB,sBAAsB;EAC3C;EACA,YAAY,MAAM,UAAU,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,OAAO;EACpD,UAAU,MAAM,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO;EAC9C,gBAAgB;CAClB,CAAC;CAED,MAAM,gBAAgB,oBAAoB;EACxC;EACA;EACA,QAAQ;CACV,CAAC;CAED,MAAM,cAAc,OAAO,KAAK,aAAa,CAAC,CAAC,KAAK;CAEpD,MAAM,cAAc,GAAG,WAAW;EAChC,QAAQ,IAAI,UAAU,MAAM;EAC5B,MAAM;EACN,QAAQ;CACV,CAAC,EAAE,KAAK,WAAW;EACjB,QAAQ,IAAI,UAAU,MAAM;EAC5B,MAAM;EACN,QAAQ;CACV,CAAC;CAED,MAAM,aAAa,YAAY,KAAK,YAAY;EAG9C,MAAM,aAFa,WAAW,cAAc,QAEhB,CAAC,CAAC,KAAK,UAAU;GAC3C,MAAM,YAAY,MAAM,MAAM,KAAK,CAAC,CAAC,OAAO,OAAO;GACnD,MAAM,UAAU,MAAM,MAAM,GAAG,CAAC,CAAC,OAAO,OAAO;GAC/C,MAAM,WAAW,gBAAgB,KAAK,KAAK,cAAc;IAAE;IAAO,MAAM;GAAQ,CAAC;GAEjF,MAAM,gBACJ,qBAAC,KAAD;IAAK,GAAI,UAAU,qBAAqB;IAAxC,UAAA,CACE,oBAAC,OAAD,EACE,GAAI,UAAU,wBAAwB,EACpC,OAAO,EAAE,iBAAiB,cAAc,MAAM,OAAO,KAAK,EAAE,EAC9D,CAAC,EACF,CAAA,GACD,qBAAC,OAAD,EAAA,UAAA,CACE,oBAAC,MAAD;KAAM,GAAI,UAAU,sBAAsB;KAAI,UAAA,MAAM;IAAY,CAAA,GAChE,oBAAC,MAAD;KAAM,GAAI,UAAU,qBAAqB;KACtC,UAAA,WAAW,SAAS,UAAU,MAAM,IAAI,GAAG,UAAU,KAAK;IACvD,CAAA,CACH,EAAA,CAAA,CACF;;GAGP,MAAM,YAAsF;IAC1F,GAAG,UAAU,iBAAiB;IAC9B,SACE,SAAS,WACL,KAAA,KACC,MAA2C;KAC1C,eAAe,OAAO,CAAC;IACzB;IACN,UAAU,SAAS,WAAW,KAAK;IACnC,UAAU;GACZ;GAEA,IAAI,OAAO,gBAAgB,YACzB,OAAO,oBAAC,MAAM,UAAP,EAAA,UAAgC,YAAY,OAAO,SAAS,EAAkB,GAAzD,MAAM,EAAmD;GAGvF,OAAO,8BAAC,gBAAD;IAAgB,GAAI;IAAW,KAAK,MAAM;GAAK,CAAA;EACxD,CAAC;EAED,OACE,8BAAC,OAAD;GAAK,GAAI,UAAU,qBAAqB;GAAG,KAAK;EAS3C,GARH,oBAAC,MAAD;GAAM,GAAI,UAAU,sBAAsB;GACvC,UAAA,WAAW;IACV,QAAQ,IAAI,UAAU,MAAM;IAC5B,MAAM;IACN,QAAQ;GACV,CAAC;EACG,CAAA,GACL,UACE;CAET,CAAC;CAED,OACE,qBAAC,KAAD;EAAK,GAAI,UAAU,YAAY;EAAG,GAAI;EAAtC,UAAA,CACE,oBAAC,OAAD;GAAK,GAAI,UAAU,kBAAkB;GACnC,UAAA,oBAAC,MAAD;IAAM,GAAI,UAAU,uBAAuB;IAAI,UAAA;GAAkB,CAAA;EAC9D,CAAA,GAEL,oBAAC,KAAD;GAAK,GAAI,UAAU,gBAAgB;GAChC,UAAA,WAAW,SAAS,IACnB,aAEA,oBAAC,MAAD;IAAM,GAAI,UAAU,oBAAoB;IAAI,UAAA,SAAS,YAAY,MAAM;GAAQ,CAAA;EAE9E,CAAA,CACF;;AAET,CAAC;AAED,WAAW,cAAc;AACzB,WAAW,UAAUA;AACrB,WAAW,eAAe"}
|
|
@@ -5,7 +5,7 @@ import { isInTimeRange } from "../../utils/is-in-time-range/is-in-time-range.mjs
|
|
|
5
5
|
import CurrentTimeIndicator_module_default from "./CurrentTimeIndicator.module.mjs";
|
|
6
6
|
import dayjs from "dayjs";
|
|
7
7
|
import { Box, createVarsResolver, factory, getThemeColor, useProps, useStyles } from "@mantine/core";
|
|
8
|
-
import { useInterval } from "@mantine/hooks";
|
|
8
|
+
import { useInterval, useMounted } from "@mantine/hooks";
|
|
9
9
|
import { useState } from "react";
|
|
10
10
|
import { useDatesContext } from "@mantine/dates";
|
|
11
11
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -36,8 +36,9 @@ const CurrentTimeIndicator = factory((_props) => {
|
|
|
36
36
|
rootSelector: "currentTimeIndicator"
|
|
37
37
|
});
|
|
38
38
|
const ctx = useDatesContext();
|
|
39
|
+
const mounted = useMounted();
|
|
39
40
|
const [, setTick] = useState(0);
|
|
40
|
-
useInterval(() => setTick((tick) => tick + 1),
|
|
41
|
+
useInterval(() => setTick((tick) => tick + 1), 6e4, { autoInvoke: true });
|
|
41
42
|
const now = getCurrentTime ? dayjs(getCurrentTime()) : dayjs();
|
|
42
43
|
const offsetPercent = getCurrentTimePosition({
|
|
43
44
|
startTime,
|
|
@@ -50,7 +51,7 @@ const CurrentTimeIndicator = factory((_props) => {
|
|
|
50
51
|
date: now,
|
|
51
52
|
format: currentTimeFormat
|
|
52
53
|
}) : "";
|
|
53
|
-
if (!isInTimeRange({
|
|
54
|
+
if (!mounted || !isInTimeRange({
|
|
54
55
|
date: now,
|
|
55
56
|
startTime,
|
|
56
57
|
endTime
|
|
@@ -1 +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,
|
|
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, 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"}
|
|
@@ -6,6 +6,7 @@ import { getDayTimeIntervals } from "../../utils/get-day-time-intervals/get-day-
|
|
|
6
6
|
import { toDateString } from "../../utils/to-date-string/to-date-string.mjs";
|
|
7
7
|
import { isAllDayEvent } from "../../utils/is-all-day-event/is-all-day-event.mjs";
|
|
8
8
|
import { getVisibleEvents } from "../../utils/get-visible-events/get-visible-events.mjs";
|
|
9
|
+
import { getDayPosition } from "../../utils/get-day-position/get-day-position.mjs";
|
|
9
10
|
import { getTimeAxisEventStyle } from "../../utils/get-time-axis-event-style/get-time-axis-event-style.mjs";
|
|
10
11
|
import { calculateDropTime } from "../../utils/calculate-drop-time/calculate-drop-time.mjs";
|
|
11
12
|
import { getBusinessHoursMod } from "../../utils/get-business-hours-mod/get-business-hours-mod.mjs";
|
|
@@ -19,11 +20,12 @@ import { CurrentTimeIndicator } from "../CurrentTimeIndicator/CurrentTimeIndicat
|
|
|
19
20
|
import { DragContext } from "../DragContext/DragContext.mjs";
|
|
20
21
|
import { ScheduleEvent } from "../ScheduleEvent/ScheduleEvent.mjs";
|
|
21
22
|
import { MoreEvents } from "../MoreEvents/MoreEvents.mjs";
|
|
23
|
+
import { ScheduleBackgroundEvent } from "../ScheduleBackgroundEvent/ScheduleBackgroundEvent.mjs";
|
|
22
24
|
import { ScheduleHeaderBase } from "../ScheduleHeader/ScheduleHeaderBase.mjs";
|
|
23
25
|
import { getDayViewEvents } from "./get-day-view-events/get-day-view-events.mjs";
|
|
24
26
|
import DayView_module_default from "./DayView.module.mjs";
|
|
25
27
|
import dayjs from "dayjs";
|
|
26
|
-
import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, rem,
|
|
28
|
+
import { Box, ScrollArea, UnstyledButton, createVarsResolver, factory, getRadius, rem, useProps, useResolvedStylesApi, useStyles } from "@mantine/core";
|
|
27
29
|
import { useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
|
|
28
30
|
import { createElement, useCallback, useRef, useState } from "react";
|
|
29
31
|
import { useDatesContext } from "@mantine/dates";
|
|
@@ -45,7 +47,10 @@ const defaultProps = {
|
|
|
45
47
|
withEventsDragAndDrop: false,
|
|
46
48
|
withDragSlotSelect: false,
|
|
47
49
|
withEventResize: false,
|
|
48
|
-
mode: "default"
|
|
50
|
+
mode: "default",
|
|
51
|
+
withInteractiveBackgroundEvents: false,
|
|
52
|
+
eventOverlapMode: "columns",
|
|
53
|
+
eventOverlapRaiseDelay: 600
|
|
49
54
|
};
|
|
50
55
|
const varsResolver = createVarsResolver((_theme, { radius, slotHeight, allDaySlotHeight }) => ({ dayView: {
|
|
51
56
|
"--day-view-radius": radius !== void 0 ? getRadius(radius) : void 0,
|
|
@@ -54,7 +59,7 @@ const varsResolver = createVarsResolver((_theme, { radius, slotHeight, allDaySlo
|
|
|
54
59
|
} }));
|
|
55
60
|
const DayView = factory((_props) => {
|
|
56
61
|
const props = useProps("DayView", defaultProps, _props);
|
|
57
|
-
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;
|
|
62
|
+
const { classNames, className, style, styles, unstyled, attributes, vars, __staticSelector, startTime, endTime, intervalMinutes, withSubHourGridLines, eventOverlapMode, eventOverlapRaiseDelay, 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;
|
|
58
63
|
const [agendaOpen, setAgendaOpen] = useState(false);
|
|
59
64
|
const getStyles = useStyles({
|
|
60
65
|
name: __staticSelector,
|
|
@@ -82,7 +87,6 @@ const DayView = factory((_props) => {
|
|
|
82
87
|
__staticSelector,
|
|
83
88
|
radius
|
|
84
89
|
};
|
|
85
|
-
const theme = useMantineTheme();
|
|
86
90
|
const ctx = useDatesContext();
|
|
87
91
|
const resolveNow = () => getCurrentTime ? dayjs(getCurrentTime()) : dayjs();
|
|
88
92
|
const showCurrentTimeIndicator = withCurrentTimeIndicator ?? dayjs(date).isSame(resolveNow(), "day");
|
|
@@ -112,20 +116,43 @@ const DayView = factory((_props) => {
|
|
|
112
116
|
top: slotRect.top - viewportRect.top
|
|
113
117
|
});
|
|
114
118
|
}, []);
|
|
119
|
+
const dragOffsetRef = useRef({
|
|
120
|
+
offset: 0,
|
|
121
|
+
size: 0
|
|
122
|
+
});
|
|
115
123
|
const getSlotIndexFromDragPoint = useCallback((event) => {
|
|
116
124
|
const slotIndex = slotsRef.current.findIndex((slotNode) => {
|
|
117
125
|
if (!slotNode) return false;
|
|
118
126
|
const rect = slotNode.getBoundingClientRect();
|
|
119
127
|
return event.clientY >= rect.top && event.clientY <= rect.bottom;
|
|
120
128
|
});
|
|
121
|
-
if (slotIndex >= 0)
|
|
129
|
+
if (slotIndex >= 0) {
|
|
130
|
+
const rect = slotsRef.current[slotIndex].getBoundingClientRect();
|
|
131
|
+
dragOffsetRef.current = {
|
|
132
|
+
offset: event.clientY - rect.top,
|
|
133
|
+
size: rect.height
|
|
134
|
+
};
|
|
135
|
+
return slotIndex;
|
|
136
|
+
}
|
|
122
137
|
const firstSlot = slotsRef.current[0];
|
|
123
138
|
const lastSlot = slotsRef.current[slotsRef.current.length - 1];
|
|
124
139
|
if (!firstSlot || !lastSlot) return null;
|
|
125
140
|
const firstRect = firstSlot.getBoundingClientRect();
|
|
126
141
|
const lastRect = lastSlot.getBoundingClientRect();
|
|
127
|
-
if (event.clientY < firstRect.top)
|
|
128
|
-
|
|
142
|
+
if (event.clientY < firstRect.top) {
|
|
143
|
+
dragOffsetRef.current = {
|
|
144
|
+
offset: 0,
|
|
145
|
+
size: firstRect.height
|
|
146
|
+
};
|
|
147
|
+
return 0;
|
|
148
|
+
}
|
|
149
|
+
if (event.clientY > lastRect.bottom) {
|
|
150
|
+
dragOffsetRef.current = {
|
|
151
|
+
offset: lastRect.height,
|
|
152
|
+
size: lastRect.height
|
|
153
|
+
};
|
|
154
|
+
return slotsRef.current.length - 1;
|
|
155
|
+
}
|
|
129
156
|
return null;
|
|
130
157
|
}, []);
|
|
131
158
|
const handleSlotKeyDown = (event, slotIndex) => {
|
|
@@ -146,27 +173,67 @@ const DayView = factory((_props) => {
|
|
|
146
173
|
onSlotDragEnd(`${slotDate} ${slots[startIndex].startTime}`, `${slotDate} ${slots[endIndex].endTime}`);
|
|
147
174
|
}
|
|
148
175
|
});
|
|
176
|
+
const expandedEvents = expandRecurringEvents({
|
|
177
|
+
events,
|
|
178
|
+
rangeStart: dayjs(date).startOf("day").toDate(),
|
|
179
|
+
rangeEnd: dayjs(date).endOf("day").toDate(),
|
|
180
|
+
expansionLimit: recurrenceExpansionLimit
|
|
181
|
+
});
|
|
149
182
|
const eventsData = getDayViewEvents({
|
|
150
|
-
events:
|
|
151
|
-
events,
|
|
152
|
-
rangeStart: dayjs(date).startOf("day").toDate(),
|
|
153
|
-
rangeEnd: dayjs(date).endOf("day").toDate(),
|
|
154
|
-
expansionLimit: recurrenceExpansionLimit
|
|
155
|
-
}),
|
|
183
|
+
events: expandedEvents,
|
|
156
184
|
date,
|
|
157
185
|
startTime,
|
|
158
186
|
endTime,
|
|
159
|
-
intervalMinutes
|
|
187
|
+
intervalMinutes,
|
|
188
|
+
eventOverlapMode
|
|
160
189
|
});
|
|
161
190
|
const handleExternalDrop = useCallback((e, slotIndex) => {
|
|
162
191
|
if (!onExternalEventDrop) return;
|
|
163
192
|
const slotDate = dayjs(date).format("YYYY-MM-DD");
|
|
164
|
-
|
|
193
|
+
const slotTime = slots[slotIndex].startTime;
|
|
194
|
+
if (eventDragInterval == null) {
|
|
195
|
+
onExternalEventDrop(e.dataTransfer, `${slotDate} ${slotTime}`);
|
|
196
|
+
return;
|
|
197
|
+
}
|
|
198
|
+
const slotStart = `${slotDate} ${slotTime}`;
|
|
199
|
+
const { start } = calculateDropTime({
|
|
200
|
+
draggedEvent: {
|
|
201
|
+
start: slotStart,
|
|
202
|
+
end: slotStart
|
|
203
|
+
},
|
|
204
|
+
targetDate: date,
|
|
205
|
+
targetSlotTime: slotTime,
|
|
206
|
+
intervalMinutes,
|
|
207
|
+
dragIntervalMinutes: eventDragInterval,
|
|
208
|
+
slotOffset: dragOffsetRef.current.offset,
|
|
209
|
+
slotSize: dragOffsetRef.current.size,
|
|
210
|
+
startTime,
|
|
211
|
+
endTime
|
|
212
|
+
});
|
|
213
|
+
onExternalEventDrop(e.dataTransfer, dayjs(start).format("YYYY-MM-DD HH:mm:ss"));
|
|
165
214
|
}, [
|
|
166
215
|
onExternalEventDrop,
|
|
167
216
|
date,
|
|
168
|
-
slots
|
|
217
|
+
slots,
|
|
218
|
+
eventDragInterval,
|
|
219
|
+
intervalMinutes,
|
|
220
|
+
startTime,
|
|
221
|
+
endTime
|
|
169
222
|
]);
|
|
223
|
+
const getDropTimeForSlot = (slotIndex, draggedEvent) => {
|
|
224
|
+
const slotTime = slots[slotIndex].startTime;
|
|
225
|
+
return calculateDropTime({
|
|
226
|
+
draggedEvent,
|
|
227
|
+
targetDate: date,
|
|
228
|
+
targetSlotTime: slotTime,
|
|
229
|
+
intervalMinutes,
|
|
230
|
+
dragIntervalMinutes: eventDragInterval,
|
|
231
|
+
slotOffset: eventDragInterval == null ? void 0 : dragOffsetRef.current.offset,
|
|
232
|
+
slotSize: eventDragInterval == null ? void 0 : dragOffsetRef.current.size,
|
|
233
|
+
startTime,
|
|
234
|
+
endTime
|
|
235
|
+
});
|
|
236
|
+
};
|
|
170
237
|
const dragDrop = useDragDropHandlers({
|
|
171
238
|
enabled: withEventsDragAndDrop,
|
|
172
239
|
mode,
|
|
@@ -174,23 +241,27 @@ const DayView = factory((_props) => {
|
|
|
174
241
|
canDragEvent,
|
|
175
242
|
onEventDragStart,
|
|
176
243
|
onEventDragEnd,
|
|
177
|
-
calculateDropTarget:
|
|
178
|
-
const slotTime = slots[slotIndex].startTime;
|
|
179
|
-
return calculateDropTime({
|
|
180
|
-
draggedEvent,
|
|
181
|
-
targetDate: date,
|
|
182
|
-
targetSlotTime: slotTime,
|
|
183
|
-
intervalMinutes
|
|
184
|
-
});
|
|
185
|
-
},
|
|
244
|
+
calculateDropTarget: getDropTimeForSlot,
|
|
186
245
|
onExternalDrop: onExternalEventDrop ? handleExternalDrop : void 0
|
|
187
246
|
});
|
|
247
|
+
const updateDragPreview = (slotIndex) => {
|
|
248
|
+
const draggedEvent = dragDrop.dragContextValue.draggedEvent;
|
|
249
|
+
if (eventDragInterval == null || !draggedEvent) return;
|
|
250
|
+
const { start, end } = getDropTimeForSlot(slotIndex, draggedEvent);
|
|
251
|
+
const newStart = dayjs(start).format("YYYY-MM-DD HH:mm:ss");
|
|
252
|
+
if (dragDrop.dragPreview?.start !== newStart) dragDrop.setDragPreview({
|
|
253
|
+
start: newStart,
|
|
254
|
+
end: dayjs(end).format("YYYY-MM-DD HH:mm:ss"),
|
|
255
|
+
target: slotIndex
|
|
256
|
+
});
|
|
257
|
+
};
|
|
188
258
|
const eventResize = useEventResize({
|
|
189
259
|
enabled: withEventResize,
|
|
190
260
|
mode,
|
|
191
261
|
startTime,
|
|
192
262
|
endTime,
|
|
193
263
|
intervalMinutes,
|
|
264
|
+
resizeIntervalMinutes: eventResizeInterval,
|
|
194
265
|
onEventResize,
|
|
195
266
|
canResizeEvent
|
|
196
267
|
});
|
|
@@ -229,13 +300,16 @@ const DayView = factory((_props) => {
|
|
|
229
300
|
if (!eventResize.wasResizing()) onEventClick(event, e);
|
|
230
301
|
} : void 0,
|
|
231
302
|
...stylesApiProps,
|
|
303
|
+
mod: { cascade: eventOverlapMode === "cascade" },
|
|
232
304
|
style: {
|
|
233
305
|
...stylesApiProps.styles?.event,
|
|
234
306
|
top: `${eventTop}%`,
|
|
235
307
|
height: `${eventHeight}%`,
|
|
236
308
|
insetInlineStart: `${event.position.offset}%`,
|
|
237
309
|
width: `${event.position.width}%`,
|
|
238
|
-
position: "absolute"
|
|
310
|
+
position: "absolute",
|
|
311
|
+
"--event-z-index": event.position.column + 3,
|
|
312
|
+
"--event-z-index-raised": event.position.overlaps + 3
|
|
239
313
|
}
|
|
240
314
|
}, event.id);
|
|
241
315
|
});
|
|
@@ -255,8 +329,9 @@ const DayView = factory((_props) => {
|
|
|
255
329
|
...stylesApiProps
|
|
256
330
|
}, event.id));
|
|
257
331
|
const dayGroup = dayjs(date).format("YYYY-MM-DD");
|
|
332
|
+
const suppressDropHighlight = eventDragInterval != null && dragDrop.dragContextValue.isDragging;
|
|
258
333
|
const items = slots.map((slot, index) => {
|
|
259
|
-
const isDropTarget = dragDrop.isDropTarget(index);
|
|
334
|
+
const isDropTarget = !suppressDropHighlight && dragDrop.isDropTarget(index);
|
|
260
335
|
const isDragSelected = slotDragSelect.isSlotSelected(index, dayGroup);
|
|
261
336
|
const slotStart = `${dayGroup} ${slot.startTime}`;
|
|
262
337
|
const slotEnd = `${dayGroup} ${slot.endTime}`;
|
|
@@ -322,61 +397,37 @@ const DayView = factory((_props) => {
|
|
|
322
397
|
}
|
|
323
398
|
return acc;
|
|
324
399
|
}, []);
|
|
325
|
-
const
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
theme,
|
|
354
|
-
variant: "light",
|
|
355
|
-
autoContrast: true
|
|
356
|
-
});
|
|
357
|
-
const bgEventBody = typeof renderEventBody === "function" ? renderEventBody(event) : event.title;
|
|
358
|
-
const bgEventProps = {
|
|
359
|
-
key: event.id,
|
|
360
|
-
...getStyles("dayViewBackgroundEvent", { style: {
|
|
361
|
-
...getTimeAxisEventStyle({
|
|
362
|
-
start: event.position.top,
|
|
363
|
-
span: event.position.height,
|
|
364
|
-
axis: "vertical"
|
|
365
|
-
}),
|
|
366
|
-
width: "100%"
|
|
367
|
-
} }),
|
|
368
|
-
__vars: {
|
|
369
|
-
"--bg-event-bg": colors.background,
|
|
370
|
-
"--bg-event-color": colors.color
|
|
371
|
-
},
|
|
372
|
-
children: bgEventBody
|
|
373
|
-
};
|
|
374
|
-
if (typeof renderEvent === "function") return renderEvent(event, bgEventProps);
|
|
375
|
-
const { key: bgEventKey, ...restBgEventProps } = bgEventProps;
|
|
376
|
-
return /* @__PURE__ */ jsx(Box, { ...restBgEventProps }, bgEventKey);
|
|
377
|
-
});
|
|
400
|
+
const interactiveBackgroundEvents = withInteractiveBackgroundEvents && mode !== "static";
|
|
401
|
+
const backgroundAllDayEventNodes = eventsData.backgroundAllDayEvents.map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
|
|
402
|
+
event,
|
|
403
|
+
renderEvent,
|
|
404
|
+
renderEventBody,
|
|
405
|
+
interactive: interactiveBackgroundEvents,
|
|
406
|
+
onEventClick,
|
|
407
|
+
...getStyles("dayViewBackgroundEvent", { style: {
|
|
408
|
+
top: 0,
|
|
409
|
+
height: "100%",
|
|
410
|
+
width: "100%"
|
|
411
|
+
} })
|
|
412
|
+
}, `bg-allday-${event.id}`));
|
|
413
|
+
const backgroundTimedEventNodes = eventsData.backgroundTimedEvents.map((event) => /* @__PURE__ */ jsx(ScheduleBackgroundEvent, {
|
|
414
|
+
event,
|
|
415
|
+
renderEvent,
|
|
416
|
+
renderEventBody,
|
|
417
|
+
interactive: interactiveBackgroundEvents,
|
|
418
|
+
onEventClick,
|
|
419
|
+
...getStyles("dayViewBackgroundEvent", { style: {
|
|
420
|
+
...getTimeAxisEventStyle({
|
|
421
|
+
start: event.position.top,
|
|
422
|
+
span: event.position.height,
|
|
423
|
+
axis: "vertical"
|
|
424
|
+
}),
|
|
425
|
+
width: "100%"
|
|
426
|
+
} })
|
|
427
|
+
}, event.id));
|
|
378
428
|
const content = /* @__PURE__ */ jsxs(Box, {
|
|
379
429
|
...getStyles("dayView"),
|
|
430
|
+
__vars: { "--event-raise-delay": `${eventOverlapRaiseDelay}ms` },
|
|
380
431
|
mod: {
|
|
381
432
|
static: mode === "static",
|
|
382
433
|
"slot-dragging": slotDragSelect.isDragging,
|
|
@@ -476,7 +527,10 @@ const DayView = factory((_props) => {
|
|
|
476
527
|
...getStyles("dayViewTimeSlots"),
|
|
477
528
|
onDragOver: withDragHandlers ? (event) => {
|
|
478
529
|
const slotIndex = getSlotIndexFromDragPoint(event);
|
|
479
|
-
if (slotIndex !== null)
|
|
530
|
+
if (slotIndex !== null) {
|
|
531
|
+
dragDrop.handleDragOver(event, slotIndex);
|
|
532
|
+
updateDragPreview(slotIndex);
|
|
533
|
+
}
|
|
480
534
|
} : void 0,
|
|
481
535
|
onDragLeave: withDragHandlers ? dragDrop.handleDragLeave : void 0,
|
|
482
536
|
onDrop: withDragHandlers ? (event) => {
|
|
@@ -486,6 +540,25 @@ const DayView = factory((_props) => {
|
|
|
486
540
|
children: [
|
|
487
541
|
backgroundTimedEventNodes,
|
|
488
542
|
eventsNodes,
|
|
543
|
+
dragDrop.dragPreview && dragDrop.dragContextValue.draggedEvent && /* @__PURE__ */ jsx(Box, { ...getStyles("dayViewDragPreview", { style: (() => {
|
|
544
|
+
const { top, height } = getDayPosition({
|
|
545
|
+
event: {
|
|
546
|
+
...dragDrop.dragContextValue.draggedEvent,
|
|
547
|
+
start: dragDrop.dragPreview.start,
|
|
548
|
+
end: dragDrop.dragPreview.end
|
|
549
|
+
},
|
|
550
|
+
startTime,
|
|
551
|
+
endTime,
|
|
552
|
+
intervalMinutes
|
|
553
|
+
});
|
|
554
|
+
return {
|
|
555
|
+
position: "absolute",
|
|
556
|
+
insetInlineStart: 0,
|
|
557
|
+
insetInlineEnd: 0,
|
|
558
|
+
top: `${top}%`,
|
|
559
|
+
height: `${height}%`
|
|
560
|
+
};
|
|
561
|
+
})() }) }),
|
|
489
562
|
showCurrentTimeIndicator && /* @__PURE__ */ jsx(CurrentTimeIndicator, {
|
|
490
563
|
startOffset: "calc(var(--day-view-slot-labels-width) * -1)",
|
|
491
564
|
endOffset: "0rem",
|