# zextras/carbonio-calendars-ui architecture

> Architecture diagram of the GitHub repository zextras/carbonio-calendars-ui, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/zextras/carbonio-calendars-ui
- Repository: https://github.com/zextras/carbonio-calendars-ui

## Overview

Carbonio Calendars UI is the web client for managing calendars and appointments. Users enter through the Carbonio app shell, then work with calendar views, appointment editing and invitations, search, calendar sharing and settings. Appointment search is driven by synchronization notifications and translated into SOAP requests; Redux holds appointment and invite state. The tree shows additional capabilities such as reminders, imports, external CalDAV/iCalendar calendars, tags and daily planning. Evidence is limited to the README and sampled source/index references, so unsampled connections are omitted.

Main entry points: [`src/app.tsx`](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/app.tsx) (App registrations), [`src/hooks/use-sync-data-handler.jsx`](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/hooks/use-sync-data-handler.jsx) (Change notifications), [`src/settings/settings-view.tsx`](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/settings/settings-view.tsx) (Calendar settings), [`src/store/actions/search-appointments.ts`](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/actions/search-appointments.ts) (Search appointments)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["App entry"]
  node_app["App registrations<br/>[app.tsx]"]
end

subgraph group_calendar["Calendar workflows"]
  node_calendar_view["Calendar view<br/>[calendar-view.tsx]"]
  node_editor["Appointment editor<br/>[editor-panel.tsx]"]
  node_planner["Daily planner"]
  node_invite["Invite response"]
  node_search_view["Appointment search<br/>[search-view.tsx]"]
  node_calendar_actions["Calendar actions"]
  node_external_calendar["External calendars"]
  node_reminders["Appointment reminders"]
  node_imports["Appointment imports"]
end

subgraph group_state["State and sync"]
  node_sync["Change notifications"]
  node_redux[("Redux state<br/>[index.tsx]")]
  node_search_action["Search appointments"]
  node_search_reducer["Search reducer"]
  node_groups_store[("Calendar group state")]
end

subgraph group_services["SOAP services"]
  node_soap_search["Search request<br/>[search-request.ts]"]
  node_rights_request["Rights request"]
end

subgraph group_account["Settings and sharing"]
  node_settings["Calendar settings<br/>[settings-view.tsx]"]
  node_sharing["Calendar sharing"]
  node_settings_save["Save settings<br/>[save-settings.tsx]"]
end

node_user(("Calendar user"))
node_soap_service{{"Carbonio SOAP API"}}

node_user -.->|"opens"| node_app
node_app -->|"mounts"| node_reminders
node_app -->|"mounts"| node_sync
node_app -->|"registers"| node_imports
node_sync -->|"dispatches"| node_search_action
node_sync -->|"updates"| node_groups_store
node_search_action -->|"calls"| node_soap_search
node_soap_search -.->|"requests"| node_soap_service
node_search_reducer -->|"handles"| node_search_action
node_app -->|"registers"| node_settings
node_settings -->|"saves"| node_settings_save
node_settings -->|"loads rights"| node_rights_request
node_rights_request -.->|"requests"| node_soap_service
node_calendar_actions -->|"opens"| node_external_calendar
node_calendar_actions -->|"opens"| node_sharing
node_planner -->|"reads editor state"| node_editor

