Data components

Calendar

Day, week, month, year and schedule views; load events from an API on every view change.

Events come from your API

The calendar calls onRangeChange when it first appears and every time the view or the visible dates change. Your action asks the API for that range and answers with api.setCalendarEvents(id, events).

Users can click or drag on empty time to create an event, drag an event to move it, drag its bottom edge to resize it, and click it for details. The calendar updates itself and calls onEventCreate / onEventUpdate / onEventDelete so you can save the change.

Here the API is a small in-memory stand-in (see helpers at the top of Full page.js) — replace its methods with fetch calls.

Event objects

{ id, title, start, end, allDay, calendar, color, location, description, recurrence }. Times are local "YYYY-MM-DDTHH:mm"; all-day events use "YYYY-MM-DD" and end is the last day.

recurrence: { freq: "weekly", byDay: [1, 3] } repeats an event (daily, weekly, monthly, yearly, with interval, count, until).

Try it

Loading example…

Events0

Use the example — every action it runs shows up here with its data.

Code

Copy Full page.js into app/your-page/page.js of a Next.js app (withrcube-html, react-bootstrap and Bootstrap's CSS installed) — it runs as is. Or copy only the schema and keep your own page.

[
  {
    "type": "row",
    "id": "row-buttons",
    "children": [
      {
        "type": "column",
        "id": "c-buttons",
        "props": {
          "className": "d-flex flex-wrap gap-2 mb-3"
        },
        "children": [
          {
            "type": "ButtonField",
            "id": "month",
            "props": {
              "text": "Month view",
              "variant": "outline-primary",
              "onClick": "showMonth()"
            }
          },
          {
            "type": "ButtonField",
            "id": "today",
            "props": {
              "text": "Today",
              "variant": "outline-secondary",
              "onClick": "goToday()"
            }
          },
          {
            "type": "ButtonField",
            "id": "personal",
            "props": {
              "text": "Show / hide Personal",
              "variant": "outline-secondary",
              "onClick": "togglePersonal()"
            }
          },
          {
            "type": "ButtonField",
            "id": "add",
            "props": {
              "text": "+ Add event via API",
              "variant": "outline-success",
              "onClick": "addViaApi()"
            }
          }
        ]
      }
    ]
  },
  {
    "type": "Calendar",
    "id": "team-calendar",
    "props": {
      "view": "week",
      "views": [
        "day",
        "week",
        "month",
        "year",
        "agenda"
      ],
      "height": 640,
      "scrollToHour": 8,
      "workingHours": {
        "start": 9,
        "end": 17,
        "days": [
          1,
          2,
          3,
          4,
          5
        ]
      },
      "calendars": [
        {
          "id": "work",
          "name": "Work",
          "color": "#2a78d6"
        },
        {
          "id": "team",
          "name": "Team",
          "color": "#1baf7a"
        },
        {
          "id": "personal",
          "name": "Personal",
          "color": "#eb6834"
        }
      ],
      "events": [],
      "onRangeChange": "loadEvents()",
      "onViewChange": "viewChanged()",
      "onEventClick": "eventClicked()",
      "onSlotClick": "slotClicked()",
      "onEventCreate": "eventCreated()",
      "onEventUpdate": "eventUpdated()",
      "onEventDelete": "eventDeleted()",
      "onCalendarToggle": "calendarToggled()"
    }
  }
]

Options used here

Option	What it does
`view / views / date`	Starting view, the view buttons, the shown date (default today).
`calendars`	`[{ id, name, color }]` — the sidebar checkboxes; events link by `calendar`.
`events`	Starting events (or `[]` and load them in `onRangeChange`).
`height / hourHeight / scrollToHour / dayStartHour / dayEndHour`	Size and the time grid.
`workingHours`	`{ start, end, days }` — shades the rest.
`firstDay / weekends`	Week starts on (0 = Sunday); `false` hides Sat / Sun.
`editable / selectable / eventEditor / autoUpdate`	Drag & edit, drag-select, built-in editor, apply changes itself.
`sidebar / searchable / keyboardShortcuts`	Mini month + calendars, search box, T / D / W / M / Y / A / J / K / C keys.

Events

Event	When it runs	Your action receives
`onRangeChange`	First render and every view / date change.	`{ calendar, view, date, start, end }` (`end` exclusive)
`onEventClick`	An event is clicked.	`{ event }`
`onSlotClick / onSelect`	Empty time is clicked / dragged.	`{ start, end, allDay }`
`onEventCreate`	The editor creates an event.	`{ event }`
`onEventUpdate`	Moved, resized or edited.	`{ event, previous, change }`
`onEventDelete`	Deleted.	`{ event, scope }` (+ `series`, `occurrence` for one repeat)
`onViewChange / onCalendarToggle`	View button / calendar checkbox.	`{ view, previousView }` / `{ calendarId, hidden }`

Tips

Other actions: setCalendarEvents, addCalendarEvent, updateCalendarEvent, removeCalendarEvent, setCalendarView, setCalendarDate, calendarNext / calendarPrev / calendarToday, getCalendarRange, setCalendarLoading, toggleCalendar.