Skip to content

Calendar widget: add Day timeline + Agenda list views (currently month + week only) #37

@prakashUXtech

Description

@prakashUXtech

Context

src/lib/widgets/data/Calendar.svelte currently ships month + week views. Operator-surface calendar UIs typically expose four: Month / Week / Day / Agenda.

Surfaced during paw-enterprise#220 (/calendar operator-surface route). The Calendar route needed all four views so it composed a custom grid using shadcn-svelte primitives instead of reusing this widget. That works but means the Day timeline + Agenda list logic now lives in paw-enterprise rather than here where it belongs.

What to add

  1. Day view — single-day vertical timeline. Time axis on the left (typically 6am–10pm with collapsible early/late hours), event blocks positioned and sized by start/end times. Multi-day events shown as banners across the top.
  2. Agenda view — chronological list grouped by day. Denser than the visual grid; useful for scanning. Each day shows its date header, then events in order with time + title + location + attendees.

API

Extend the existing view prop:

type CalendarView = 'month' | 'week' | 'day' | 'agenda';

Existing events/onDateClick/etc. props should work unchanged. Add currentDate so Day view knows which day to render.

Design considerations

  • Day view needs a current-time indicator (horizontal line moving down the timeline)
  • Agenda needs an empty state ("No events in this range")
  • Both should respect the existing theme tokens and density modes
  • Accessibility: keyboard navigation across events, screen-reader friendly group headers in Agenda

Acceptance

  • view: 'day' renders a single-day timeline with current-time indicator
  • view: 'agenda' renders a chronological grouped list
  • All four views share the same event-click + date-click handlers
  • Tests for both new views (mirror Kanban.test.ts shape)
  • No regressions in month/week views

References

  • Triggering PR: qbtrix/paw-enterprise#220
  • Related: pocketpaw#1132 (backend Calendar module) — the backend supports all four views; the widget should too

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions