feat(calendar): working hours shading #62

New issue

Closed

opened 2026-03-23 22:11:24 +00:00 by barrettruth · 2 comments

barrettruth commented

2026-03-23 22:11:24 +00:00

Problem

The calendar time grid treats all 24 hours equally. Non-working hours (e.g., before 8am, after 6pm) have the same visual weight as the active workday, making the grid harder to scan.

Remaining scope

All other time grid features (click-to-create, drag-to-create, drag-to-move, drag-to-resize) are fully implemented. Only working hours shading remains.

Solution

User setting for workStartHour/workEndHour
Semi-transparent overlay or dimmed background on non-working hour rows
Sensible default (e.g., 8am–6pm)

## Problem The calendar time grid treats all 24 hours equally. Non-working hours (e.g., before 8am, after 6pm) have the same visual weight as the active workday, making the grid harder to scan. ## Remaining scope All other time grid features (click-to-create, drag-to-create, drag-to-move, drag-to-resize) are fully implemented. Only working hours shading remains. ## Solution - User setting for `workStartHour`/`workEndHour` - Semi-transparent overlay or dimmed background on non-working hour rows - Sensible default (e.g., 8am–6pm)

barrettruth commented

2026-03-25 21:49:39 +00:00

Progress update: core time grid is implemented in src/components/calendar/week-time-grid.tsx with 24h grid, EventBlock rendering, overlap layout, hour cursor, military time labels, and click-to-create at 15-min snap. Schema fields (startAt, endAt, allDay, timezone) are in place.

Still missing from the original scope:

Click-and-drag to create timed events (no @dnd-kit integration)
Drag-and-drop to move events between time slots
Drag-to-resize event duration
Working hours shading (dim non-working hours)
Multi-day/spanning events rendered across day boundaries

Progress update: core time grid is implemented in `src/components/calendar/week-time-grid.tsx` with 24h grid, `EventBlock` rendering, overlap layout, hour cursor, military time labels, and click-to-create at 15-min snap. Schema fields (`startAt`, `endAt`, `allDay`, `timezone`) are in place. Still missing from the original scope: - Click-and-drag to create timed events (no `@dnd-kit` integration) - Drag-and-drop to move events between time slots - Drag-to-resize event duration - Working hours shading (dim non-working hours) - Multi-day/spanning events rendered across day boundaries

barrettruth commented

2026-03-29 04:57:07 +00:00

All time grid features (click-to-create, drag-to-create, drag-to-move, drag-to-resize) are fully implemented. Working hours shading removed from scope.