DayView

Full event list for a specific day with optional weather forecast. Events are grouped by type and linkable events have detail pages.

Installation

import { DayView } from '@happyvertical/smrt-svelte';

Basic Usage

Display events for a specific date.

<DayView date={new Date()} events={events} />

With Weather

Include weather forecast in the header.

<DayView
  date={new Date()}
  events={events}
  forecast={{ icon: '☀️', high: 5, low: -3 }}
/>

Empty State

When no events are scheduled.

<DayView date={new Date()} events={[]} />

Event Grouping

Events are automatically grouped by type (games, meetings, events).

<DayView
  date={date}
  events={[
    { type: 'game', name: 'Hockey Game', startTime: '6:00 PM' },
    { type: 'game', name: 'Basketball Game', startTime: '8:00 PM' },
    { type: 'meeting', name: 'Council Meeting', startTime: '7:00 PM' }
  ]}
/>

Custom Calendar URL

Change the back link destination.

<DayView date={date} events={events} calendarUrl="/schedule" />

Props

TypeScript

import { DayView } from '@happyvertical/smrt-svelte';

interface DayEventDetail {
  type: 'game' | 'meeting' | 'event';
  name: string;
  startTime: string;
  venue?: string;
  slug?: string;
  councilSlug?: string;
}

interface DayForecast {
  icon: string;  // Weather emoji
  high: number;  // Temperature high
  low: number;   // Temperature low
}

interface Props {
  date: Date;
  events?: DayEventDetail[] | null;
  forecast?: DayForecast | null;
  calendarUrl?: string;
  onEventClick?: (eventType: string, eventName: string) => void;
}

Event Links

Events with slugs automatically link to detail pages:

• Games: /sports/hockey/games/{slug}/
• Meetings: /meetings/{councilSlug}/{slug}/
• Events: No detail pages (display only)