# abhinaytharu/calendar architecture

> Architecture diagram of the GitHub repository abhinaytharu/calendar, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/abhinaytharu/calendar
- Repository: https://github.com/abhinaytharu/calendar

## Overview

Nepali Patro is a browser-based, BS-first calendar. Users navigate Nepali dates and calendar views, search and manage local events and tasks, and optionally connect Google to synchronize calendars and tasks. The README documents month, week, day, schedule, and list views, NPT handling, and responsive UI; the sampled source shows calendar rendering, event form handling, localStorage, Google auth, Tasks fetching, and the sync engine. Since app.js excerpts are partial, links from its UI/domain responsibilities to unsampled features are limited to documented capabilities.

Main entry points: [`app.js`](https://github.com/abhinaytharu/calendar/blob/main/app.js) (Google sign-in), [`index.html`](https://github.com/abhinaytharu/calendar/blob/main/index.html) (App shell), [`app.google-sync.js`](https://github.com/abhinaytharu/calendar/blob/main/app.google-sync.js) (Google event sync), [`styles.css`](https://github.com/abhinaytharu/calendar/blob/main/styles.css) (Responsive themes)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_calendar["Calendar experience"]
  node_shell["App shell<br/>[index.html]"]
  node_calendar_ui["Calendar views<br/>[app.js]"]
  node_search["Event and task search<br/>[app.js]"]
  node_event_editor["Event editor<br/>[app.js]"]
  node_presentation["Responsive themes<br/>[styles.css]"]
end

subgraph group_domain["Date and event domain"]
  node_bs_dates["BS date conversion<br/>[app.js]"]
  node_local_events["Local events and calendars<br/>[app.js]"]
end

subgraph group_google["Google integration"]
  node_google_events["Google event sync<br/>[app.google-sync.js]"]
  node_google_tasks["Google Tasks<br/>[app.js]"]
  node_auth["Google sign-in<br/>[app.js]"]
  node_oauth_config["OAuth configuration<br/>[config.js]"]
end

subgraph group_state["Browser state"]
  node_browser_storage[("localStorage")]
end

node_user(("Calendar user"))
node_google_calendar_api["Google Calendar API"]
node_google_tasks_api["Google Tasks API"]
node_google_identity["Google Identity Services"]

node_user -->|"opens"| node_shell
node_shell -->|"hosts"| node_calendar_ui
node_user -->|"navigates"| node_calendar_ui
node_calendar_ui -->|"converts dates"| node_bs_dates
node_calendar_ui -->|"renders events"| node_local_events
node_calendar_ui -->|"shows tasks"| node_google_tasks
node_user -->|"searches"| node_search
node_search -->|"filters events"| node_local_events
node_search -->|"filters tasks"| node_google_tasks
node_user -->|"edits events"| node_event_editor
node_event_editor -->|"saves events"| node_local_events
node_local_events -->|"persists"| node_browser_storage
node_user -->|"signs in"| node_auth
node_auth -->|"reads settings"| node_oauth_config
node_auth -->|"requests token"| node_google_identity
node_auth -->|"stores credentials"| node_browser_storage
node_auth -.->|"provides token"| node_google_events
node_google_events -->|"reads and writes"| node_google_calendar_api
node_google_tasks -->|"fetches tasks"| node_google_tasks_api
node_google_tasks -.->|"stores state"| node_browser_storage
node_presentation -->|"styles"| node_shell

click node_shell "https://github.com/abhinaytharu/calendar/blob/main/index.html"
click node_calendar_ui "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_search "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_event_editor "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_presentation "https://github.com/abhinaytharu/calendar/blob/main/styles.css"
click node_bs_dates "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_local_events "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_google_events "https://github.com/abhinaytharu/calendar/blob/main/app.google-sync.js"
click node_google_tasks "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_auth "https://github.com/abhinaytharu/calendar/blob/main/app.js"
click node_oauth_config "https://github.com/abhinaytharu/calendar/blob/main/config.js"

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_shell,node_calendar_ui,node_search,node_event_editor,node_presentation,node_user toneBlue
class node_bs_dates,node_local_events toneAmber
class node_google_events,node_google_tasks,node_auth,node_oauth_config,node_google_calendar_api toneMint
class node_browser_storage,node_google_tasks_api toneRose
class node_google_identity toneIndigo
```

## Components

### Calendar experience

- [App shell](https://github.com/abhinaytharu/calendar/blob/main/index.html): `index.html`
- [Calendar views](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`
- [Event and task search](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`
- [Event editor](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`
- [Responsive themes](https://github.com/abhinaytharu/calendar/blob/main/styles.css): `styles.css`

### Date and event domain

- [BS date conversion](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`
- [Local events and calendars](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`

### Google integration

- [Google event sync](https://github.com/abhinaytharu/calendar/blob/main/app.google-sync.js): `app.google-sync.js`
- [Google Tasks](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`
- [Google sign-in](https://github.com/abhinaytharu/calendar/blob/main/app.js): `app.js`
- [OAuth configuration](https://github.com/abhinaytharu/calendar/blob/main/config.js): `config.js`

### Browser state

- **localStorage**

### Other components

- **Calendar user**
- **Google Calendar API**
- **Google Tasks API**
- **Google Identity Services**

## Connections

- Calendar user → App shell: opens (evidence: `README.md`)
- App shell → Calendar views: hosts (evidence: `README.md`)
- Calendar user → Calendar views: navigates (evidence: `README.md`)
- Calendar views → BS date conversion: converts dates (evidence: `app.js`)
- Calendar views → Local events and calendars: renders events (evidence: `README.md`)
- Calendar views → Google Tasks: shows tasks (evidence: `README.md`)
- Calendar user → Event and task search: searches (evidence: `README.md`)
- Event and task search → Local events and calendars: filters events (evidence: `README.md`)
- Event and task search → Google Tasks: filters tasks (evidence: `README.md`)
- Calendar user → Event editor: edits events (evidence: `app.js`)
- Event editor → Local events and calendars: saves events (evidence: `app.js`)
- Local events and calendars → localStorage: persists (evidence: `app.js`)
- Calendar user → Google sign-in: signs in (evidence: `README.md`)
- Google sign-in → OAuth configuration: reads settings (evidence: `config.js`)
- Google sign-in → Google Identity Services: requests token (evidence: `README.md`)
- Google sign-in → localStorage: stores credentials (evidence: `app.js`)
- Google sign-in → Google event sync: provides token
- Google event sync → Google Calendar API: reads and writes (evidence: `app.google-sync.js`)
- Google Tasks → Google Tasks API: fetches tasks (evidence: `app.js`)
- Google Tasks → localStorage: stores state
- Responsive themes → App shell: styles (evidence: `README.md`)