click node_app "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/app.tsx"
click node_calendar_view "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/calendar/calendar-view.tsx"
click node_editor "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/editor/editor-panel.tsx"
click node_planner "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/editor/daily-planner/daily-planner-controller.tsx"
click node_invite "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/shared/invite-response/invite-response.tsx"
click node_search_view "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/search/search-view.tsx"
click node_calendar_actions "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/actions/calendar-actions-fn.tsx"
click node_external_calendar "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/actions/modals/add-external-calendar-modal.tsx"
click node_reminders "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/reminder/appointment-reminder.tsx"
click node_imports "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/shared/import-appointments-integration/import-appointments-modal.tsx"
click node_settings "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/settings/settings-view.tsx"
click node_sharing "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/actions/modals/share-calendar-modal.tsx"
click node_sync "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/hooks/use-sync-data-handler.jsx"
click node_redux "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/redux/index.tsx"
click node_search_action "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/actions/search-appointments.ts"
click node_search_reducer "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/reducers/search-appointments.ts"
click node_groups_store "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/zustand/calendar-group-store.ts"
click node_soap_search "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/soap/search-request.ts"
click node_settings_save "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/settings/save-settings.tsx"
click node_rights_request "https://github.com/zextras/carbonio-calendars-ui/blob/main/src/soap/get-rights-request.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_user toneBlue
class node_calendar_view,node_editor,node_planner,node_invite,node_search_view,node_calendar_actions,node_external_calendar,node_reminders,node_imports toneAmber
class node_sync,node_redux,node_search_action,node_search_reducer,node_groups_store,node_soap_service toneMint
class node_soap_search,node_rights_request toneRose
class node_settings,node_sharing,node_settings_save toneIndigo
```

## Components

### App entry

- [App registrations](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/app.tsx): `src/app.tsx`

### Calendar workflows

- [Calendar view](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/calendar/calendar-view.tsx): `src/view/calendar/calendar-view.tsx`
- [Appointment editor](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/editor/editor-panel.tsx): `src/view/editor/editor-panel.tsx`
- [Daily planner](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/editor/daily-planner/daily-planner-controller.tsx): `src/view/editor/daily-planner/daily-planner-controller.tsx`
- [Invite response](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/shared/invite-response/invite-response.tsx): `src/shared/invite-response/invite-response.tsx`
- [Appointment search](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/search/search-view.tsx): `src/view/search/search-view.tsx`
- [Calendar actions](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/actions/calendar-actions-fn.tsx): `src/actions/calendar-actions-fn.tsx`
- [External calendars](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/actions/modals/add-external-calendar-modal.tsx): `src/actions/modals/add-external-calendar-modal.tsx`
- [Appointment reminders](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/view/reminder/appointment-reminder.tsx): `src/view/reminder/appointment-reminder.tsx`
- [Appointment imports](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/shared/import-appointments-integration/import-appointments-modal.tsx): `src/shared/import-appointments-integration/import-appointments-modal.tsx`

### State and sync

- [Change notifications](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/hooks/use-sync-data-handler.jsx): `src/hooks/use-sync-data-handler.jsx`
- [Redux state](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/redux/index.tsx): `src/store/redux/index.tsx`
- [Search appointments](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/actions/search-appointments.ts): `src/store/actions/search-appointments.ts`
- [Search reducer](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/reducers/search-appointments.ts): `src/store/reducers/search-appointments.ts`
- [Calendar group state](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/store/zustand/calendar-group-store.ts): `src/store/zustand/calendar-group-store.ts`

### SOAP services

- [Search request](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/soap/search-request.ts): `src/soap/search-request.ts`
- [Rights request](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/soap/get-rights-request.ts): `src/soap/get-rights-request.ts`

### Settings and sharing

- [Calendar settings](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/settings/settings-view.tsx): `src/settings/settings-view.tsx`
- [Calendar sharing](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/actions/modals/share-calendar-modal.tsx): `src/actions/modals/share-calendar-modal.tsx`
- [Save settings](https://github.com/zextras/carbonio-calendars-ui/blob/main/src/settings/save-settings.tsx): `src/settings/save-settings.tsx`

### Other components

- **Calendar user**
- **Carbonio SOAP API**

## Connections

- Calendar user → App registrations: opens
- App registrations → Appointment reminders: mounts (evidence: `src/app.tsx`)
- App registrations → Change notifications: mounts (evidence: `src/app.tsx`)
- App registrations → Appointment imports: registers (evidence: `src/app.tsx`)
- Change notifications → Search appointments: dispatches (evidence: `src/hooks/use-sync-data-handler.jsx`)
- Change notifications → Calendar group state: updates (evidence: `src/hooks/use-sync-data-handler.jsx`)
- Search appointments → Search request: calls (evidence: `src/store/actions/search-appointments.ts`)
- Search request → Carbonio SOAP API: requests (evidence: `src/soap/search-request.ts`)
- Search reducer → Search appointments: handles (evidence: `src/store/reducers/search-appointments.ts`)
- App registrations → Calendar settings: registers (evidence: `src/app.tsx`)
- Calendar settings → Save settings: saves (evidence: `src/settings/settings-view.tsx`)
- Calendar settings → Rights request: loads rights (evidence: `src/settings/settings-view.tsx`)
- Rights request → Carbonio SOAP API: requests
- Calendar actions → External calendars: opens (evidence: `src/actions/calendar-actions-fn.tsx`)
- Calendar actions → Calendar sharing: opens (evidence: `src/actions/calendar-actions-fn.tsx`)
- Daily planner → Appointment editor: reads editor state (evidence: `src/view/editor/daily-planner/daily-planner-controller.tsx`)