// Veridian Markets — Calendar page. // An economic / events calendar: month grid with type-coded event dots, a // type filter, and a day panel that lists the selected day's events. Mock data. const { useState: useStateCal } = React; const CAL_YEAR = 2026, CAL_MONTH = 5; // June 2026 (0-indexed month) const CAL_MONTH_NAME = 'June 2026'; const CAL_TODAY = 1; // app's mock "today" = 1 June 2026 const CAL_TYPES = { earn: { label: 'Earnings', color: VM.teal, desc: "A company's quarterly results — revenue, EPS, guidance." }, econ: { label: 'Economic', color: VM.terra, desc: 'Macro data releases — inflation, jobs, growth, sentiment.' }, cb: { label: 'Central bank', color: VM.forest, desc: 'Central-bank actions — rate decisions, minutes, speeches.' }, div: { label: 'Dividend', color: VM.ink3, desc: 'Dividend dates — ex-dividend and payment.' }, mkt: { label: 'Markets', color: VM.rust, desc: 'Structural market events — options expiry, holidays, index changes.' }, ipo: { label: 'IPO', color: '#185FA5', desc: 'New listings — a company selling shares to the public for the first time.' }, fda: { label: 'FDA', color: '#8A5CB0', desc: 'FDA advisory-committee meetings — rulings that can move pharma & biotech.' }, holiday: { label: 'Holiday', color: VM.ink3, desc: 'US market holiday — exchanges closed or on a shortened session.' }, }; // Column meanings, shown in the Legend popup. const CAL_COL_HELP = [ ['Date', 'The day of the release. Events are grouped by day; today is highlighted.'], ['Time', 'Local release time (24h). “—” means all-day or no set time.'], ['Region', 'The economy or currency the release covers (e.g. USD).'], ['Impact', 'Expected market reaction — see the impact key below.'], ['Event', 'The release or corporate event. A ticker link opens that company.'], ['Actual', 'The figure once published — blank (—) until release.'], ['Forecast', 'Consensus expectation going into the release.'], ['Previous', 'The prior period’s figure, for trend comparison.'], ]; // Expected market impact — drives the colour dot in the list view. const CAL_IMPACT = { high: { label: 'High', color: '#C0563B', desc: 'Market-moving. Can swing rates, FX and indices.' }, med: { label: 'Med', color: '#C99A2E', desc: 'Notable — usually a smaller or sector-level reaction.' }, low: { label: 'Low', color: VM.ink3, desc: 'Minor — rarely moves the broad market.' }, }; // region/impact/forecast/previous power the list (table) view. These are upcoming // events, so `actual` posts on release (shown as — until then). Mock data. const CAL_EVENTS = [ { d: 3, time: '14:00', title: 'FOMC minutes', type: 'cb', region: 'USD', impact: 'high', forecast: '—', previous: '—' }, { d: 3, time: '15:30', title: 'US jobless claims', type: 'econ', region: 'USD', impact: 'med', forecast: '230K', previous: '229K' }, { d: 5, time: '13:30', title: 'US non-farm payrolls', type: 'econ', region: 'USD', impact: 'high', forecast: '+190K', previous: '+175K' }, { d: 6, time: '—', title: 'AAPL ex-dividend', type: 'div', region: 'US', impact: 'low', forecast: '$0.25', previous: '$0.24', ticker: 'AAPL' }, { d: 10, time: '21:00', title: 'NVIDIA earnings · Q1', type: 'earn', region: 'US', impact: 'high', forecast: 'EPS $0.84', previous: 'EPS $0.61', ticker: 'NVDA' }, { d: 12, time: '13:30', title: 'US CPI · May', type: 'econ', region: 'USD', impact: 'high', forecast: '3.3%', previous: '3.4%' }, { d: 17, time: '19:00', title: 'FOMC rate decision', type: 'cb', region: 'USD', impact: 'high', forecast: '5.25%', previous: '5.50%' }, { d: 18, time: '21:00', title: 'Microsoft earnings · Q4', type: 'earn', region: 'US', impact: 'high', forecast: 'EPS $2.93', previous: 'EPS $2.69', ticker: 'MSFT' }, { d: 20, time: '—', title: 'Quadruple witching', type: 'mkt', region: 'US', impact: 'med', forecast: '—', previous: '—' }, { d: 25, time: '13:30', title: 'US GDP · final Q1', type: 'econ', region: 'USD', impact: 'med', forecast: '1.6%', previous: '1.6%' }, { d: 27, time: '13:30', title: 'US PCE inflation', type: 'econ', region: 'USD', impact: 'high', forecast: '2.7%', previous: '2.8%' }, ]; // Plain-English education for each kind of event: what it is, how it moves // markets, and what a bullish vs bearish reading looks like. Keyed by a kind // resolved from the event (see calEduFor). Mechanical events use `note` instead // of good/bad. Illustrative — not financial advice. const CAL_EDU = { fomcdec: { what: "The Federal Reserve sets the federal-funds target rate — the base interest rate that ripples out into every mortgage, loan and bond yield in the economy.", moves: "Rates are the single biggest macro lever. Cheaper money pushes investors toward stocks and lifts bond prices; pricier money does the opposite and strengthens the dollar. Markets react less to the move itself than to whether the Fed sounds more hawkish (rate-supportive) or dovish (cut-leaning) than expected.", good: { label: 'Dovish — a cut or softer tone', text: 'Cheaper money ahead. Equities, bonds and gold tend to rally and the dollar weakens. Bullish for risk assets.' }, bad: { label: 'Hawkish — a hike or "higher for longer"', text: 'Tighter conditions. Equities and bonds usually fall and the dollar firms. A headwind for risk assets.' }, }, fomcmin: { what: "The detailed minutes of the Fed's most recent meeting, published three weeks after the decision. They expose the debate behind the move and how individual members lean.", moves: "Traders comb the wording for clues to the next move. A hawkish tone (focused on inflation) lifts yields and the dollar; a dovish tone (open to cuts) supports stocks and bonds.", good: { label: 'Dovish tilt', text: 'Hints at easing ahead — supportive for equities and bonds, softer dollar.' }, bad: { label: 'Hawkish tilt', text: 'Signals rates stay high — pressure on equities, firmer yields and dollar.' }, }, cpi: { what: "The Consumer Price Index — the headline inflation gauge, tracking the change in prices across a basket of everyday goods and services.", moves: "Inflation dictates Fed policy. Hot CPI forces the Fed to keep rates high, which weighs on stocks and bonds; cooling CPI opens the door to cuts and fuels rallies. What matters is the surprise versus the forecast.", good: { label: 'Cooler than forecast', text: 'Eases rate-hike pressure — stocks and bonds rally, yields fall. Risk-on.' }, bad: { label: 'Hotter than forecast', text: 'Keeps rates higher for longer — stocks and bonds sell off, yields and the dollar rise. Risk-off.' }, }, pce: { what: "The Personal Consumption Expenditures price index — the Fed's preferred inflation measure, and the number it actually targets at 2%. Broader than CPI.", moves: "Because it's the Fed's chosen gauge, a surprise carries extra weight for the rate outlook. The market reaction mirrors CPI.", good: { label: 'Cooler than forecast', text: 'Strengthens the case for rate cuts — bullish for stocks and bonds, softer dollar.' }, bad: { label: 'Hotter than forecast', text: 'Argues for tighter policy — bearish for stocks and bonds, firmer dollar.' }, }, nfp: { what: "Non-farm payrolls — the monthly change in US jobs outside farming, released the first Friday of each month. The marquee read on the labour market.", moves: "It's a two-sided number. A strong jobs market is good for growth and earnings, but if it runs too hot it can push the Fed to hold rates higher for longer. Markets weigh 'strong economy' against 'higher rates' depending on the inflation backdrop.", good: { label: 'In-line, moderate growth', text: 'A healthy but not overheating jobs market — the "Goldilocks" zone. Generally supportive for stocks.' }, bad: { label: 'Extreme in either direction', text: 'Far too hot revives rate-hike fears (yields and dollar up, stocks down); far too weak revives recession fears. Both unsettle markets.' }, }, claims: { what: "Initial jobless claims — the number of people filing for unemployment benefits for the first time each week. A timely, high-frequency pulse on the labour market.", moves: "Being weekly, it's an early-warning signal. Rising claims hint the economy is cooling; falling claims show resilience. It usually moves markets only on a sharp deviation from trend.", good: { label: 'Low / falling claims', text: 'Tight labour market and economic strength — broadly supportive, though very low can feed rate worries.' }, bad: { label: 'High / rising claims', text: 'Labour market softening — raises slowdown risk, but can also lift rate-cut hopes.' }, }, gdp: { what: "Gross Domestic Product — the total value of everything an economy produces, reported as an annualised growth rate. The broadest scorecard of economic health.", moves: "Strong growth supports corporate earnings and risk appetite; weak or negative growth signals a slowdown or recession. Revisions to earlier estimates can move markets too.", good: { label: 'Above forecast', text: 'A robust economy — supportive for equities, though very strong prints can lift rate expectations.' }, bad: { label: 'Below forecast', text: 'A slowing economy — weighs on cyclical stocks; two negative quarters mark a recession.' }, }, earnings: { what: "A company's quarterly results — revenue, earnings per share (EPS) and forward guidance, all measured against analyst estimates.", moves: "Earnings drive the individual stock and often ripple out to its sector, suppliers and customers. The reaction hinges on the surprise versus consensus and — crucially — the guidance for the quarters ahead.", good: { label: 'Beat + strong guidance', text: 'Results top estimates and the outlook is raised — shares typically jump, lifting peers.' }, bad: { label: 'Miss + weak guidance', text: 'Results fall short or guidance is cut — shares usually drop, dragging the sector.' }, }, exdiv: { what: "The ex-dividend date — the first day a stock trades without the right to the upcoming dividend. To receive the payout you must own the shares before this date.", moves: "This is a mechanical event, not a signal. On the ex-date the share price typically opens lower by roughly the dividend amount, because new buyers no longer collect that payment.", note: "Not bullish or bearish in itself — it simply marks the cut-off for dividend eligibility. A steady, growing dividend is a sign of company health.", }, witching: { what: "Quadruple witching — the quarterly moment (third Friday of Mar/Jun/Sep/Dec) when stock-index futures, index options, single-stock options and single-stock futures all expire together.", moves: "The simultaneous expiry forces traders to roll or close huge positions, spiking volume and volatility — especially in the final hour. The moves are often technical and short-lived rather than driven by fundamentals.", note: "Expect choppier prices and heavier volume; the swings usually fade afterwards. Not a directional good/bad signal.", }, ipo: { what: "An initial public offering — the first time a private company sells shares to the public and lists on an exchange. The date shown is the expected pricing/debut, with the offer price and share count.", moves: "IPOs are a read on risk appetite. A hot market welcomes new listings with a first-day 'pop'; a nervous one sees deals priced low, postponed, or 'broken' (trading below the offer price). A wave of large IPOs often marks a confident — sometimes frothy — market.", good: { label: 'Strong demand · first-day pop', text: 'Oversubscribed and trading above the offer price — signals healthy risk appetite across growth names.' }, bad: { label: 'Weak demand · priced low or breaks', text: 'Cut price, delayed, or falling below offer — a sign investors are cautious on risk.' }, }, fda: { what: "An FDA advisory-committee meeting — a panel of independent experts reviews a drug or device and recommends whether the FDA should approve it. The vote isn't binding, but the agency usually follows it.", moves: "For the company involved these are binary, high-stakes events: a favourable review can send a biotech soaring, an unfavourable one can halve it. The ripple reaches partners, licensees and competitors developing rival treatments.", good: { label: 'Favourable vote / positive review', text: 'Clears a path to approval and revenue — typically a sharp move up for the drug\'s owner.' }, bad: { label: 'Negative vote / safety concerns', text: 'Approval in doubt — usually a steep drop, and a potential lift for competing therapies.' }, }, holiday: { what: "A US market holiday — the NYSE and Nasdaq are fully closed, or trading on a shortened session (an early close, often the day before or after the holiday).", moves: "No trading means no price discovery; volume around holidays is typically thin, which can exaggerate the moves that do happen just before and after.", note: "Purely mechanical — plan around it. Settlement timelines shift, and liquidity is lighter on the sessions either side.", }, }; // Resolve an event to its educational entry, falling back to a generic note. function calEduFor(e) { const t = (e.title || '').toLowerCase(); let key = null; if (e.type === 'earn') key = 'earnings'; else if (e.type === 'ipo') key = 'ipo'; else if (e.type === 'fda') key = 'fda'; else if (e.type === 'holiday') key = 'holiday'; else if (e.type === 'div') key = 'exdiv'; else if (t.includes('payroll') || t.includes('non-farm')) key = 'nfp'; else if (t.includes('jobless') || t.includes('claims')) key = 'claims'; else if (t.includes('cpi')) key = 'cpi'; else if (t.includes('pce')) key = 'pce'; else if (t.includes('gdp')) key = 'gdp'; else if (t.includes('rate decision')) key = 'fomcdec'; else if (t.includes('minutes')) key = 'fomcmin'; else if (t.includes('witching')) key = 'witching'; if (key) return CAL_EDU[key]; return { what: (CAL_TYPES[e.type] || {}).desc || 'A scheduled market event.', moves: 'Watch the Actual against the Forecast — a surprise versus consensus is what tends to move markets.', note: 'See the Legend for what each column and impact level means.' }; } const CAL_STEPS = [ { sel:'[data-tour="vm-cal-header"]', title:'Earnings, rates, and macro in one place.', body:'The Calendar surfaces every market-moving event for the week or month ahead — earnings releases, central-bank decisions, economic data, dividend dates, and structural market events. Each one is read against its historical context.' }, { sel:'[data-tour="vm-cal-filters"]', title:'Filter by event type.', body:'Narrow to Earnings, Economic, Central bank, Dividend, or Markets. The colour-coded dots on the grid update instantly. Switch between Month and List views from the right side. Legend explains every column and impact level.' }, { sel:'[data-tour="vm-cal-grid"]', title:'The month grid.', body:'Each day with events shows one coloured dot per event — the colour matches the type filter. Today is highlighted in teal. Navigate months with the arrows. Click any day to load its events in the panel on the right.' }, { sel:'[data-tour="vm-cal-day-panel"]', title:'Day panel — and the ⓘ button.', body:'Click a day to see its events here. Each event shows time, type badge, and a ticker link if it belongs to a company. Tap the ⓘ circle to open a full explainer: what the release is, how it moves markets, and what a bullish or bearish reading looks like.' }, ]; function Calendar({ go, isMobile }) { const [filter, setFilter] = useStateCal('all'); const [ym, setYm] = useStateCal({ y: CAL_YEAR, m: CAL_MONTH }); // month being viewed const [sel, setSel] = useStateCal(CAL_TODAY); const [view, setView] = useStateCal('month'); // 'month' grid | 'list' table const [legend, setLegend] = useStateCal(false); // legend / how-to-read popup const [eduEvent, setEduEvent] = useStateCal(null); // event whose "what is this?" info popup is open const [hoverRow, setHoverRow] = useStateCal(null); // list row index under the cursor (reveals the ⓘ) const [listAnchor, setListAnchor] = useStateCal(() => new Date(CAL_YEAR, CAL_MONTH, CAL_TODAY)); const [range, setRange] = useStateCal('month'); // list view window: 'week' | 'month' const [tutorialOpen, setTutorialOpen] = useStateCal(false); // Mock events are keyed by day only, so they belong to the seed month (June 2026). const isEventsMonth = ym.y === CAL_YEAR && ym.m === CAL_MONTH; const events = CAL_EVENTS.filter(e => filter === 'all' || e.type === filter); // Real earnings (Finnhub, cached) for whichever month the active view shows — // the month grid uses `ym`; the list view uses `listAnchor`. const activeY = view === 'list' ? listAnchor.getFullYear() : ym.y; const activeM = view === 'list' ? listAnchor.getMonth() : ym.m; const liveEarn = typeof useVMEarningsMonth === 'function' ? useVMEarningsMonth(activeY, activeM) : { events: [], live: false }; const liveCal = typeof useVMCalendars === 'function' ? useVMCalendars(activeY, activeM) : { events: [], live: false }; const liveAll = [...liveEarn.events, ...liveCal.events]; const liveEvents = liveAll.filter(e => filter === 'all' || e.type === filter); const dayEvents = (d) => { if (d == null) return []; const mock = isEventsMonth ? events.filter(e => e.d === d) : []; const live = liveEvents.filter(e => e.y === ym.y && e.m === ym.m && e.d === d); return [...mock, ...live]; }; const selEvents = dayEvents(sel); // List view: a navigable week / month window over the events (seeded in June 2026). let winStart, winEnd, rangeLabel; if (range === 'week') { winStart = new Date(listAnchor); winStart.setDate(listAnchor.getDate() - listAnchor.getDay()); winStart.setHours(0, 0, 0, 0); winEnd = new Date(winStart); winEnd.setDate(winStart.getDate() + 6); winEnd.setHours(23, 59, 59, 999); const fmt = (d) => d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); rangeLabel = `${fmt(winStart)} – ${fmt(winEnd)}, ${winEnd.getFullYear()}`; } else { winStart = new Date(listAnchor.getFullYear(), listAnchor.getMonth(), 1); winEnd = new Date(listAnchor.getFullYear(), listAnchor.getMonth() + 1, 0, 23, 59, 59, 999); rangeLabel = listAnchor.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); } const inRange = [ ...events.map(e => ({ ...e, date: new Date(CAL_YEAR, CAL_MONTH, e.d) })), ...liveEvents, // already carry a real `date` ] .filter(e => e.date >= winStart && e.date <= winEnd) .sort((a, b) => a.date - b.date || (a.time || '').localeCompare(b.time || '')); const seedToday = new Date(CAL_YEAR, CAL_MONTH, CAL_TODAY); const listHasToday = seedToday >= winStart && seedToday <= winEnd; const shiftList = (delta) => setListAnchor(prev => { const x = new Date(prev); if (range === 'week') x.setDate(x.getDate() + delta * 7); else x.setMonth(x.getMonth() + delta); return x; }); const monthLabel = new Date(ym.y, ym.m, 1).toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); const firstDow = new Date(ym.y, ym.m, 1).getDay(); // 0=Sun const daysIn = new Date(ym.y, ym.m + 1, 0).getDate(); const cells = []; for (let i = 0; i < firstDow; i++) cells.push(null); for (let d = 1; d <= daysIn; d++) cells.push(d); const shiftMonth = (delta) => { setYm(({ y, m }) => { let nm = m + delta, ny = y; if (nm < 0) { nm = 11; ny--; } if (nm > 11) { nm = 0; ny++; } return { y: ny, m: nm }; }); setSel(null); }; const tutBtn = { display:'inline-flex', alignItems:'center', gap:6, fontFamily:VM.mono, fontSize:10, letterSpacing:'0.04em', textTransform:'uppercase', padding:'4px 11px', borderRadius:5, border:`1px solid ${VM.terra}`, background:'transparent', color:VM.terra, cursor:'pointer', }; return (
Calendar{(liveEarn.live || liveCal.live) ? ` · ${liveEvents.length} live events this month` : ` · ${CAL_EVENTS.length} events`}

