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

Localize month names and tighten calendar header
Some checks failed
CI / checks (push) Has been cancelled
Details
CI / checks (pull_request) Has been cancelled
Details

Browse source
This commit is contained in:
Tero Halla-aho 2025-12-21 22:43:33 +02:00
parent cfd6dec9d0
commit 56f7a7517d
1 changed files with 6 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/components/AvailabilityCalendar.tsx
View file

@ -42,7 +42,7 @@ function buildMonths(monthCount: number, blocked: Set<string>, startYear: number
type AvailabilityResponse = { blockedDates: string[] }; type AvailabilityResponse = { blockedDates: string[] };
export default function AvailabilityCalendar({ listingId, hasCalendar }: { listingId: string; hasCalendar: boolean }) { export default function AvailabilityCalendar({ listingId, hasCalendar }: { listingId: string; hasCalendar: boolean }) {
const { t } = useI18n(); const { t, locale } = useI18n();
const today = useMemo(() => new Date(), []); const today = useMemo(() => new Date(), []);
const [month, setMonth] = useState<number>(today.getUTCMonth()); const [month, setMonth] = useState<number>(today.getUTCMonth());
const [year, setYear] = useState<number>(today.getUTCFullYear()); const [year, setYear] = useState<number>(today.getUTCFullYear());
@ -93,9 +93,9 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
() => () =>
Array.from({ length: 12 }, (_, m) => ({ Array.from({ length: 12 }, (_, m) => ({
value: m, value: m,
label: new Date(Date.UTC(2020, m, 1)).toLocaleString(undefined, { month: 'long' }), label: new Date(Date.UTC(2020, m, 1)).toLocaleString(locale, { month: 'long' }),
})), })),
[], [locale],
); );
const yearOptions = useMemo(() => { const yearOptions = useMemo(() => {
const current = today.getUTCFullYear(); const current = today.getUTCFullYear();
@ -107,9 +107,9 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
<div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
<span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span> <span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
<span className="badge secondary">{t('availabilityLegendBooked')}</span>
</div> </div>
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}> <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
<span className="badge secondary">{t('availabilityLegendBooked')}</span>
<button type="button" className="button secondary" onClick={() => shiftMonth(-1)} disabled={!hasCalendar || loading} style={{ padding: '6px 10px' }}> <button type="button" className="button secondary" onClick={() => shiftMonth(-1)} disabled={!hasCalendar || loading} style={{ padding: '6px 10px' }}>
← ←
</button> </button>
@ -129,7 +129,7 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
</option> </option>
))} ))}
</select> </select>
<select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ width: 120 }}> <select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ width: 96 }}>
{yearOptions.map((y) => ( {yearOptions.map((y) => (
<option key={y} value={y}> <option key={y} value={y}>
{y} {y}