@weeehaoooz/talos-calendar

A high-performance, accessible, full-featured calendar and scheduling component library for Angular 20+.

Built natively with Angular signals, standalone components, native control flow, and WCAG AA accessibility standards.

Documentation & Live Demo: https://talos.weeehaoooz.dev

Features

• 📅 Multiple Views: Month, Week (hourly grid), Day (time-slots), and Agenda views.
• ⚡ Multi-Day Spanning Events: Intelligent collision-free track layout algorithm powered by CalendarSpanningService.
• 🗂 Integrated Sidebar: Mini date picker calendar, category filters with color dots, upcoming events list, and instant search.
• 📝 Appointment Dialogs & CRUD: Integrated preview, create, and edit dialog workflows via TalosDialogService.
• 🎨 Theming & Design Tokens: 11 color presets (blue, indigo, purple, emerald, amber, rose, etc.) and native Dark Mode support.
• 🤖 MCP Server Integration: Includes a dedicated Model Context Protocol server (talos-calendar-mcp) for AI-accelerated development.

Installation

npm install @weeehaoooz/talos-calendar @weeehaoooz/talos-ui @angular/cdk @lucide/angular date-fns rxjs

1. Global Styles

Import the calendar stylesheet in your src/styles.scss:

@use '@weeehaoooz/talos-calendar/styles/calendar.scss';

2. Basic Usage

import { Component, signal } from '@angular/core';
import {
  TalosCalendarComponent,
  CalendarEvent,
  CalendarViewMode
} from '@weeehaoooz/talos-calendar';

@Component({
  selector: 'app-calendar-view',
  imports: [TalosCalendarComponent],
  template: `
    <talos-calendar
      [(events)]="events"
      [(view)]="view"
      [(currentDate)]="currentDate"
      [showSidebar]="true"
      (eventAdd)="onEventAdd($event)"
      (eventUpdate)="onEventUpdate($event)"
      (eventDelete)="onEventDelete($event)"
    />
  `
})
export class CalendarViewComponent {
  readonly view = signal<CalendarViewMode>('month');
  readonly currentDate = signal<Date>(new Date());
  readonly events = signal<CalendarEvent[]>([
    {
      id: '1',
      title: 'Quarterly Review',
      start: new Date(new Date().setHours(10, 0, 0, 0)),
      end: new Date(new Date().setHours(11, 30, 0, 0)),
      color: 'blue',
      category: 'Work'
    }
  ]);

  onEventAdd(event: CalendarEvent): void {
    this.events.update((list) => [...list, event]);
  }

  onEventUpdate(event: CalendarEvent): void {
    this.events.update((list) =>
      list.map((e) => (e.id === event.id ? event : e))
    );
  }

  onEventDelete(id: string): void {
    this.events.update((list) => list.filter((e) => e.id !== id));
  }
}

MCP Server

To use the Talos Calendar MCP server with Antigravity or Claude Desktop, see mcp-calendar-server/README.md.

License

This project is licensed under the Business Source License 1.1 (BSL 1.1):

• Free Use: Free for non-commercial, educational, evaluation, development, and testing purposes, or for production use in organizations/projects with annual gross revenue under $50,000 USD.
• Commercial License: Required for commercial production use exceeding the revenue threshold. Contact [email protected] for licensing inquiries.
• Change Date: Automatically transitions to the MIT License on 2030-01-01.

See the full LICENSE for terms and conditions.