Edit Calendar

Name

Also known as (comma separated)

Brief definition Date-based event display.

Notes **Calendar & Scheduling:** Date/event interface.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "monthLabel", "type": "text", "label": "Month label", "default": "August 2026" }, { "id": "view", "type": "select", "label": "View", "default": "month", "options": [ "month", "agenda" ] }, { "id": "accent", "type": "color", "label": "Event colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showWeekend", "type": "toggle", "label": "Show weekend", "default": true }, { "id": "size", "type": "select", "label": "Size", "default": "cozy", "options": [ "cozy", "compact" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"calendar calendar--{{size}}\" data-view=\"{{view}}\" style=\"--accent:{{accent}};\">\n <table class=\"cal-grid\">\n <caption>{{monthLabel}}</caption>\n <thead>\n <tr>\n <th scope=\"col\">Mon</th><th scope=\"col\">Tue</th><th scope=\"col\">Wed</th><th scope=\"col\">Thu</th><th scope=\"col\">Fri</th>\n {{#if showWeekend}}<th scope=\"col\">Sat</th><th scope=\"col\">Sun</th>{{/if}}\n </tr>\n </thead>\n <tbody>\n <tr>\n <td><time datetime=\"2026-08-10\">10</time></td>\n <td><time datetime=\"2026-08-11\">11</time></td>\n <td class=\"cal-grid__day--event\"><time datetime=\"2026-08-12\">12</time></td>\n <td><time datetime=\"2026-08-13\">13</time></td>\n <td><time datetime=\"2026-08-14\">14</time></td>\n {{#if showWeekend}}<td><time datetime=\"2026-08-15\">15</time></td><td><time datetime=\"2026-08-16\">16</time></td>{{/if}}\n </tr>\n <tr>\n <td><time datetime=\"2026-08-17\">17</time></td>\n <td class=\"cal-grid__day--today\"><time datetime=\"2026-08-18\">18</time></td>\n <td><time datetime=\"2026-08-19\">19</time></td>\n <td><time datetime=\"2026-08-20\">20</time></td>\n <td class=\"cal-grid__day--event\"><time datetime=\"2026-08-21\">21</time></td>\n {{#if showWeekend}}<td><time datetime=\"2026-08-22\">22</time></td><td><time datetime=\"2026-08-23\">23</time></td>{{/if}}\n </tr>\n </tbody>\n </table>\n <ol class=\"cal-agenda\">\n <li class=\"cal-agenda__item\"><time datetime=\"2026-08-18T09:30:00Z\">Tue 18 Aug, 9:30am</time><span class=\"cal-agenda__title\">Design review</span></li>\n <li class=\"cal-agenda__item\"><time datetime=\"2026-08-19T14:00:00Z\">Wed 19 Aug, 2:00pm</time><span class=\"cal-agenda__title\">Client call</span></li>\n <li class=\"cal-agenda__item\"><time datetime=\"2026-08-21T11:00:00Z\">Fri 21 Aug, 11:00am</time><span class=\"cal-agenda__title\">Sprint planning</span></li>\n </ol>\n</div>\n<style>\n.calendar { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; border-radius: 12px; max-width: 320px; box-sizing: border-box; }\n.calendar[data-view=\"month\"] .cal-agenda { display: none; }\n.calendar[data-view=\"agenda\"] .cal-grid { display: none; }\n.cal-grid { border-collapse: collapse; width: 100%; }\n.cal-grid caption { text-align: left; font-weight: 600; margin-bottom: 8px; }\n.cal-grid th, .cal-grid td { text-align: center; padding: 8px 4px; font-size: 12px; }\n.cal-grid th { font-weight: 600; color: #24143099; font-size: 11px; }\n.calendar--compact .cal-grid th, .calendar--compact .cal-grid td { padding: 4px 2px; }\n.cal-grid td time { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; }\n.cal-grid__day--today time { background: var(--accent); font-weight: 700; }\n.cal-grid__day--event time { box-shadow: inset 0 0 0 2px var(--accent); }\n.cal-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }\n.calendar--compact .cal-agenda { gap: 6px; }\n.cal-agenda__item { display: flex; flex-direction: column; gap: 2px; padding-left: 10px; border-left: 3px solid var(--accent); }\n.cal-agenda__item time { font-size: 11px; color: #24143099; }\n.cal-agenda__title { font-weight: 600; }\n</style>", "tailwind": "<div class=\"calendar-tw calendar-tw--{{size}} font-sans text-[13px] leading-snug text-[#241430] bg-[#FAF7F2] p-3.5 rounded-xl max-w-[320px] box-border\" data-view=\"{{view}}\" style=\"--accent:{{accent}};\">\n <table class=\"cal-grid-tw border-collapse w-full\">\n <caption class=\"text-left font-semibold mb-2\">{{monthLabel}}</caption>\n <thead>\n <tr>\n <th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Mon</th>\n <th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Tue</th>\n <th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Wed</th>\n <th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Thu</th>\n <th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Fri</th>\n {{#if showWeekend}}<th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Sat</th><th scope=\"col\" class=\"font-semibold text-[#24143099] text-[11px] text-center py-2 px-1\">Sun</th>{{/if}}\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-10\">10</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-11\">11</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"cal-grid-tw__event inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-12\">12</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-13\">13</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-14\">14</time></td>\n {{#if showWeekend}}<td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-15\">15</time></td><td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-16\">16</time></td>{{/if}}\n </tr>\n <tr>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-17\">17</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"cal-grid-tw__today inline-flex items-center justify-center w-[22px] h-[22px] rounded-md font-bold\" datetime=\"2026-08-18\">18</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-19\">19</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-20\">20</time></td>\n <td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"cal-grid-tw__event inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-21\">21</time></td>\n {{#if showWeekend}}<td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-22\">22</time></td><td class=\"text-center py-2 px-1 text-[12px]\"><time class=\"inline-flex items-center justify-center w-[22px] h-[22px] rounded-md\" datetime=\"2026-08-23\">23</time></td>{{/if}}\n </tr>\n </tbody>\n </table>\n <ol class=\"cal-agenda-tw list-none m-0 p-0 flex flex-col gap-2.5\">\n <li class=\"flex flex-col gap-0.5 pl-2.5\" style=\"border-left:3px solid var(--accent);\"><time class=\"text-[11px] text-[#24143099]\" datetime=\"2026-08-18T09:30:00Z\">Tue 18 Aug, 9:30am</time><span class=\"font-semibold\">Design review</span></li>\n <li class=\"flex flex-col gap-0.5 pl-2.5\" style=\"border-left:3px solid var(--accent);\"><time class=\"text-[11px] text-[#24143099]\" datetime=\"2026-08-19T14:00:00Z\">Wed 19 Aug, 2:00pm</time><span class=\"font-semibold\">Client call</span></li>\n <li class=\"flex flex-col gap-0.5 pl-2.5\" style=\"border-left:3px solid var(--accent);\"><time class=\"text-[11px] text-[#24143099]\" datetime=\"2026-08-21T11:00:00Z\">Fri 21 Aug, 11:00am</time><span class=\"font-semibold\">Sprint planning</span></li>\n </ol>\n</div>\n<style>\n.calendar-tw[data-view=\"month\"] .cal-agenda-tw { display: none; }\n.calendar-tw[data-view=\"agenda\"] .cal-grid-tw { display: none; }\n.calendar-tw--compact .cal-grid-tw td, .calendar-tw--compact .cal-grid-tw th { padding-top: 4px; padding-bottom: 4px; }\n.calendar-tw--compact .cal-agenda-tw { gap: 6px; }\n.cal-grid-tw__today { background: var(--accent); }\n.cal-grid-tw__event { box-shadow: inset 0 0 0 2px var(--accent); }\n</style>", "react": "export function Calendar({\n monthLabel = \"{{monthLabel}}\",\n view = \"{{view}}\",\n accent = \"{{accent}}\",\n showWeekend = {{showWeekend}},\n size = \"{{size}}\",\n}) {\n const weekdays = showWeekend ? [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"] : [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\"];\n const week1 = [\n { day: 10, date: \"2026-08-10\" },\n { day: 11, date: \"2026-08-11\" },\n { day: 12, date: \"2026-08-12\", event: true },\n { day: 13, date: \"2026-08-13\" },\n { day: 14, date: \"2026-08-14\" },\n { day: 15, date: \"2026-08-15\" },\n { day: 16, date: \"2026-08-16\" },\n ].slice(0, showWeekend ? 7 : 5);\n const week2 = [\n { day: 17, date: \"2026-08-17\" },\n { day: 18, date: \"2026-08-18\", today: true },\n { day: 19, date: \"2026-08-19\" },\n { day: 20, date: \"2026-08-20\" },\n { day: 21, date: \"2026-08-21\", event: true },\n { day: 22, date: \"2026-08-22\" },\n { day: 23, date: \"2026-08-23\" },\n ].slice(0, showWeekend ? 7 : 5);\n const agenda = [\n { date: \"2026-08-18T09:30:00Z\", label: \"Tue 18 Aug, 9:30am\", title: \"Design review\" },\n { date: \"2026-08-19T14:00:00Z\", label: \"Wed 19 Aug, 2:00pm\", title: \"Client call\" },\n { date: \"2026-08-21T11:00:00Z\", label: \"Fri 21 Aug, 11:00am\", title: \"Sprint planning\" },\n ];\n const pad = size === \"compact\" ? 4 : 8;\n const cellStyle = (day) => ({\n display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", width: 22, height: 22, borderRadius: 6,\n background: day.today ? accent : \"transparent\",\n boxShadow: day.event ? `inset 0 0 0 2px ${accent}` : \"none\",\n fontWeight: day.today ? 700 : 400,\n });\n return (\n <div style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 13, lineHeight: 1.4, color: \"#241430\", background: \"#FAF7F2\", padding: 14, borderRadius: 12, maxWidth: 320, boxSizing: \"border-box\" }}>\n {view === \"month\" ? (\n <table style={{ borderCollapse: \"collapse\", width: \"100%\" }}>\n <caption style={{ textAlign: \"left\", fontWeight: 600, marginBottom: 8 }}>{monthLabel}</caption>\n <thead>\n <tr>\n {weekdays.map((w) => (\n <th key={w} scope=\"col\" style={{ fontWeight: 600, color: \"#24143099\", fontSize: 11, textAlign: \"center\", padding: `${pad}px 4px` }}>{w}</th>\n ))}\n </tr>\n </thead>\n <tbody>\n <tr>{week1.map((d) => <td key={d.date} style={{ textAlign: \"center\", padding: `${pad}px 4px`, fontSize: 12 }}><time dateTime={d.date} style={cellStyle(d)}>{d.day}</time></td>)}</tr>\n <tr>{week2.map((d) => <td key={d.date} style={{ textAlign: \"center\", padding: `${pad}px 4px`, fontSize: 12 }}><time dateTime={d.date} style={cellStyle(d)}>{d.day}</time></td>)}</tr>\n </tbody>\n </table>\n ) : (\n <ol style={{ listStyle: \"none\", margin: 0, padding: 0, display: \"flex\", flexDirection: \"column\", gap: size === \"compact\" ? 6 : 10 }}>\n {agenda.map((item) => (\n <li key={item.date} style={{ display: \"flex\", flexDirection: \"column\", gap: 2, paddingLeft: 10, borderLeft: `3px solid ${accent}` }}>\n <time dateTime={item.date} style={{ fontSize: 11, color: \"#24143099\" }}>{item.label}</time>\n <span style={{ fontWeight: 600 }}>{item.title}</span>\n </li>\n ))}\n </ol>\n )}\n </div>\n );\n}" }