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

Embed month/year selects inside calendar header

Browse source
This commit is contained in:
Tero Halla-aho 2025-12-21 22:36:27 +02:00
parent a33470435a
commit cfd6dec9d0
1 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
app/components/AvailabilityCalendar.tsx
View file

@ -109,24 +109,10 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
<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>
</div> </div>
<div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}> <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
<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>
<select value={month} onChange={(e) => setMonth(Number(e.target.value))} disabled={!hasCalendar || loading}>
{monthOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
<select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading}>
{yearOptions.map((y) => (
<option key={y} value={y}>
{y}
</option>
))}
</select>
<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>
@ -135,7 +121,22 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
{error ? <div style={{ color: '#f87171', fontSize: 13 }}>{error}</div> : null} {error ? <div style={{ color: '#f87171', fontSize: 13 }}>{error}</div> : null}
{monthViews.map((monthView) => ( {monthViews.map((monthView) => (
<div key={monthView.label} className="panel" style={{ padding: 12 }}> <div key={monthView.label} className="panel" style={{ padding: 12 }}>
<div style={{ fontWeight: 600, marginBottom: 8 }}>{monthView.label}</div> <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
<select value={month} onChange={(e) => setMonth(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ flex: 1 }}>
{monthOptions.map((opt) => (
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
<select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ width: 120 }}>
{yearOptions.map((y) => (
<option key={y} value={y}>
{y}
</option>
))}
</select>
</div>
<div <div
style={{ style={{
display: 'grid', display: 'grid',