Confirm?

Are you sure you want to proceed?
S
Steve Wasielewski

Hotel Room Scheduler

Clone & Customize via AI

Blazor Room Scheduler displays weekly room availability in a Bootstrap table with a modal booking form and EditForm validation. Uses @bind and JS interop for modal control.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Weekly scheduler grid showing rooms as rows and seven-day columns. - Week navigation (previous/next) and a central week range display. - Clickable cells that open a modal to add or edit a booking. - Modal booking form with data annotations validation and delete action. - In-memory sample data for rooms and bookings populated in OnInitialized. ## Key components - EditForm, DataAnnotationsValidator, ValidationMessage - InputText, InputSelect, InputDate - HTML table (.table, .table-bordered) used as the scheduler grid - JS interop calls (showModal, hideModal) to control Bootstrap modal - Custom component BookingModal referenced via @ref - View models: RoomViewModel, BookingViewModel (with DataAnnotations) ## How it works - The page computes the current week start (Monday) and renders seven header columns. - Bookings are matched per room/date via GetBookingForRoomAndDate and rendered as a single booking cell when date falls between CheckInDate (inclusive) and CheckOutDate (exclusive). - Cell clicks call HandleCellClick to create a new BookingViewModel or open the existing booking in BookingModal via its Show method. - The modal uses EditForm and DataAnnotationsValidator; HandleSave enforces CheckOutDate > CheckInDate and invokes parent callbacks (OnSave/OnDelete). - State is managed in-page with lists for rooms and bookings; StateHasChanged is called after mutations. ## Styling - Uses Bootstrap utility and component classes (container-fluid, row, col-md-6, btn, table, form-control, modal classes). - Scoped CSS (SchedulerPage.razor.css) customizes cell height, hover effects, booking-cell layout and visual treatment (box-shadow, border-radius). - Responsive behavior relies on Bootstrap table responsiveness (table-responsive) and grid classes; desktop UX targets table layout. ## Reuse steps 1. Add a Blazor project and include Bootstrap (CSS + JS) and FontAwesome if icons are desired. 2. Copy the Razor components (SchedulerPage.razor, BookingModal.razor), the models file, and the scoped CSS into the project. 3. Add the JS modal helpers (showModal/hideModal) to wwwroot and register them in index.html/_Host.cshtml. 4. Ensure namespaces are available where components are placed and register any services if moving from in-memory to API calls. 5. Replace the sample LoadSampleData with API or database calls; validate date/time and concurrency server-side. ## Limitations & next steps - This is a single-page UI with in-memory sample data; persistence, concurrency, and validation rules must be implemented server-side. - No booking overlap prevention or multi-day rendering beyond a single cell per day; extend logic to render multi-day spans visually across cells if needed. - Accessibility and keyboard navigation for the table and modal should be improved for production. - Timezone handling, localization for dates, and paging of long room lists are not implemented. - Consider extracting scheduler logic into a reusable component and adding unit tests and API integration for real data.