Scheduling UI - correct the discrepancy between the expected UI and the real one

[ayanimea]

🗓 Ticket: Fix Schedule UI Layering & Time-of-Day Bands

Summary

The current Schedule implementation does not comply with schedule-ui-spec.md.

Time-of-day bands are either:

• Not rendered, or
• Visually flattened into a single background gradient,
• Or overridden by FullCalendar row/background styling.

This ticket restores proper semantic layering.

---

Problem Statement

Current Issues

1. Time-of-day bands are not rendered as a separate background layer.
2. FullCalendar row/grid backgrounds visually dominate.
3. Background gradient is continuous instead of discrete semantic zones.
4. Layering order is incorrect (background/grid merge).

Expected Behavior

The schedule must have 4 visual layers (bottom → top):

1. Time-of-day bands (semantic orientation layer)
2. Grid (hour structure only)
3. Events
4. UI overlays (current time, etc.)

Bands must be:

• Discrete zones (morning / afternoon / evening / night)
• Absolutely positioned
• Not applied to rows
• Not implemented as a single global gradient

---

Required Changes

1️⃣ Render TimeBands as Separate Layer

In Schedule.jsx, wrap FullCalendar with a positioned container:

<div className="schedule-container">
  {(view === 'day' || view === 'week') && <TimeBands />}
  <FullCalendar ... />
</div>

---

2️⃣ Replace TimeBands Implementation

TimeBands must render absolute layers only.

See TimeBands.fixed.js.txt (attached).

TimeBands.fixed.jsx.txt

---

3️⃣ Update CSS: Remove Row Backgrounds

In fullcalendar-custom.css, remove background coloring:

.fc-timegrid-slots td,
.fc-timegrid-slots tr,
.fc-timegrid-slot {
  background: none !important;
}

Do NOT apply gradients to grid rows.

---

4️⃣ Add Absolute Band Layer CSS

See TimeBands.fixed.css (attached).

TimeBands.fixed.css

---

Acceptance Criteria

• Morning / afternoon / evening / night are perceptible without reading hour labels.
• Converting to grayscale still shows luminance shifts at 12:00 and 18:00.
• No row has background-color applied.
• Removing TimeBands removes banding entirely (proves separation).
• Events visually dominate background.

---

Copilot Enforcement Reminder

See:

• schedule-ui-spec.md
• COPILOT_SCHEDULE_ONLY.md

This UI must comply with semantic layering rules.