Confirm?

Are you sure you want to proceed?
G
Graeme Messina

Timeline Calendar Roster

Clone & Customize via AI

MudBlazor Roster Timeline presents a weekly horizontal schedule using MudTimeline and MudCard avatars. It includes week navigation, role chips, and sample data generation for quick preview.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Weekly horizontal timeline view showing seven days with left/right week navigation. - Day columns rendered as MudTimelineItem with per-day lists of scheduled staff. - Entry cards using MudCard, MudAvatar/MudImage and MudChip to show name and role. - Sample data generator to populate three weeks of roster entries. - Basic responsive behavior via overflow-x for horizontal scrolling. ## Key components - MudTimeline, MudTimelineItem - MudPaper, MudGrid, MudIconButton - MudCard, MudCardHeader, MudCardContent - MudAvatar, MudImage, MudChip, MudStack - MudText, MudContainer ## How it works - Component keeps a private _currentDate and computes a week range string via UpdateWeekDateRange. - GetDaysOfWeek enumerates seven consecutive dates from start-of-week (Monday) and each day is rendered in a foreach. - GetRosterForDay filters an in-memory List<RosterEntryModel> populated by GenerateSampleRoster. - Navigation buttons call GoToPreviousWeek / GoToNextWeek to shift _currentDate and refresh the header range. - UI is data-driven with simple synchronous methods and foreach rendering; no external services or EditForm-based validation are present. ## Styling - Uses MudBlazor components and utility classes (pa-4, px-2, d-flex, align-center) for spacing and layout. - Inline styles (overflow-x: auto; white-space: nowrap; min-width) control horizontal scrolling and timeline cell sizing. - Timeline is horizontal (TimelineOrientation.Horizontal) and uses MudBlazor Color enums for highlighting today. - Consider responsive limits when many items render; current implementation relies on horizontal scroll rather than virtualized lists. ## Reuse steps 1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor or component files. 3. Copy RosterEntryModel and the RosterTimeline component files into a Blazor project and add the route wrapper (RosterTimelineDemo.razor). 4. Replace GenerateSampleRoster with a service call that returns real schedule data and inject the service (e.g., IRosterService) into the component. 5. Optionally add virtualization, tooltips, dialogs or drag/drop for shift editing; adjust CSS or MudTheme for branding. ## Limitations & next steps - This is a single component generated by Instruct UI with in-memory sample data; real apps must wire API services, authentication, and persistence. - No forms or EditForm validation are included; adding shift editing requires dialog components, server-side updates, and optimistic UI handling. - Performance may degrade with large datasets; consider virtualization or pagination for many entries. - Accessibility and keyboard navigation around the timeline and cards need review and potential ARIA enhancements.