Calendar

Uso

Cada evento tiene id único, title y start, con end, allDay, tone y metadatos opcionales. selectedDate controla el periodo y día seleccionado; acepta selectedDateChange para moverlo. view admite month o week; el Template también recibe agenda como contexto de renderizado. locale y labels controlan los textos del calendario, no traducen eventos. Calendar muestra eventos; crearlos o editarlos corresponde a tu aplicación.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

<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": "Revisión de diseño",
    "start": "2026-10-15T10:00:00",
    "tone": "brand",
    "meta": "UX"
  },
  {
    "id": "release",
    "title": "Publicación",
    "start": "2026-10-16T12:00:00",
    "allDay": true,
    "tone": "success"
  }
]);

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

export const locale = signal("es");

Estado y eventos

Cada evento tiene id único, title y start, con end, allDay, tone y metadatos opcionales. selectedDate controla el periodo y día seleccionado; acepta selectedDateChange para moverlo. view admite month o week; el Template también recibe agenda como contexto de renderizado. locale y labels controlan los textos del calendario, no traducen eventos. Calendar muestra eventos; crearlos o editarlos corresponde a tu aplicación.

Accesibilidad y teclado

Tab alcanza controles de periodo, días y eventos. Intro o Espacio selecciona un día o activa un evento. En la vista mensual compacta, selecciona un día para consultar sus eventos completos en la agenda.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

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

// Declaración pública (solo referencia)
export declare class NeuCalendarEventDirective {
}

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

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

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuCalendarEventContext>;

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

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

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

// Declaración pública (solo referencia)
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';

// Declaración pública (solo referencia)
export interface NeuCalendarEventContext {
  readonly $implicit: NeuCalendarEvent;
  readonly view: NeuCalendarEventView;
}

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

// Declaración pública (solo referencia)
export type NeuCalendarEventTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

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

// Declaración pública (solo referencia)
export type NeuCalendarEventView = 'month' | 'week' | 'agenda';

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

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

// Declaración pública (solo referencia)
export type NeuCalendarLabelOverrides = Partial<NeuCalendarLabels>;

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

// Declaración pública (solo referencia)
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';

// Declaración pública (solo referencia)
export type NeuCalendarView = 'month' | 'week';

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.

• FilterBar
• VirtualList
• Tree