Week calendar

A week view driven by A2UI: days and events bind to the data model, laid on an hourly grid. Overlapping events pack into side-by-side columns.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "title",            "cal"          ],          "gap": "md"        },        {          "id": "title",          "component": "Text",          "text": "This week",          "variant": "title"        },        {          "id": "cal",          "component": "Calendar",          "days": {            "path": "/days"          },          "events": {            "path": "/events"          },          "startHour": 8,          "endHour": 18,          "hour24": true        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "days": [          {            "weekday": "Mon",            "date": 3          },          {            "weekday": "Tue",            "date": 4,            "today": true,            "count": 3          },          {            "weekday": "Wed",            "date": 5          },          {            "weekday": "Thu",            "date": 6          },          {            "weekday": "Fri",            "date": 7          }        ],        "events": [          {            "id": "e1",            "title": "Standup",            "day": 1,            "start": "09:00",            "end": "09:30",            "tone": "info"          },          {            "id": "e2",            "title": "Design review",            "day": 1,            "start": "11:00",            "end": "12:00",            "tone": "alt",            "meta": "Room 2"          },          {            "id": "e3",            "title": "Release cut",            "day": 3,            "start": "15:00",            "end": "16:30",            "tone": "success"          },          {            "id": "e4",            "title": "Retro",            "day": 4,            "start": "14:00",            "end": "15:00",            "tone": "warning"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "title",
            "cal"
          ],
          "gap": "md"
        },
        {
          "id": "title",
          "component": "Text",
          "text": "This week",
          "variant": "title"
        },
        {
          "id": "cal",
          "component": "Calendar",
          "days": {
            "path": "/days"
          },
          "events": {
            "path": "/events"
          },
          "startHour": 8,
          "endHour": 18,
          "hour24": true
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "days": [
          {
            "weekday": "Mon",
            "date": 3
          },
          {
            "weekday": "Tue",
            "date": 4,
            "today": true,
            "count": 3
          },
          {
            "weekday": "Wed",
            "date": 5
          },
          {
            "weekday": "Thu",
            "date": 6
          },
          {
            "weekday": "Fri",
            "date": 7
          }
        ],
        "events": [
          {
            "id": "e1",
            "title": "Standup",
            "day": 1,
            "start": "09:00",
            "end": "09:30",
            "tone": "info"
          },
          {
            "id": "e2",
            "title": "Design review",
            "day": 1,
            "start": "11:00",
            "end": "12:00",
            "tone": "alt",
            "meta": "Room 2"
          },
          {
            "id": "e3",
            "title": "Release cut",
            "day": 3,
            "start": "15:00",
            "end": "16:30",
            "tone": "success"
          },
          {
            "id": "e4",
            "title": "Retro",
            "day": 4,
            "start": "14:00",
            "end": "15:00",
            "tone": "warning"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

This week

Mon3

Tue43

Wed5

Thu6

Fri7

09:00

10:00

11:00

12:00

13:00

14:00

15:00

16:00

17:00

18:00

Standup

Design reviewRoom 2

Release cut15:00 – 16:30

Retro14:00 – 15:00