Edit Week View

Name

Also known as (comma separated)

Brief definition Calendar showing a week.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "weekLabel", "type": "text", "label": "Week label", "default": "17–23 August 2026" }, { "id": "density", "type": "select", "label": "Density", "default": "Comfortable", "options": [ "Comfortable", "Compact" ] }, { "id": "showWeekend", "type": "toggle", "label": "Show weekend columns", "default": true }, { "id": "highlightToday", "type": "toggle", "label": "Highlight today", "default": true }, { "id": "accent", "type": "color", "label": "Event colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<table class=\"wv\" data-density=\"{{density}}\" data-weekend=\"{{showWeekend}}\" data-highlight=\"{{highlightToday}}\">\n <caption class=\"wv__caption\">{{weekLabel}}</caption>\n <thead>\n <tr>\n <th scope=\"col\" class=\"wv__th wv__th--time\">Time</th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"false\">Mon <time datetime=\"2026-08-17\">17</time></th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"true\">Tue <time datetime=\"2026-08-18\">18</time></th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"false\">Wed <time datetime=\"2026-08-19\">19</time></th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"false\">Thu <time datetime=\"2026-08-20\">20</time></th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"false\">Fri <time datetime=\"2026-08-21\">21</time></th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"false\">Sat <time datetime=\"2026-08-22\">22</time></th>\n <th scope=\"col\" class=\"wv__th\" data-today=\"false\">Sun <time datetime=\"2026-08-23\">23</time></th>\n </tr>\n </thead>\n <tbody>\n <tr><th scope=\"row\" class=\"wv__row-th\">9:00</th>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"true\"><span class=\"wv__ev\" style=\"background:{{accent}};\">Standup</span></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n </tr>\n <tr><th scope=\"row\" class=\"wv__row-th\">10:00</th>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"true\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"><span class=\"wv__ev\" style=\"background:{{accent}};\">Design review</span></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n </tr>\n <tr><th scope=\"row\" class=\"wv__row-th\">11:00</th>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"true\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"><span class=\"wv__ev\" style=\"background:{{accent}};\">Client call</span></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n <td class=\"wv__td\" data-today=\"false\"></td>\n </tr>\n </tbody>\n</table>\n<style>\n.wv { border-collapse: collapse; width: 560px; font: 12px/1.3 system-ui, sans-serif; color: #241430; background: #FAF7F2; table-layout: fixed; }\n.wv__caption { text-align: left; font-weight: 700; font-size: 14px; padding-bottom: 10px; }\n.wv th, .wv td { border: 1px solid #24143014; padding: 8px 4px; text-align: center; }\n.wv__th { font-weight: 600; color: #24143099; }\n.wv__th--time { width: 50px; }\n.wv__row-th { font-weight: 500; color: #24143099; font-variant-numeric: tabular-nums; }\n.wv[data-density=\"Compact\"] th, .wv[data-density=\"Compact\"] td { padding: 4px 4px; }\n.wv[data-highlight=\"true\"] th[data-today=\"true\"] { font-weight: 800; color: #241430; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }\n.wv[data-highlight=\"true\"] td[data-today=\"true\"] { background: #24143008; }\n.wv[data-weekend=\"false\"] th:nth-last-child(2), .wv[data-weekend=\"false\"] td:nth-last-child(2),\n.wv[data-weekend=\"false\"] th:last-child, .wv[data-weekend=\"false\"] td:last-child { display: none; }\n.wv__ev { display: block; border-radius: 5px; padding: 3px 5px; font-weight: 700; color: #14351f; font-size: 11px; }\n</style>", "tailwind": "<table class=\"border-collapse w-[560px] font-sans text-xs text-[#241430] bg-[#FAF7F2] wv-tw table-fixed\" data-density=\"{{density}}\" data-weekend=\"{{showWeekend}}\" data-highlight=\"{{highlightToday}}\">\n <caption class=\"text-left font-bold text-sm pb-2.5\">{{weekLabel}}</caption>\n <thead>\n <tr>\n <th scope=\"col\" class=\"w-[50px] font-semibold text-[#241430]/60 border border-[#24143014] p-2 text-center\">Time</th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"false\">Mon <time datetime=\"2026-08-17\">17</time></th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"true\">Tue <time datetime=\"2026-08-18\">18</time></th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"false\">Wed <time datetime=\"2026-08-19\">19</time></th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"false\">Thu <time datetime=\"2026-08-20\">20</time></th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"false\">Fri <time datetime=\"2026-08-21\">21</time></th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"false\">Sat <time datetime=\"2026-08-22\">22</time></th>\n <th scope=\"col\" class=\"wvtw-th\" data-today=\"false\">Sun <time datetime=\"2026-08-23\">23</time></th>\n </tr>\n </thead>\n <tbody>\n <tr><th scope=\"row\" class=\"wvtw-row-th\">9:00</th>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"true\"><span class=\"wvtw-ev\" style=\"background:{{accent}};\">Standup</span></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n </tr>\n <tr><th scope=\"row\" class=\"wvtw-row-th\">10:00</th>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"true\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"><span class=\"wvtw-ev\" style=\"background:{{accent}};\">Design review</span></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n </tr>\n <tr><th scope=\"row\" class=\"wvtw-row-th\">11:00</th>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"true\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"><span class=\"wvtw-ev\" style=\"background:{{accent}};\">Client call</span></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n <td class=\"wvtw-td\" data-today=\"false\"></td>\n </tr>\n </tbody>\n</table>\n<style>\n.wv-tw th, .wv-tw td { border: 1px solid #24143014; padding: 8px 4px; text-align: center; }\n.wvtw-th { font-weight: 600; color: #24143099; }\n.wvtw-row-th { font-weight: 500; color: #24143099; font-variant-numeric: tabular-nums; }\n.wv-tw[data-density=\"Compact\"] th, .wv-tw[data-density=\"Compact\"] td { padding-top: 4px; padding-bottom: 4px; }\n.wv-tw[data-highlight=\"true\"] th[data-today=\"true\"] { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }\n.wv-tw[data-highlight=\"true\"] td[data-today=\"true\"] { background: #24143008; }\n.wv-tw[data-weekend=\"false\"] th:nth-last-child(2), .wv-tw[data-weekend=\"false\"] td:nth-last-child(2),\n.wv-tw[data-weekend=\"false\"] th:last-child, .wv-tw[data-weekend=\"false\"] td:last-child { display: none; }\n.wvtw-ev { display: block; border-radius: 5px; padding: 3px 5px; font-weight: 700; color: #14351f; font-size: 11px; }\n</style>", "react": "export function WeekView({\n weekLabel = \"{{weekLabel}}\",\n density = \"{{density}}\",\n showWeekend = {{showWeekend}},\n highlightToday = {{highlightToday}},\n accent = \"{{accent}}\",\n}) {\n const TODAY = \"2026-08-18\";\n const days = [{ wd: \"Mon\", num: 17, iso: \"2026-08-17\" }, { wd: \"Tue\", num: 18, iso: \"2026-08-18\" }, { wd: \"Wed\", num: 19, iso: \"2026-08-19\" }, { wd: \"Thu\", num: 20, iso: \"2026-08-20\" }, { wd: \"Fri\", num: 21, iso: \"2026-08-21\" }, { wd: \"Sat\", num: 22, iso: \"2026-08-22\" }, { wd: \"Sun\", num: 23, iso: \"2026-08-23\" }];\n const hours = [\"9:00\", \"10:00\", \"11:00\"];\n const events = [{ hi: 0, di: 1, label: \"Standup\" }, { hi: 1, di: 3, label: \"Design review\" }, { hi: 2, di: 4, label: \"Client call\" }];\n const visibleDays = showWeekend ? days : days.slice(0, 5);\n const pad = density === \"Compact\" ? \"4px\" : \"8px 4px\";\n const cellBorder = { border: \"1px solid #24143014\", padding: pad, textAlign: \"center\" };\n return (\n <table style={{ borderCollapse: \"collapse\", width: 560, font: \"12px/1.3 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", tableLayout: \"fixed\" }}>\n <caption style={{ textAlign: \"left\", fontWeight: 700, fontSize: 14, paddingBottom: 10 }}>{weekLabel}</caption>\n <thead>\n <tr>\n <th scope=\"col\" style={{ ...cellBorder, width: 50, fontWeight: 600, color: \"#24143099\" }}>Time</th>\n {visibleDays.map((d) => {\n const isToday = d.iso === TODAY;\n return (\n <th key={d.iso} scope=\"col\" style={{ ...cellBorder, fontWeight: highlightToday && isToday ? 800 : 600, color: highlightToday && isToday ? \"#241430\" : \"#24143099\", textDecoration: highlightToday && isToday ? \"underline\" : \"none\", textDecorationThickness: 2, textUnderlineOffset: 3 }}>\n {d.wd} <time dateTime={d.iso}>{d.num}</time>\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody>\n {hours.map((hour, hi) => (\n <tr key={hour}>\n <th scope=\"row\" style={{ ...cellBorder, fontWeight: 500, color: \"#24143099\", fontVariantNumeric: \"tabular-nums\" }}>{hour}</th>\n {visibleDays.map((d, di) => {\n const isToday = d.iso === TODAY;\n const ev = events.find((e) => e.hi === hi && e.di === di);\n return (\n <td key={d.iso} style={{ ...cellBorder, background: highlightToday && isToday ? \"#24143008\" : \"transparent\" }}>\n {ev && <span style={{ display: \"block\", borderRadius: 5, padding: \"3px 5px\", fontWeight: 700, color: \"#14351f\", fontSize: 11, background: accent }}>{ev.label}</span>}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}" }