Edit Recurring Event

Name

Also known as (comma separated)

Brief definition Repeating event.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "title", "type": "text", "label": "Title", "default": "Team standup" }, { "id": "time", "type": "text", "label": "Time", "default": "9:00 am" }, { "id": "frequency", "type": "select", "label": "Frequency", "default": "Weekly", "options": [ "Daily", "Weekly", "Monthly" ] }, { "id": "hasEndDate", "type": "toggle", "label": "Has end date", "default": true }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"rec\" style=\"border-left-color:{{accent}};\">\n <div class=\"rec__head\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 5h6a3 3 0 0 1 3 3v1M12 11H6a3 3 0 0 1-3-3V7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M2 5l2-2 2 2M14 11l-2 2-2-2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg><p class=\"rec__title\">{{title}}</p></div>\n <p class=\"rec__meta\"><time datetime=\"2026-08-18T09:00\">{{time}}</time> &middot; Repeats <span data-freq=\"{{frequency}}\">{{frequency}}</span></p>\n {{#if hasEndDate}}<p class=\"rec__end\">Ends <time datetime=\"2026-12-31\">31 Dec 2026</time></p>{{/if}}\n</div>\n<style>\n.rec { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 320px; padding: 14px 16px; border-radius: 10px; border-left: 4px solid; box-sizing: border-box; box-shadow: 0 4px 12px rgba(36,20,48,.08); }\n.rec__head { display: flex; align-items: center; gap: 8px; color: #24143077; }\n.rec__title { margin: 0; font-weight: 700; color: #241430; }\n.rec__meta { margin: 6px 0 0; font-size: 12px; color: #24143099; }\n.rec__meta span { font-weight: 700; color: #241430; }\n.rec__end { margin: 4px 0 0; font-size: 12px; color: #24143099; }\n</style>", "tailwind": "<div class=\"w-[320px] p-[14px_16px] rounded-[10px] border-l-4 box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] shadow-[0_4px_12px_rgba(36,20,48,.08)]\" style=\"border-left-color:{{accent}}\">\n <div class=\"flex items-center gap-2 text-[#24143077]\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 5h6a3 3 0 0 1 3 3v1M12 11H6a3 3 0 0 1-3-3V7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\"/><path d=\"M2 5l2-2 2 2M14 11l-2 2-2-2\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg><p class=\"m-0 font-bold text-[#241430]\">{{title}}</p></div>\n <p class=\"mt-1.5 mb-0 text-xs text-[#241430]/60\"><time datetime=\"2026-08-18T09:00\">{{time}}</time> &middot; Repeats <span class=\"font-bold text-[#241430]\" data-freq=\"{{frequency}}\">{{frequency}}</span></p>\n {{#if hasEndDate}}<p class=\"mt-1 mb-0 text-xs text-[#241430]/60\">Ends <time datetime=\"2026-12-31\">31 Dec 2026</time></p>{{/if}}\n</div>", "react": "export function RecurringEvent({\n title = \"{{title}}\",\n time = \"{{time}}\",\n frequency = \"{{frequency}}\",\n hasEndDate = {{hasEndDate}},\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 320, padding: \"14px 16px\", borderRadius: 10, borderLeft: `4px solid ${accent}`, boxSizing: \"border-box\", boxShadow: \"0 4px 12px rgba(36,20,48,.08)\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 8, color: \"#24143077\" }}>\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 5h6a3 3 0 0 1 3 3v1M12 11H6a3 3 0 0 1-3-3V7\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.4\" /><path d=\"M2 5l2-2 2 2M14 11l-2 2-2-2\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n <p style={{ margin: 0, fontWeight: 700, color: \"#241430\" }}>{title}</p>\n </div>\n <p style={{ margin: \"6px 0 0\", fontSize: 12, color: \"#24143099\" }}>\n <time dateTime=\"2026-08-18T09:00\">{time}</time> &middot; Repeats <span style={{ fontWeight: 700, color: \"#241430\" }}>{frequency}</span>\n </p>\n {hasEndDate && <p style={{ margin: \"4px 0 0\", fontSize: 12, color: \"#24143099\" }}>Ends <time dateTime=\"2026-12-31\">31 Dec 2026</time></p>}\n </div>\n );\n}" }