# XWUIHrEmployeeCalendarPage

HR calendar shell page (default title "Calendar") that lists company/employee calendar events in a table. Built on `HrListPage` (the list-flavored `HrPageBase`), it fetches rows via `hrApi.listCalendarEvents()` (accepting either a raw array or an `{ items }` envelope) and renders a three-column grid: **Date**, **Event** (the `title` field), and **Category**. It accepts the standard page props (`title`, `titleAr`, `description`, `breadcrumbs`, `toolbar`) plus the list-page `rows` data and `hrApiOptions` for the API environment. Use it to show upcoming holidays, events, and category-tagged calendar entries.

## Basic Usage

Loads calendar events from the sandbox HR API via `listCalendarEvents()` and renders them in the Date / Event / Category table.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Constructs XWUIHrEmployeeCalendarPage against createHrApi({ env: 'sandbox' }) and renders the listCalendarEvents() rows in the Date/Event/Category columns.
```

## Arabic locale (RTL)

Passes `{ locale: 'ar' }` with a `titleAr` so the page resolves the Arabic title (`التقويم`) and renders right-to-left.

```example
file: examples/ArabicLocale.ts
html: examples/ArabicLocale.html
title: Arabic locale (RTL)
description: Arabic title via titleAr plus locale 'ar' for a right-to-left page.
```

## Constrained, centered layout

Caps the content column at 1200px, centers it, and adds roomier padding via the shell-page config.

```example
file: examples/ConstrainedLayout.ts
html: examples/ConstrainedLayout.html
title: Constrained, centered layout
description: `{ maxWidth: '1200px', centered: true, padding: '2rem' }` constrains and centers the page column.
```

```api
```