e.stopPropagation()}> {/* Colored header band */}

{event.title}

{event.ownerName}

{/* Content */}

{/* Date & Time */}

{formatFullDate(event.start)}

{event.allDay ? 'Весь день' : `${formatTime(event.start)} — ${formatTime(event.end)}` }

{/* Location */} {event.location && (

{event.location}

)} {/* Description */} {event.description && (

Описание

{event.description}

)} {/* Delete */}

{!confirmDelete ? ( ) : (

)}

) } // ————— Day Events Popover ————— function DayEventsModal({ day, month, year, events, onClose, onSelect }: { day: number; month: number; year: number events: CalendarEvent[] onClose: () => void onSelect: (e: CalendarEvent) => void }) { const date = new Date(year, month, day) const label = date.toLocaleDateString('ru-RU', { weekday: 'long', day: 'numeric', month: 'long' }) return (

e.stopPropagation()}>

{label}

{events.map(e => ( ))}

) } // ————— Main Calendar ————— export default function CalendarTab() { const [year, setYear] = useState(new Date().getFullYear()) const [month, setMonth] = useState(new Date().getMonth()) const [events, setEvents] = useState([]) const [loading, setLoading] = useState(true) const [selectedEvent, setSelectedEvent] = useState(null) const [showAddModal, setShowAddModal] = useState(false) const [addDate, setAddDate] = useState('') const [hiddenOwners, setHiddenOwners] = useState>(new Set()) const [dayPopover, setDayPopover] = useState<{ day: number; events: CalendarEvent[] } | null>(null) useEffect(() => { setLoading(true) fetch('/api/calendar?range=month&year=' + year + '&month=' + month) .then(r => r.json()) .then(d => { setEvents(d.events || []); setLoading(false) }) .catch(() => setLoading(false)) }, [year, month]) const deleteEvent = async (event: CalendarEvent) => { try { const r = await fetch(`/api/calendar?eventId=${event.id}`, { method: 'DELETE' }) const d = await r.json() if (d.error) throw new Error(d.error) setEvents(prev => prev.filter(e => e.id !== event.id)) setSelectedEvent(null) } catch (e: any) { alert(e.message || 'Ошибка удаления') } } const calendarOwners = useMemo(() => { const map = new Map() events.forEach(e => { const existing = map.get(e.owner) if (existing) existing.count++ else map.set(e.owner, { owner: e.owner, ownerName: e.ownerName, color: e.color, count: 1 }) }) return Array.from(map.values()) }, [events]) const toggleOwner = (owner: string) => { setHiddenOwners(prev => { const next = new Set(prev) if (next.has(owner)) next.delete(owner) else next.add(owner) return next }) } const filteredEvents = useMemo(() => { if (hiddenOwners.size === 0) return events return events.filter(e => !hiddenOwners.has(e.owner)) }, [events, hiddenOwners]) const upcoming = filteredEvents .filter(e => new Date(e.start) >= new Date()) .slice(0, 6) const firstDay = new Date(year, month, 1) const lastDay = new Date(year, month + 1, 0) const startOffset = (firstDay.getDay() + 6) % 7 const totalCells = Math.ceil((startOffset + lastDay.getDate()) / 7) * 7 const cells: (number | null)[] = [] for (let i = 0; i < totalCells; i++) { const dayNum = i - startOffset + 1 cells.push(dayNum >= 1 && dayNum <= lastDay.getDate() ? dayNum : null) } const getEventsForDay = (day: number) => { return filteredEvents.filter(e => { const d = new Date(e.start) return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day }) } const prevMonth = () => { if (month === 0) { setMonth(11); setYear(y => y - 1) } else setMonth(m => m - 1) } const nextMonth = () => { if (month === 11) { setMonth(0); setYear(y => y + 1) } else setMonth(m => m + 1) } const today = new Date() const handleDayClick = (day: number) => { const dayEvents = getEventsForDay(day) if (dayEvents.length === 0) { setAddDate(`${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`) setShowAddModal(true) } else if (dayEvents.length === 1) { setSelectedEvent(dayEvents[0]) } else { setDayPopover({ day, events: dayEvents }) } } return (

{/* Main calendar grid */}

{/* Header */}

{MONTHS[month]} {year}

{calendarOwners.map(cal => { const isHidden = hiddenOwners.has(cal.owner) return ( ) })}

{/* Weekday headers */}

{WEEKDAYS.map((d, i) => (

= 5 ? 'rgba(248,113,113,0.5)' : 'var(--text-secondary)', textTransform: 'uppercase', padding: '6px 0', letterSpacing: '0.05em', }}>{d}

))}

{/* Calendar cells */}

{cells.map((day, idx) => { if (!day) return

const dayEvents = getEventsForDay(day) const isToday = today.getFullYear() === year && today.getMonth() === month && today.getDate() === day const dayOfWeek = (startOffset + day - 1) % 7 const isWeekend = dayOfWeek >= 5 return (

handleDayClick(day)} style={{ borderRadius: 12, padding: '4px 5px', background: isToday ? 'linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.08))' : 'rgba(255,255,255,0.015)', border: isToday ? '1px solid rgba(129,140,248,0.3)' : '1px solid transparent', cursor: 'pointer', minHeight: 70, display: 'flex', flexDirection: 'column', gap: 3, transition: 'all 0.2s ease', }} > {day} {dayEvents.slice(0, 3).map(e => (

{ ev.stopPropagation(); setSelectedEvent(e) }} style={{ display: 'flex', alignItems: 'center', gap: 4, background: `${e.color}18`, borderLeft: `3px solid ${e.color}`, borderRadius: '0 6px 6px 0', padding: '4px 6px', cursor: 'pointer', overflow: 'hidden', }} > {!e.allDay && ( {formatTime(e.start)} )} {e.title}

))} {dayEvents.length > 3 && (

+{dayEvents.length - 3}

)}

) })}

{/* Right panel */}

Ближайшие

{upcoming.length === 0 && !loading && (

Нет событий

)} {upcoming.map(e => { const d = new Date(e.start) return (

setSelectedEvent(e)} style={{ borderRadius: 16, padding: '14px', background: `${e.color}0c`, border: `1px solid ${e.color}1a`, cursor: 'pointer', transition: 'all 0.25s ease', }}>

{d.getDate()}

{MONTHS[d.getMonth()].slice(0, 3)}

{e.allDay ? 'Весь день' : formatTime(e.start)}

{e.title}

{e.ownerName}

) })}

{/* Modals */} {selectedEvent && ( setSelectedEvent(null)} onDelete={deleteEvent} /> )} {dayPopover && ( setDayPopover(null)} onSelect={e => { setDayPopover(null); setSelectedEvent(e) }} /> )} {showAddModal && ( setShowAddModal(false)} onSaved={(newEvent) => { setEvents(prev => [...prev, newEvent]); setShowAddModal(false) }} /> )}

) }