fix: synchronize calendar month input and add month navigation

This commit is contained in:
2026-09-06 14:08:08 +03:00
parent 6c33012ab8
commit 525b673e25
5 changed files with 30 additions and 3 deletions
+8 -2
View File
@@ -1,5 +1,5 @@
import { useDeadlineClock } from '../../hooks/useDeadlineClock';
import { calendarMonthDays, istanbulDateKey, calendarAgenda } from '../../services/tenderCalendar';
import { calendarMonthDays, istanbulDateKey, calendarAgenda, shiftCalendarMonth } from '../../services/tenderCalendar';
import React, { useState, useMemo } from 'react';
import { useApp } from '../../context/AppContext';
import { CalendarDays } from 'lucide-react';
@@ -13,6 +13,7 @@ export const TenderCalendar = () => {
const agenda=useMemo(()=>calendarAgenda(tenders,now),[tenders,now]);
const daysList=calendarMonthDays(month).map(day=>({...day,count:agenda.days.get(day.key)?.length || 0}));
const dayTenders=agenda.days.get(selectedDay) || [];
const chooseMonth=value=>{if(calendarMonthDays(value).length){setMonth(value);setSelectedDay(value+'-01');}};
const card=({tender:t,info})=><button key={t.id} type="button" onClick={()=>setActiveTenderDetail(t)}
className="w-full text-left bg-white rounded-xl border border-slate-200 p-4 shadow-xs hover:shadow-md transition-all flex flex-wrap items-center justify-between gap-3">
<span className="min-w-0 space-y-1">
@@ -44,9 +45,14 @@ export const TenderCalendar = () => {
</div>
<label className="block text-sm font-semibold">Takvim ayı
<input type="month" value={month} onChange={e => {if(calendarMonthDays(e.target.value).length){setMonth(e.target.value);setSelectedDay(e.target.value+'-01');}}}
<input type="month" value={month} onInput={e=>chooseMonth(e.currentTarget.value)} onChange={e=>chooseMonth(e.target.value)}
className="ml-3 border border-slate-300 rounded-lg p-2"/>
</label>
<div className="flex flex-wrap gap-2" aria-label="Takvim ayı gezinme">
<button type="button" className="border rounded px-3 py-2 text-sm" disabled={!shiftCalendarMonth(month,-1)} onClick={()=>chooseMonth(shiftCalendarMonth(month,-1))}>Önceki ay</button>
<button type="button" className="border rounded px-3 py-2 text-sm" onClick={()=>{setMonth(today.slice(0,7));setSelectedDay(today);}}>Bugüne dön</button>
<button type="button" className="border rounded px-3 py-2 text-sm" disabled={!shiftCalendarMonth(month,1)} onClick={()=>chooseMonth(shiftCalendarMonth(month,1))}>Sonraki ay</button>
</div>
{/* Day Selector Buttons */}
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-7 gap-2">
{daysList.map(d => (