Nexus – Elemento: Calendar

¿Qué es?

Calendar es un componente de tipo Data. Muestra un calendario interactivo con distintas vistas (Mes, Semana, Día) donde se pueden visualizar eventos con título, rango de fecha/hora y color propio. Al arrastrarlo al lienzo viene con un ejemplo precargado (mes de septiembre de 2026, con 3 eventos: “Sprint planning”, “Design review” y “Demo day”).

Propiedades

Al seleccionar Calendar en el lienzo, el panel derecho muestra “Properties of Calendar”, organizado en tres pestañas: Content, Style y Behavior.

  • Component ID: identificador único del componente, autogenerado (ej. cal_732f41bc).
  • Visibility → Hidden on load: casilla para que el componente esté oculto al cargar la pantalla. Puede mostrarse luego mediante una acción de tipo Show.
  • Selector S / M / L: ajusta el tamaño de visualización del panel de propiedades.

Pestaña Content:

  • Data (array with start/end/title): campo de código donde se definen los eventos en formato JSON. Cada evento se compone de:
    • title: título del evento (ej. “Sprint planning”).start: fecha y hora de inicio, en formato AAAA-MM-DDTHH:mm:ss (ej. “2026-03-25T10:00:00”). También admite solo fecha sin hora (ej. “2026-03-28”) para eventos de todo el día.end: fecha y hora de fin, mismo formato que start.color: color del evento en el calendario, en formato hexadecimal (ej. “#2563eb“).

    Ejemplo de estructura:

  [
    {
      "title": "Sprint planning",
      "start": "2026-03-25T10:00:00",
      "end": "2026-03-25T11:00:00",
      "color": "#2563eb"
    },
    {
      "title": "Design review",
      "start": "2026-03-26T15:00:00",
      "end": "2026-03-26T16:30:00",
      "color": "#9333ea"
    },
    {
      "title": "Demo day",
      "start": "2026-03-28",
      "end": "2026-03-29",
      "color": "#059669"
    }
  ]

Cuenta con el editor de código expandido para más comodidad, con pestañas HTML/CSS/JS/JSON y botones Format y Copy. El editor valida el JSON en tiempo real (marca “✓ valid”).

  • Event Start Field: nombre de la propiedad del JSON que se usa como fecha/hora de inicio (por defecto start). Permite adaptar el componente a datos con otro nombre de campo.
  • Event End Field: nombre de la propiedad del JSON que se usa como fecha/hora de fin (por defecto end).
  • Title Field: nombre de la propiedad del JSON que se usa como título del evento (por defecto title).
  • Color Field (optional): nombre de la propiedad del JSON que se usa como color del evento (por defecto color). Es opcional; si no se define, el componente asigna un color por defecto a los eventos.

Pestaña Style:

  • Custom Class: clase CSS personalizada.
  • Custom Style: CSS personalizado aplicado directamente a este componente.

Pestaña Behavior:

  • Default View: menú desplegable con la vista inicial del calendario al cargar. Opciones disponibles:

    • Month
    • (a confirmar el resto de opciones — ver duda abajo)

  • Initial Date (YYYY-MM-DD): fecha con la que se abre el calendario por defecto. Si se deja vacío, se abre en la fecha actual.
  • Locale: menú desplegable con el idioma/localización del calendario (formato de nombres de mes, días de la semana, etc.). Valor por defecto visto: “Español”.
  • Events & Actions: sistema para definir comportamientos interactivos. Ver documentación aparte: Nexus – Events & Actions .
  • Delete Component (ícono de papelera, arriba): elimina el componente del lienzo.

Ejemplo de uso

Para agregar un nuevo evento al calendario, se suma un nuevo objeto dentro del array, separado del anterior por una coma. El array completo, con sus corchetes de apertura y cierre, quedaría así:

[
  {
    "title": "Sprint planning",
    "start": "2026-03-25T10:00:00",
    "end": "2026-03-25T11:00:00",
    "color": "#2563eb"
  },
  {
    "title": "Team lunch",
    "start": "2026-03-27T13:00:00",
    "end": "2026-03-27T14:00:00",
    "color": "#f59e0b"
  }
]

Con Event Start Field, Event End Field, Title Field y Color Field se puede conectar el calendario a datos que ya vienen de otra fuente (por ejemplo una API) sin necesidad de renombrar sus propiedades. Con Default View e Initial Date se puede definir cómo se ve el calendario apenas carga la pantalla, por ejemplo abriéndolo directamente en la vista semanal de una fecha puntual.