103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import { useI18n } from './I18nProvider';
|
|
|
|
type MonthView = {
|
|
label: string;
|
|
days: { label: string; date: string; blocked: boolean; isFiller: boolean }[];
|
|
};
|
|
|
|
function buildMonths(monthCount: number, blocked: Set<string>): MonthView[] {
|
|
const months: MonthView[] = [];
|
|
const base = new Date();
|
|
base.setUTCDate(1);
|
|
|
|
for (let i = 0; i < monthCount; i += 1) {
|
|
const monthDate = new Date(base);
|
|
monthDate.setUTCMonth(base.getUTCMonth() + i);
|
|
const year = monthDate.getUTCFullYear();
|
|
const month = monthDate.getUTCMonth();
|
|
const label = monthDate.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
|
|
|
|
const firstDay = new Date(Date.UTC(year, month, 1));
|
|
const startWeekday = firstDay.getUTCDay(); // 0=Sun
|
|
const daysInMonth = new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
|
|
|
|
const days: MonthView['days'] = [];
|
|
for (let f = 0; f < startWeekday; f += 1) {
|
|
days.push({ label: '', date: '', blocked: false, isFiller: true });
|
|
}
|
|
for (let d = 1; d <= daysInMonth; d += 1) {
|
|
const date = new Date(Date.UTC(year, month, d));
|
|
const iso = date.toISOString().slice(0, 10);
|
|
days.push({ label: String(d), date: iso, blocked: blocked.has(iso), isFiller: false });
|
|
}
|
|
|
|
months.push({ label, days });
|
|
}
|
|
|
|
return months;
|
|
}
|
|
|
|
export default function AvailabilityCalendar({
|
|
blockedDates,
|
|
months = 2,
|
|
disabled = false,
|
|
}: {
|
|
blockedDates: string[];
|
|
months?: number;
|
|
disabled?: boolean;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const blockedSet = useMemo(() => new Set(blockedDates), [blockedDates]);
|
|
const monthViews = useMemo(() => buildMonths(months, blockedSet), [months, blockedSet]);
|
|
|
|
return (
|
|
<div style={{ display: 'grid', gap: 16, opacity: disabled ? 0.45 : 1 }}>
|
|
<div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
|
|
<span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
|
|
<span className="badge secondary">{t('availabilityLegendBooked')}</span>
|
|
</div>
|
|
<div style={{ display: 'grid', gap: 12, gridTemplateColumns: `repeat(${months}, minmax(180px, 1fr))` }}>
|
|
{monthViews.map((month) => (
|
|
<div key={month.label} className="panel" style={{ padding: 12 }}>
|
|
<div style={{ fontWeight: 600, marginBottom: 8 }}>{month.label}</div>
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(7, 1fr)',
|
|
gap: 6,
|
|
fontSize: 12,
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d) => (
|
|
<div key={d} style={{ color: '#94a3b8', fontWeight: 600 }}>
|
|
{d}
|
|
</div>
|
|
))}
|
|
{month.days.map((day, idx) => (
|
|
<div
|
|
key={`${month.label}-${idx}`}
|
|
style={{
|
|
height: 32,
|
|
borderRadius: 8,
|
|
background: day.isFiller ? 'transparent' : day.blocked ? 'rgba(248,113,113,0.2)' : 'rgba(148,163,184,0.1)',
|
|
color: day.isFiller ? 'transparent' : day.blocked ? '#ef4444' : '#e2e8f0',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
aria-label={day.date ? `${day.date}${day.blocked ? ' (booked)' : ''}` : undefined}
|
|
>
|
|
{day.label}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|