Calendar.

Earnings, economic releases and central-bank decisions — the week ahead, read against history.

{/* type filter + view toggle */}
setFilter('all')}>All {Object.entries(CAL_TYPES).map(([k, t]) => ( setFilter(k)}> {t.label} ))}
{[['month', 'Month'], ['list', 'List']].map(([v, lbl]) => ( ))}
{view === 'month' && (
{monthLabel}
{!isEventsMonth && ( )} {[['‹', -1, 'Previous month'], ['›', 1, 'Next month']].map(([sym, delta, title]) => ( ))}
{['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(d => {d})} {cells.map((d, i) => { if (!d) return
; const evs = dayEvents(d); const isToday = isEventsMonth && d === CAL_TODAY, isSel = d === sel; return (
setSel(d)} style={{ minHeight: isMobile ? 44 : 56, padding: '5px 6px', borderRadius: 8, cursor: 'pointer', background: isSel ? VM.forest : (isToday ? VM.tealTint : 'transparent'), border: `1px solid ${isSel ? VM.forest : (isToday ? VM.tealTint2 : 'transparent')}`, transition: 'background .12s' }}>
{d}
{evs.slice(0, 4).map((e, j) => )}
); })}
{sel == null ? monthLabel : `${sel} ${monthLabel}`}
{sel == null &&
Pick a day to see its events.
} {sel != null && selEvents.length === 0 &&
No events on this day.
} {selEvents.map((e, i) => { const t = CAL_TYPES[e.type]; return (
{e.title} setEduEvent(e)} style={{ fontSize: 15, color: VM.teal, cursor: 'pointer', flexShrink: 0 }}>
{e.time} {t.label} {e.ticker && { const c = VM_COMPANIES.find(x => x.ticker === e.ticker); go('dashboard', c || { ticker: e.ticker, name: e.ticker, cap: '—' }); }}>{e.ticker} →}
); })}
)} {/* list (table) view — economic-calendar style */} {view === 'list' && (
{rangeLabel}
{!listHasToday && ( )}
{[['week', 'Week'], ['month', 'Month']].map(([r, lbl]) => ( ))}
{[['‹', -1, 'Previous'], ['›', 1, 'Next']].map(([sym, delta, title]) => ( ))}
{['Date', 'Time', 'Region', 'Impact', 'Event', 'Actual', 'Forecast', 'Previous'].map((h, i) => ( ))} {inRange.length === 0 && ( )} {inRange.map((e, i) => { const firstOfDay = i === 0 || inRange[i - 1].d !== e.d; const t = CAL_TYPES[e.type]; const imp = CAL_IMPACT[e.impact] || CAL_IMPACT.low; const wd = e.date.toLocaleDateString('en-GB', { weekday: 'short' }); return ( setHoverRow(i)} onMouseLeave={() => setHoverRow(h => h === i ? null : h)} style={{ borderTop: `1px solid ${firstOfDay ? VM.borderSoft : VM.borderHair}`, background: e.d === CAL_TODAY ? VM.tealTint : (hoverRow === i ? VM.paperWarm : 'transparent') }}> ); })}
= 5 ? 'right' : 'left', padding: '9px 14px', fontFamily: VM.mono, fontSize: 9.5, fontWeight: 500, color: VM.ink3, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>{h}
No events in this {range}.
{firstOfDay ? `${wd} · ${e.d}` : ''} {e.time} {e.region || '—'} {imp.label} {e.title} {e.ticker && { const c = VM_COMPANIES.find(x => x.ticker === e.ticker); go('dashboard', c || { ticker: e.ticker, name: e.ticker, cap: '—' }); }}>{e.ticker} →} setEduEvent(e)} style={{ fontSize: 15, color: VM.teal, cursor: 'pointer', flexShrink: 0, opacity: (isMobile || hoverRow === i) ? 1 : 0, transition: 'opacity .12s' }}> — {e.forecast || '—'} {e.previous || '—'}
Actual posts on release · forecast vs previous · illustrative mock data
)} {legend && setLegend(false)} />} {eduEvent && setEduEvent(null)} />} {tutorialOpen && setTutorialOpen(false)} />}
); } // "What is this event?" — an educational popup explaining the event, how it // moves markets, and what a bullish vs bearish reading looks like. function CalEduModal({ e, onClose }) { React.useEffect(() => { const onKey = (ev) => { if (ev.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); const edu = calEduFor(e); const t = CAL_TYPES[e.type] || {}; const imp = CAL_IMPACT[e.impact] || CAL_IMPACT.low; return (
ev.stopPropagation()} style={{ width: '100%', maxWidth: 540, maxHeight: '85vh', overflowY: 'auto', background: VM.paper, border: `1px solid ${VM.border}`, borderRadius: 14, boxShadow: '0 24px 60px rgba(31,29,26,0.3)' }}>
{e.title}
{t.label} {imp.label} impact {e.region && {e.region}}

{edu.what}

{edu.moves}

{imp.label} impact. {imp.desc}
{edu.good && edu.bad ? (
Supportive · {edu.good.label}
{edu.good.text}
Pressure · {edu.bad.label}
{edu.bad.text}
) : edu.note ? (
What to watch
{edu.note}
) : null} Educational summary · illustrative, not financial advice
); } // Legend / how-to-read popup for the calendar (columns, impact, event types). function CalLegendModal({ onClose }) { React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 560, maxHeight: '85vh', overflowY: 'auto', background: VM.paper, border: `1px solid ${VM.border}`, borderRadius: 14, boxShadow: '0 24px 60px rgba(31,29,26,0.3)' }}>
Legend & how to read it.
{CAL_COL_HELP.map(([k, d]) => (
{k} {d}
))}
How to read it: compare Actual against Forecast — a beat or miss versus consensus drives most of the move; Previous shows the trend.
{Object.values(CAL_IMPACT).map(im => (
{im.label}
{im.desc}
))} {Object.values(CAL_TYPES).map(t => (
{t.label}
{t.desc}
))}
); } Object.assign(window, { Calendar });