About this set
A single-day calendar from 08:00 to 19:00 with hour rows, four events and a red line marking the current time. Two of the events overlap, a design review and a one-to-one, and sit side by side in half-width columns, which is the case most day views get wrong. Use it for a personal planner, a booking back office or the day panel of a larger calendar. Each event is a list item positioned from two custom properties, –from (hours after 08:00) and –dur (length in hours), plus –col and –w for overlaps, so moving an event means changing numbers rather than pixels. The events form an ordered list named after the day, and each one states its start and end time in text, so the schedule reads correctly without the grid. A few lines of script read the real clock to place the now-line and update its label, and hide it outside the hours the grid shows. Event colours were darkened so the white text on them reaches 4.5:1. The Bootstrap version uses a card, list and position utilities; the Tailwind version positions events with calc() arbitrary values reading the same properties.
What’s included
- Events placed by --from and --dur custom properties
- Side-by-side layout for overlapping events
- Live now-line placed from the real clock, hidden out of hours
- Event colours darkened for 4.5:1 white text
- Plain CSS, Bootstrap and Tailwind versions of the same design
Accessibility
Events are an ordered list labelled with the date, and each item includes its time range as text; the hour labels are decorative and hidden from assistive tech. The now-line carries visually hidden "Now" text before its time. There are no interactive controls and nothing animates.
Customise it
Change --dv-row (hour height), --dv-muted and --dv-now on .dayv, and the --c colour on each event. If you change the hour range, update START and HOURS in the script and the number of grid rows. In Tailwind edit the --color-dv-* theme colours.
