Laying Out Calendar Events

This is a quick grid demo for laying out events for a calendar week. Requires display:contents so this'll only work in Chrome (if you have experimental features turned on) and Firefox. See Can I Use for more.

Check out the accompanying YouTube video

Added by James Finley: Switched from data attributes and attribute selectors to CSS Custom Properties (Variables).

Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday

1

Class
Interview

2

Dinner

3

School

4

Meeting

5

6

7