Edit Month View

Name

Also known as (comma separated)

Brief definition Calendar showing a month.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "month", "type": "text", "label": "Month label", "default": "August 2026" }, { "id": "density", "type": "select", "label": "Density", "default": "Comfortable", "options": [ "Comfortable", "Compact" ] }, { "id": "showWeekend", "type": "toggle", "label": "Show weekend columns", "default": true }, { "id": "showEventDots", "type": "toggle", "label": "Show event dots", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0" ] } ]

Templates (JSON object keyed by format) { "html": "<table class=\"mv\" data-density=\"{{density}}\" data-weekend=\"{{showWeekend}}\" style=\"--accent:{{accent}};\">\n <caption class=\"mv__caption\">{{month}}</caption>\n <thead>\n <tr>\n <th scope=\"col\">Sun</th><th scope=\"col\">Mon</th><th scope=\"col\">Tue</th><th scope=\"col\">Wed</th>\n <th scope=\"col\">Thu</th><th scope=\"col\">Fri</th><th scope=\"col\">Sat</th>\n </tr>\n </thead>\n <tbody>\n <tr><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-07-26\">26</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-07-27\">27</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-07-28\">28</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-07-29\">29</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-07-30\">30</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-07-31\">31</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-01\">1</time></td></tr>\n <tr><td class=\"mv__cell\"><time datetime=\"2026-08-02\">2</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-03\">3</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-04\">4</time></td><td class=\"mv__cell mv__cell--event\"><time datetime=\"2026-08-05\">5</time>{{#if showEventDots}}<span class=\"mv__event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mv__cell\"><time datetime=\"2026-08-06\">6</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-07\">7</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-08\">8</time></td></tr>\n <tr><td class=\"mv__cell\"><time datetime=\"2026-08-09\">9</time></td><td class=\"mv__cell mv__cell--selected\" aria-current=\"date\"><time datetime=\"2026-08-10\">10</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-11\">11</time></td><td class=\"mv__cell mv__cell--event\"><time datetime=\"2026-08-12\">12</time>{{#if showEventDots}}<span class=\"mv__event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mv__cell\"><time datetime=\"2026-08-13\">13</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-14\">14</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-15\">15</time></td></tr>\n <tr><td class=\"mv__cell\"><time datetime=\"2026-08-16\">16</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-17\">17</time></td><td class=\"mv__cell mv__cell--today\"><time datetime=\"2026-08-18\">18</time><span class=\"mv__today-dot\" aria-hidden=\"true\"></span><span class=\"sr-only\"> (today)</span></td><td class=\"mv__cell\"><time datetime=\"2026-08-19\">19</time></td><td class=\"mv__cell mv__cell--event\"><time datetime=\"2026-08-20\">20</time>{{#if showEventDots}}<span class=\"mv__event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mv__cell\"><time datetime=\"2026-08-21\">21</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-22\">22</time></td></tr>\n <tr><td class=\"mv__cell\"><time datetime=\"2026-08-23\">23</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-24\">24</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-25\">25</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-26\">26</time></td><td class=\"mv__cell mv__cell--event\"><time datetime=\"2026-08-27\">27</time>{{#if showEventDots}}<span class=\"mv__event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mv__cell\"><time datetime=\"2026-08-28\">28</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-29\">29</time></td></tr>\n <tr><td class=\"mv__cell\"><time datetime=\"2026-08-30\">30</time></td><td class=\"mv__cell\"><time datetime=\"2026-08-31\">31</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-09-01\">1</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-09-02\">2</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-09-03\">3</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-09-04\">4</time></td><td class=\"mv__cell mv__cell--dim\"><time datetime=\"2026-09-05\">5</time></td></tr>\n </tbody>\n</table>\n<style>\n.mv { border-collapse: collapse; width: 460px; font: 13px/1.3 system-ui, sans-serif; color: #241430; background: #FAF7F2; table-layout: fixed; }\n.mv__caption { text-align: left; font-weight: 700; font-size: 15px; padding-bottom: 10px; }\n.mv th, .mv td { text-align: center; padding: 10px 4px; border: 1px solid #24143014; position: relative; }\n.mv th { font-weight: 600; color: #24143099; }\n.mv[data-density=\"Compact\"] th, .mv[data-density=\"Compact\"] td { padding: 5px 4px; }\n.mv__cell--dim { color: #24143055; }\n.mv__cell--today time { font-weight: 800; }\n.mv__today-dot { display: block; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); margin: 3px auto 0; border: 1px solid #241430; }\n.mv__cell--selected { background: var(--accent); outline: 2px solid #241430; outline-offset: -2px; border-radius: 4px; }\n.mv__event-dot { display: block; width: 4px; height: 4px; border-radius: 999px; background: #E8A020; margin: 3px auto 0; }\n.mv[data-weekend=\"false\"] th:first-child, .mv[data-weekend=\"false\"] td:first-child,\n.mv[data-weekend=\"false\"] th:last-child, .mv[data-weekend=\"false\"] td:last-child { display: none; }\n.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n</style>", "tailwind": "<table class=\"border-collapse w-[460px] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] mv-tw table-fixed\" data-density=\"{{density}}\" data-weekend=\"{{showWeekend}}\">\n <caption class=\"text-left font-bold text-[15px] pb-2.5\">{{month}}</caption>\n <thead>\n <tr>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Sun</th>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Mon</th>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Tue</th>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Wed</th>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Thu</th>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Fri</th>\n <th scope=\"col\" class=\"font-semibold text-[#241430]/60 text-center p-2.5 border border-[#24143014]\">Sat</th>\n </tr>\n </thead>\n <tbody>\n <tr><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-07-26\">26</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-07-27\">27</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-07-28\">28</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-07-29\">29</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-07-30\">30</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-07-31\">31</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-01\">1</time></td></tr>\n <tr><td class=\"mvtw-cell\"><time datetime=\"2026-08-02\">2</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-03\">3</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-04\">4</time></td><td class=\"mvtw-cell mvtw-cell--event\"><time datetime=\"2026-08-05\">5</time>{{#if showEventDots}}<span class=\"mvtw-event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mvtw-cell\"><time datetime=\"2026-08-06\">6</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-07\">7</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-08\">8</time></td></tr>\n <tr><td class=\"mvtw-cell\"><time datetime=\"2026-08-09\">9</time></td><td class=\"mvtw-cell mvtw-cell--selected\" aria-current=\"date\"><time datetime=\"2026-08-10\">10</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-11\">11</time></td><td class=\"mvtw-cell mvtw-cell--event\"><time datetime=\"2026-08-12\">12</time>{{#if showEventDots}}<span class=\"mvtw-event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mvtw-cell\"><time datetime=\"2026-08-13\">13</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-14\">14</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-15\">15</time></td></tr>\n <tr><td class=\"mvtw-cell\"><time datetime=\"2026-08-16\">16</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-17\">17</time></td><td class=\"mvtw-cell mvtw-cell--today\"><time datetime=\"2026-08-18\">18</time><span class=\"mvtw-today-dot\" aria-hidden=\"true\"></span><span class=\"sr-only\"> (today)</span></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-19\">19</time></td><td class=\"mvtw-cell mvtw-cell--event\"><time datetime=\"2026-08-20\">20</time>{{#if showEventDots}}<span class=\"mvtw-event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mvtw-cell\"><time datetime=\"2026-08-21\">21</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-22\">22</time></td></tr>\n <tr><td class=\"mvtw-cell\"><time datetime=\"2026-08-23\">23</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-24\">24</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-25\">25</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-26\">26</time></td><td class=\"mvtw-cell mvtw-cell--event\"><time datetime=\"2026-08-27\">27</time>{{#if showEventDots}}<span class=\"mvtw-event-dot\" aria-hidden=\"true\"></span>{{/if}}</td><td class=\"mvtw-cell\"><time datetime=\"2026-08-28\">28</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-29\">29</time></td></tr>\n <tr><td class=\"mvtw-cell\"><time datetime=\"2026-08-30\">30</time></td><td class=\"mvtw-cell\"><time datetime=\"2026-08-31\">31</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-09-01\">1</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-09-02\">2</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-09-03\">3</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-09-04\">4</time></td><td class=\"mvtw-cell mvtw-cell--dim\"><time datetime=\"2026-09-05\">5</time></td></tr>\n </tbody>\n</table>\n<style>\n.mv-tw td, .mv-tw th { position: relative; text-align: center; padding: 10px 4px; border: 1px solid #24143014; }\n.mv-tw[data-density=\"Compact\"] th, .mv-tw[data-density=\"Compact\"] td { padding: 5px 4px; }\n.mvtw-cell--dim { color: #24143055; }\n.mvtw-cell--today time { font-weight: 800; }\n.mvtw-today-dot { display: block; width: 5px; height: 5px; border-radius: 999px; background: {{accent}}; margin: 3px auto 0; border: 1px solid #241430; }\n.mvtw-cell--selected { background: {{accent}}; outline: 2px solid #241430; outline-offset: -2px; border-radius: 4px; }\n.mvtw-event-dot { display: block; width: 4px; height: 4px; border-radius: 999px; background: #E8A020; margin: 3px auto 0; }\n.mv-tw[data-weekend=\"false\"] th:first-child, .mv-tw[data-weekend=\"false\"] td:first-child,\n.mv-tw[data-weekend=\"false\"] th:last-child, .mv-tw[data-weekend=\"false\"] td:last-child { display: none; }\n</style>", "react": "export function MonthView({\n month = \"{{month}}\",\n density = \"{{density}}\",\n showWeekend = {{showWeekend}},\n showEventDots = {{showEventDots}},\n accent = \"{{accent}}\",\n}) {\n const TODAY = \"2026-08-18\";\n const SELECTED = \"2026-08-10\";\n const EVENT_DAYS = new Set([\"2026-08-05\", \"2026-08-12\", \"2026-08-20\", \"2026-08-27\"]);\n const weeks = [\n [{ day: 26, iso: \"2026-07-26\", dim: true }, { day: 27, iso: \"2026-07-27\", dim: true }, { day: 28, iso: \"2026-07-28\", dim: true }, { day: 29, iso: \"2026-07-29\", dim: true }, { day: 30, iso: \"2026-07-30\", dim: true }, { day: 31, iso: \"2026-07-31\", dim: true }, { day: 1, iso: \"2026-08-01\", dim: false }],\n [{ day: 2, iso: \"2026-08-02\", dim: false }, { day: 3, iso: \"2026-08-03\", dim: false }, { day: 4, iso: \"2026-08-04\", dim: false }, { day: 5, iso: \"2026-08-05\", dim: false }, { day: 6, iso: \"2026-08-06\", dim: false }, { day: 7, iso: \"2026-08-07\", dim: false }, { day: 8, iso: \"2026-08-08\", dim: false }],\n [{ day: 9, iso: \"2026-08-09\", dim: false }, { day: 10, iso: \"2026-08-10\", dim: false }, { day: 11, iso: \"2026-08-11\", dim: false }, { day: 12, iso: \"2026-08-12\", dim: false }, { day: 13, iso: \"2026-08-13\", dim: false }, { day: 14, iso: \"2026-08-14\", dim: false }, { day: 15, iso: \"2026-08-15\", dim: false }],\n [{ day: 16, iso: \"2026-08-16\", dim: false }, { day: 17, iso: \"2026-08-17\", dim: false }, { day: 18, iso: \"2026-08-18\", dim: false }, { day: 19, iso: \"2026-08-19\", dim: false }, { day: 20, iso: \"2026-08-20\", dim: false }, { day: 21, iso: \"2026-08-21\", dim: false }, { day: 22, iso: \"2026-08-22\", dim: false }],\n [{ day: 23, iso: \"2026-08-23\", dim: false }, { day: 24, iso: \"2026-08-24\", dim: false }, { day: 25, iso: \"2026-08-25\", dim: false }, { day: 26, iso: \"2026-08-26\", dim: false }, { day: 27, iso: \"2026-08-27\", dim: false }, { day: 28, iso: \"2026-08-28\", dim: false }, { day: 29, iso: \"2026-08-29\", dim: false }],\n [{ day: 30, iso: \"2026-08-30\", dim: false }, { day: 31, iso: \"2026-08-31\", dim: false }, { day: 1, iso: \"2026-09-01\", dim: true }, { day: 2, iso: \"2026-09-02\", dim: true }, { day: 3, iso: \"2026-09-03\", dim: true }, { day: 4, iso: \"2026-09-04\", dim: true }, { day: 5, iso: \"2026-09-05\", dim: true }],\n ];\n const pad = density === \"Compact\" ? \"5px 4px\" : \"10px 4px\";\n const days = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n return (\n <table style={{ borderCollapse: \"collapse\", width: 460, font: \"13px/1.3 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", tableLayout: \"fixed\" }}>\n <caption style={{ textAlign: \"left\", fontWeight: 700, fontSize: 15, paddingBottom: 10 }}>{month}</caption>\n <thead>\n <tr>\n {days.map((d, i) => (\n (showWeekend || (i !== 0 && i !== 6)) &&\n <th key={d} scope=\"col\" style={{ fontWeight: 600, color: \"#24143099\", textAlign: \"center\", padding: pad, border: \"1px solid #24143014\" }}>{d}</th>\n ))}\n </tr>\n </thead>\n <tbody>\n {weeks.map((week, wi) => (\n <tr key={wi}>\n {week.map((c, ci) => {\n if (!showWeekend && (ci === 0 || ci === 6)) return null;\n const isToday = c.iso === TODAY;\n const isSelected = c.iso === SELECTED;\n const hasEvent = EVENT_DAYS.has(c.iso);\n return (\n <td key={c.iso} aria-current={isSelected ? \"date\" : undefined}\n style={{ position: \"relative\", textAlign: \"center\", padding: pad, border: \"1px solid #24143014\",\n color: c.dim ? \"#24143055\" : \"#241430\",\n background: isSelected ? accent : \"transparent\",\n outline: isSelected ? \"2px solid #241430\" : \"none\", outlineOffset: -2, borderRadius: isSelected ? 4 : 0 }}>\n <time dateTime={c.iso} style={{ fontWeight: isToday ? 800 : 400 }}>{c.day}</time>\n {isToday && <span aria-hidden=\"true\" style={{ display: \"block\", width: 5, height: 5, borderRadius: 999, background: accent, margin: \"3px auto 0\", border: \"1px solid #241430\" }} />}\n {isToday && <span className=\"sr-only\" style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\" }}> (today)</span>}\n {hasEvent && showEventDots && <span aria-hidden=\"true\" style={{ display: \"block\", width: 4, height: 4, borderRadius: 999, background: \"#E8A020\", margin: \"3px auto 0\" }} />}\n </td>\n );\n })}\n </tr>\n ))}\n </tbody>\n </table>\n );\n}" }