@bimetal/angular-components

@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/calendar-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/event-sourcing → @bimetal/calendar-data → @bimetal/calendar-rules → @bimetal/headless
@bimetal/core ───────────────────┘                                                  ↓
                                                                        @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.