tomru/pfadi-bussle
1
0
Fork 0
mirror of https://github.com/tomru/pfadi-bussle.git synced 2026-03-04 15:07:13 +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 classnames from 'classnames'
import { isPast, isSameDay, isAfter, isWithinInterval } from 'date-fns' import { isPast, isSameDay, isAfter, isWithinInterval } from 'date-fns'
import useSWR from 'swr' import useSWR from 'swr'
import Calendar, { DateCallback } from 'react-calendar' import Calendar from 'react-calendar'
import { dateFormatBackend } from '../../helpers/date' import { dateFormatBackend } from '../../helpers/date'
import { getNextBigger, getNextSmaller } from '../../helpers/array'
import { WizardContext } from './context/wizardStore' import { WizardContext } from './context/wizardStore'
const fetcher = (path: string) => fetch(path).then((r) => r.json()) const fetcher = (path: string) => fetch(path).then((r) => r.json())
@@ -18,6 +19,10 @@ export default function MyCalendar() {
fetcher fetcher
) )
const inSelection = !!start && !end
const prevBooked = inSelection && getNextSmaller(daysBooked, start)
const nextBooked = inSelection && getNextBigger(daysBooked, start)
function tileClassName({ date, view }) { function tileClassName({ date, view }) {
const isMonthView = view === 'month' const isMonthView = view === 'month'
const isDaysBookedLoaded = !!daysBooked const isDaysBookedLoaded = !!daysBooked
@@ -29,6 +34,8 @@ export default function MyCalendar() {
isMonthView && isDaysBookedLoaded && isBooked && !isInPast, isMonthView && isDaysBookedLoaded && isBooked && !isInPast,
'react-calendar__tile--free': 'react-calendar__tile--free':
isMonthView && isDaysBookedLoaded && !isBooked && !isInPast, isMonthView && isDaysBookedLoaded && !isBooked && !isInPast,
'react-calendar__tile--selected-start': isSameDay(date, startDate),
'react-calendar__tile--selected-end': isSameDay(date, endDate),
'react-calendar__tile--selected': 'react-calendar__tile--selected':
(startDate && (startDate &&
isWithinInterval(date, { isWithinInterval(date, {
@@ -36,6 +43,10 @@ export default function MyCalendar() {
end: endDate || startDate, end: endDate || startDate,
})) || })) ||
isSameDay(date, 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 ( if (
targetClassList.contains('react-calendar__tile--past') || 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 return
} }

23
styles/index.css
View File

@@ -161,7 +161,7 @@
@apply text-red-600; @apply text-red-600;
} }
.react-calendar__month-view__days__day--neighboringMonth { .react-calendar__month-view__days__day--neighboringMonth {
@apply text-gray-400; @apply text-gray-600;
} }
.react-calendar__year-view .react-calendar__tile, .react-calendar__year-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile, .react-calendar__decade-view .react-calendar__tile,
@@ -169,7 +169,7 @@
} }
.react-calendar__tile { .react-calendar__tile {
@apply py-1; @apply py-1 border border-gray-500;
} }
.react-calendar__tile--free { .react-calendar__tile--free {
@@ -177,6 +177,10 @@
cursor: pointer; cursor: pointer;
} }
.react-calendar__tile--free:hover:not(.react-calendar__tile--unselectable) {
@apply bg-gray-500;
}
.react-calendar__tile--booked { .react-calendar__tile--booked {
@apply bg-red-200 cursor-not-allowed; @apply bg-red-200 cursor-not-allowed;
} }
@@ -190,12 +194,21 @@
} }
.react-calendar__tile--selected { .react-calendar__tile--selected {
@apply bg-blue-200; @apply bg-blue-400;
} }
.react-calendar__tile--free:hover { .react-calendar__tile--unselectable {
@apply bg-gray-500; @apply cursor-not-allowed;
} }
.react-calendar__tile--selected-start {
@apply rounded-tl-sm rounded-bl-sm;
}
.react-calendar__tile--selected-end {
@apply rounded-tr-sm rounded-br-sm;
}
.react-calendar__tile--now { .react-calendar__tile--now {
@apply text-green-400; @apply text-green-400;
} }