Mentor Availability Profile Block for React

Edit the constants at the top. UTC_SLOTS lists the mentor's times in UTC for each weekday, TAKEN the ones already booked, and ZONES the zones a mentee can pick, each as an offset in minutes. KINDS lists the session types with their length and price. AS_OF is the day the page treats as today. The days with times, the converted times and the counts are all worked out from those, so nothing is typed twice. In a real app read the slots from your scheduler and let the mentee's own zone fill the menu.

Each slot is an instant in UTC. For a zone the block adds its offset and files the result under the mentee's calendar day, so a 17:00 UTC slot on a Tuesday is 02:00 on Wednesday in UTC+9, and a 07:00 UTC slot is 23:00 the day before in UTC−8. The chip shows the mentee's time with the mentor's under it, and adds her weekday when it differs. Offsets are fixed, with no daylight saving, so use your own time zone library for real dates.

Nothing leaves the page. With a time picked it says Requested in this demo, nothing was sent, in the status line. Without one it says to pick a time first and moves focus to the times. The button is marked aria-disabled rather than disabled until a time is picked, so it keeps its place. To make it real, send the instant, the kind of session and the mentee's zone to your own API in the submit handler.

It is a native table with a caption and column headings, and every day is a button named with its full date and how many times it has ("Tuesday 13 October, 3 times"), pressed when it is the chosen day. Days that have passed are marked unavailable. The grid is one tab stop; arrow keys move between days. A day with no times can still be picked, and the times area says so. The status line is a polite live region present from the start. On Base UI the chosen time is a pressed toggle.

The grid stays seven columns wide, the times wrap three across, and the session types and the summary stack under them. The grid is always six weeks tall, so changing the month moves nothing. The foot stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint. The grid keeps its left-to-right order in a right-to-left layout.