HTML + CSSFilters
Weekday activity heatmap filter
A twelve-week activity grid where you tick which days count and their rows light up in a wave.
Settings
16px
1x
Code
<fieldset class="uvq05-hm"><legend>Active days</legend><div class="gd"><label><input type="checkbox" checked><span class="d">Monday</span><span class="cs" aria-hidden="true"><i class="l0" style="--n:0"></i><i class="l3" style="--n:1"></i><i class="l0" style="--n:2"></i><i class="l1" style="--n:3"></i><i class="l3" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l2" style="--n:9"></i><i class="l0" style="--n:10"></i><i class="l2" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Tuesday</span><span class="cs" aria-hidden="true"><i class="l2" style="--n:0"></i><i class="l0" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l0" style="--n:3"></i><i class="l0" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l0" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l2" style="--n:9"></i><i class="l1" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Wednesday</span><span class="cs" aria-hidden="true"><i class="l1" style="--n:0"></i><i class="l0" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l0" style="--n:3"></i><i class="l0" style="--n:4"></i><i class="l1" style="--n:5"></i><i class="l0" style="--n:6"></i><i class="l0" style="--n:7"></i><i class="l3" style="--n:8"></i><i class="l1" style="--n:9"></i><i class="l3" style="--n:10"></i><i class="l3" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Thursday</span><span class="cs" aria-hidden="true"><i class="l0" style="--n:0"></i><i class="l1" style="--n:1"></i><i class="l2" style="--n:2"></i><i class="l3" style="--n:3"></i><i class="l3" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l2" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l2" style="--n:8"></i><i class="l1" style="--n:9"></i><i class="l2" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox" checked><span class="d">Friday</span><span class="cs" aria-hidden="true"><i class="l2" style="--n:0"></i><i class="l3" style="--n:1"></i><i class="l3" style="--n:2"></i><i class="l4" style="--n:3"></i><i class="l4" style="--n:4"></i><i class="l3" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l1" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l2" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox"><span class="d">Saturday</span><span class="cs" aria-hidden="true"><i class="l3" style="--n:0"></i><i class="l2" style="--n:1"></i><i class="l1" style="--n:2"></i><i class="l1" style="--n:3"></i><i class="l4" style="--n:4"></i><i class="l3" style="--n:5"></i><i class="l3" style="--n:6"></i><i class="l3" style="--n:7"></i><i class="l2" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l3" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label><label><input type="checkbox"><span class="d">Sunday</span><span class="cs" aria-hidden="true"><i class="l1" style="--n:0"></i><i class="l2" style="--n:1"></i><i class="l2" style="--n:2"></i><i class="l4" style="--n:3"></i><i class="l2" style="--n:4"></i><i class="l2" style="--n:5"></i><i class="l1" style="--n:6"></i><i class="l2" style="--n:7"></i><i class="l4" style="--n:8"></i><i class="l4" style="--n:9"></i><i class="l4" style="--n:10"></i><i class="l1" style="--n:11"></i></span></label></div><div class="ft"><button type="button" data-p="0">Weekdays</button><button type="button" data-p="1">Weekend</button><p class="ct"><span class="n"></span> <span>of 7 days</span></p></div></fieldset>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
See all FiltersWhere to use it
Analytics dashboards, gyms and booking tools often need to filter by weekday, and seeing the data while you choose helps. Each row is a checkbox label holding twelve cells whose shade comes from the activity level, and switching a day on colours its row with a staggered wave. Two presets select weekdays or the weekend.
The first colour covers low and medium levels and the second marks the busiest cells, so a teal and lime pair reads well. Feed real counts into the level classes, and keep the counter next to the presets.