Edit Time Slot

Name

Also known as (comma separated)

Brief definition Available time interval.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "time", "type": "text", "label": "Time", "default": "10:30 am" }, { "id": "date", "type": "text", "label": "Date (ISO)", "default": "2026-08-18" }, { "id": "duration", "type": "select", "label": "Duration", "default": "30 min", "options": [ "15 min", "30 min", "45 min" ] }, { "id": "selected", "type": "toggle", "label": "Selected", "default": false }, { "id": "available", "type": "toggle", "label": "Available", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#BFD9F2", "#D9C8F0" ] } ]

Templates (JSON object keyed by format) { "html": "<button type=\"button\" class=\"tslot{{#if selected}} tslot--selected{{/if}}{{#unless available}} tslot--unavailable{{/unless}}\" style=\"--accent:{{accent}};\" {{#unless available}}disabled{{/unless}} aria-pressed=\"{{selected}}\">\n <time datetime=\"{{date}}T{{time}}\">{{time}}</time>\n <span class=\"tslot__dur\">{{duration}}</span>\n</button>\n<style>\n.tslot { font: 13px/1.3 system-ui, sans-serif; width: 140px; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #24143030; background: #FAF7F2; color: #241430; cursor: pointer; text-align: left; box-sizing: border-box; }\n.tslot__dur { display: block; font-size: 11px; color: #24143099; margin-top: 2px; }\n.tslot:hover:not(.tslot--unavailable) { border-color: var(--accent); }\n.tslot--selected { background: var(--accent); border-color: var(--accent); font-weight: 700; }\n.tslot--unavailable { background: #24143008; color: #24143055; text-decoration: line-through; cursor: not-allowed; }\n.tslot:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<button type=\"button\" class=\"tslot-tw text-left w-[140px] p-[10px_12px] rounded-[10px] border-[1.5px] border-[#24143030] bg-[#FAF7F2] text-[#241430] cursor-pointer box-border font-sans text-[13px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]{{#if selected}} tslot-tw--selected{{/if}}{{#unless available}} tslot-tw--unavailable{{/unless}}\" style=\"--accent:{{accent}}\" {{#unless available}}disabled{{/unless}} aria-pressed=\"{{selected}}\">\n <time datetime=\"{{date}}T{{time}}\">{{time}}</time>\n <span class=\"block text-[11px] text-[#241430]/60 mt-0.5\">{{duration}}</span>\n</button>\n<style>\n.tslot-tw--selected { background: var(--accent); border-color: var(--accent); font-weight: 700; }\n.tslot-tw--unavailable { background: #24143008; color: #24143055; text-decoration: line-through; cursor: not-allowed; }\n.tslot-tw:hover:not(.tslot-tw--unavailable) { border-color: var(--accent); }\n</style>", "react": "export function TimeSlot({\n time = \"{{time}}\",\n date = \"{{date}}\",\n duration = \"{{duration}}\",\n selected = {{selected}},\n available = {{available}},\n accent = \"{{accent}}\",\n}) {\n const base = { font: \"13px/1.3 system-ui, sans-serif\", width: 140, padding: \"10px 12px\", borderRadius: 10, border: \"1.5px solid #24143030\", background: \"#FAF7F2\", color: \"#241430\", cursor: \"pointer\", textAlign: \"left\", boxSizing: \"border-box\" };\n const extra = !available\n ? { background: \"#24143008\", color: \"#24143055\", textDecoration: \"line-through\", cursor: \"not-allowed\" }\n : selected\n ? { background: accent, borderColor: accent, fontWeight: 700 }\n : {};\n return (\n <button type=\"button\" disabled={!available} aria-pressed={selected} style={{ ...base, ...extra }}>\n <time dateTime={`${date}T${time}`}>{time}</time>\n <span style={{ display: \"block\", fontSize: 11, color: \"#24143099\", marginTop: 2 }}>{duration}</span>\n </button>\n );\n}" }