@bimetal/angular-components

Angular calendar UI components — month, week, day, and agenda views with drag & drop, event dialog, undo, and category filtering.

Built on the same headless architecture as @bimetal/react-components, @bimetal/vue-components, and @bimetal/svelte-components.

Installation

npm install @bimetal/angular-components

Quick Start

import { Component } from '@angular/core';
import { CalendarComponent } from '@bimetal/angular-components';
import { createCalendarStore } from '@bimetal/data';
import '@bimetal/angular-components/styles';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CalendarComponent],
  template: `<cal-calendar [store]="store"></cal-calendar>`,
})
export class AppComponent {
  store = createCalendarStore();
}

Inputs

| Input | Type | Description | |-------|------|-------------| | store | CalendarStore | Required. The event store. | | rules | CalendarRule[] | Optional. Rules evaluated before dispatch. | | configInput | CalendarConfigInput | Optional. Locale, timezone, categories, granularity. | | darkMode | boolean | Optional. Dark theme. | | showCategoryFilter | boolean | Optional. Show/hide category filter. Default: true. |

Architecture

All business logic is delegated to @bimetal/headless:

@bimetal/core → @bimetal/data → @bimetal/rules → @bimetal/headless
                                                        ↓
                                              @bimetal/angular (services)
                                                        ↓
                                         @bimetal/angular-components (UI)

Components are standalone (no NgModules), use Angular template syntax, and share CSS class names with React/Vue/Svelte for theme compatibility via @bimetal/themes.