thalla/lomavuokraus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dim calendar when no iCal links and show single month

Browse source
This commit is contained in:
Tero Halla-aho 2025-12-06 23:09:15 +02:00
parent c880ba11c3
commit 6cc5efc9e5
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/AvailabilityCalendar.tsx
View file

@ -40,13 +40,21 @@ function buildMonths(monthCount: number, blocked: Set<string>): MonthView[] {
return months; return months;
} }
export default function AvailabilityCalendar({ blockedDates, months = 2 }: { blockedDates: string[]; months?: number }) { export default function AvailabilityCalendar({
blockedDates,
months = 2,
disabled = false,
}: {
blockedDates: string[];
months?: number;
disabled?: boolean;
}) {
const { t } = useI18n(); const { t } = useI18n();
const blockedSet = useMemo(() => new Set(blockedDates), [blockedDates]); const blockedSet = useMemo(() => new Set(blockedDates), [blockedDates]);
const monthViews = useMemo(() => buildMonths(months, blockedSet), [months, blockedSet]); const monthViews = useMemo(() => buildMonths(months, blockedSet), [months, blockedSet]);
return ( return (
<div style={{ display: 'grid', gap: 16 }}> <div style={{ display: 'grid', gap: 16, opacity: disabled ? 0.45 : 1 }}>
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}> <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
<span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span> <span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
<span className="badge secondary">{t('availabilityLegendBooked')}</span> <span className="badge secondary">{t('availabilityLegendBooked')}</span>

2
app/listings/[slug]/page.tsx
View file

@ -137,7 +137,7 @@ export default async function ListingPage({ params }: ListingPageProps) {
</div> </div>
<div className="panel" style={{ padding: 12 }}> <div className="panel" style={{ padding: 12 }}>
{hasCalendar ? ( {hasCalendar ? (
<AvailabilityCalendar blockedDates={blockedDates} months={2} /> <AvailabilityCalendar blockedDates={blockedDates} months={1} disabled={!listing.calendarUrls?.length} />
) : ( ) : (
<div style={{ display: 'grid', gap: 8 }}> <div style={{ display: 'grid', gap: 8 }}>
<div style={{ fontWeight: 700 }}>{t('availabilityTitle')}</div> <div style={{ fontWeight: 700 }}>{t('availabilityTitle')}</div>