tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-03 06:27:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

disable selection of range over other bookings

Browse Source
This commit is contained in:
Thomas Ruoff
2020-09-23 23:56:52 +02:00
committed by Thomas Ruoff
parent 898e6b8295
commit c231646190
2 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
components/wizard/calendar.tsx
View File

@@ -2,8 +2,9 @@ import React, { useContext } from 'react'
import classnames from 'classnames'
import { isPast, isSameDay, isAfter, isWithinInterval } from 'date-fns'
import useSWR from 'swr'
import Calendar, { DateCallback } from 'react-calendar'
import Calendar from 'react-calendar'
import { dateFormatBackend } from '../../helpers/date'
import { getNextBigger, getNextSmaller } from '../../helpers/array'
import { WizardContext } from './context/wizardStore'
const fetcher = (path: string) => fetch(path).then((r) => r.json())
@@ -18,6 +19,10 @@ export default function MyCalendar() {
fetcher
)
const inSelection = !!start && !end
const prevBooked = inSelection && getNextSmaller(daysBooked, start)
const nextBooked = inSelection && getNextBigger(daysBooked, start)
function tileClassName({ date, view }) {
const isMonthView = view === 'month'
const isDaysBookedLoaded = !!daysBooked
@@ -29,6 +34,8 @@ export default function MyCalendar() {
isMonthView && isDaysBookedLoaded && isBooked && !isInPast,
'react-calendar__tile--free':
isMonthView && isDaysBookedLoaded && !isBooked && !isInPast,
'react-calendar__tile--selected-start': isSameDay(date, startDate),
'react-calendar__tile--selected-end': isSameDay(date, endDate),
'react-calendar__tile--selected':
(startDate &&
isWithinInterval(date, {
@@ -36,6 +43,10 @@ export default function MyCalendar() {
end: endDate || startDate,
})) ||
isSameDay(date, startDate),
'react-calendar__tile--unselectable':
inSelection &&
((prevBooked && date < new Date(prevBooked)) ||
(nextBooked && date > new Date(nextBooked))),
})
}
@@ -62,7 +73,8 @@ export default function MyCalendar() {
if (
targetClassList.contains('react-calendar__tile--past') ||
targetClassList.contains('react-calendar__tile--booked')
targetClassList.contains('react-calendar__tile--booked') ||
targetClassList.contains('react-calendar__tile--unselectable')
) {
return
}