Calendar

Usage

Each event has a unique id, title and start, with optional end, allDay, tone and metadata. selectedDate controls the displayed period and selected day; accept selectedDateChange to move it. view supports month or week; the event Template also receives agenda as its rendering context. locale and labels control calendar text, not event translations. Calendar displays events; creating or editing them belongs to your application.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

<neu-calendar
  [events]="events()"
  [selectedDate]="selectedDate()"
  (selectedDateChange)="
    selectedDate.set($event); record('selectedDateChange', $event)
  "
  [locale]="locale()"
  [view]="'month'"
  [showHeader]="true"
  [firstDayOfWeek]="1"
  [maxVisibleEvents]="2"
  (eventClick)="record('eventClick', $event.id)"
></neu-calendar>

import { signal } from '@angular/core';

export const events = signal([
  {
    "id": "review",
    "title": "Design review",
    "start": "2026-10-15T10:00:00",
    "tone": "brand",
    "meta": "UX"
  },
  {
    "id": "release",
    "title": "Release",
    "start": "2026-10-16T12:00:00",
    "allDay": true,
    "tone": "success"
  }
]);

export const selectedDate = signal("2026-10-15T12:00:00");

export const locale = signal("en");

State and events

Each event has a unique id, title and start, with optional end, allDay, tone and metadata. selectedDate controls the displayed period and selected day; accept selectedDateChange to move it. view supports month or week; the event Template also receives agenda as its rendering context. locale and labels control calendar text, not event translations. Calendar displays events; creating or editing them belongs to your application.

Accessibility and keyboard

Use Tab to reach period controls, days and events. Enter or Space selects a day or activates an event. In compact month views, select a day to see its complete events in the agenda.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

import { NeuCalendarEventDirective } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export declare class NeuCalendarEventDirective {
}

import type { NeuCalendarEventContext } from '@neural-ui/core/calendar';

import { NeuCalendarEventDirective } from '@neural-ui/core/calendar';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuCalendarEventContext>;

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuCalendarEventTone } from '@neural-ui/core/calendar';

import type { NeuCalendarEvent } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export interface NeuCalendarEvent {
  allDay?: boolean;
  description?: string;
  end?: string | Date;
  id: string;
  meta?: string;
  start: string | Date;
  title: string;
  tone?: NeuCalendarEventTone;
}

import type { NeuCalendarEvent } from '@neural-ui/core/calendar';
import type { NeuCalendarEventView } from '@neural-ui/core/calendar';

import type { NeuCalendarEventContext } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export interface NeuCalendarEventContext {
  readonly $implicit: NeuCalendarEvent;
  readonly view: NeuCalendarEventView;
}

import type { NeuCalendarEventTone } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export type NeuCalendarEventTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuCalendarEventView } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export type NeuCalendarEventView = 'month' | 'week' | 'agenda';

import type { NeuCalendarLabels } from '@neural-ui/core/calendar';

import type { NeuCalendarLabelOverrides } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export type NeuCalendarLabelOverrides = Partial<NeuCalendarLabels>;

import type { NeuCalendarLabels } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export interface NeuCalendarLabels {
  allDay: string;
  eventCount: (count: number) => string;
  moreEvents: (count: number) => string;
  nextButtonAriaLabel: string;
  noEvents: string;
  previousButtonAriaLabel: string;
  todayButton: string;
}

import type { NeuCalendarView } from '@neural-ui/core/calendar';

// Public declaration (reference only)
export type NeuCalendarView = 'month' | 'week';

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Related components

Use related components when your task requires a different interaction or a composed control.

• FilterBar
• VirtualList
• Tree