Event Calendar

Scheduling calendar with month and week views that renders all-day and multi-day event chips colored by the chart palette.

Components

Event Calendar

data

interactive

beta

<arc-event-calendar>

Overview

EventCalendar displays a collection of event objects on a navigable month or week grid. Unlike Calendar (a date *picker* that manages a selected value), EventCalendar is a read-oriented scheduling surface: you pass an `events` array via JavaScript and listen for click events to open your own detail views. Each event has an ISO `date`, an optional `end` date for multi-day spans, a `label`, and a `color` index (1-6) that maps to the fixed `--chart-N` palette — the component never cycles colors automatically, so consumers assign meaning consistently. The month view renders a 6-week grid with up to three event chips per day; overflow collapses into a "+N more" button that fires `arc-date-click` so you can open a day detail panel. Multi-day events render a chip on every covered day, with the inner edges squared on continuation days so the span reads as continuous (the color dot appears only on the start day). The week view shows the same chips listed vertically per day with no overflow limit. Both views are all-day/multi-day only — there is no hour axis or time-of-day positioning; timed agendas are out of scope. Keyboard interaction uses a roving tabindex across day cells: arrows move by day and week, Home/End jump to the start and end of the week, and PageUp/PageDown move to the previous or next period (month in month view, week in week view), automatically navigating the visible period when focus crosses a boundary. Event chips are excluded from the tab order; pressing Enter on a focused day that has events moves focus to its first chip, ArrowUp/ArrowDown move between chips (and the "+N more" button), and Escape returns focus to the day cell. This keeps the calendar to a single tab stop regardless of event count.

Guidelines

When to use

Assign `events` as a JavaScript property — it is an array of objects, not an HTML attribute
Use `arc-period-change` to lazy-load events for the newly visible month or week
Handle `arc-date-click` to open your own day detail view — the "+N more" overflow button routes there too
Assign `color` indexes consistently by category (e.g. 1 = meetings, 2 = deadlines) so colors carry meaning
Give each event a stable `id` so your `arc-event-click` handler can look up the full record

When not to use

Do not use EventCalendar for date selection — use Calendar or DatePicker for picking a value
Do not expect hour-level scheduling — events are all-day/multi-day only; there is no time axis
Do not pass `color` values outside 1-6 — out-of-range values fall back to 1
Do not encode meaning through color alone — chip labels remain the primary identifier
Avoid rendering the month grid in very narrow containers — day cells need room for legible chips

Features

Month view: 6-week grid with weekday headers, today highlight, and muted adjacent-month days
Week view: 7 columns with all event chips listed vertically per day (all-day style, no hour axis)
Event chips tinted with `--chart-1` through `--chart-6` via the `color` index (defaults to 1, never auto-cycled)
Multi-day events span every covered day with squared inner edges on continuation days
Overflow handling in month view: max 3 chips per day, then a "+N more" button that fires `arc-date-click`
Header with previous/next period navigation, period title, Today button, and a month/week view toggle
Roving-tabindex keyboard navigation: arrows, Home/End, PageUp/PageDown with automatic period transitions
Single tab stop: chips are reached with Enter on a day cell and exited with Escape
Three events: `arc-event-click`, `arc-date-click`, and `arc-period-change`

Preview

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<arc-event-calendar id="cal"></arc-event-calendar>

<script>
  const cal = document.querySelector('#cal');
  cal.events = [
    { id: 1, date: '2026-07-13', label: 'Sprint planning', color: 1 },
    { id: 2, date: '2026-07-15', end: '2026-07-17', label: 'Offsite', color: 4 },
  ];
  cal.addEventListener('arc-event-click', (e) => openDetail(e.detail.event));
  cal.addEventListener('arc-date-click', (e) => openDay(e.detail.date));
</script>

import { EventCalendar } from '@arclux/arc-ui-react';

const events = [
  { id: 1, date: '2026-07-13', label: 'Sprint planning', color: 1 },
  { id: 2, date: '2026-07-15', end: '2026-07-17', label: 'Offsite', color: 4 },
];

<EventCalendar
  events={events}
  onArcEventClick={(e) => openDetail(e.detail.event)}
  onArcDateClick={(e) => openDay(e.detail.date)}
/>

<script setup>
import { EventCalendar } from '@arclux/arc-ui-vue';

const events = [
  { id: 1, date: '2026-07-13', label: 'Sprint planning', color: 1 },
];
</script>

<template>
  <EventCalendar :events="events" @arc-event-click="openDetail" />
</template>

<script>
  import { EventCalendar } from '@arclux/arc-ui-svelte';

  const events = [
    { id: 1, date: '2026-07-13', label: 'Sprint planning', color: 1 },
  ];
</script>

<EventCalendar {events} on:arc-event-click={openDetail} />

import { Component } from '@angular/core';
import { EventCalendar } from '@arclux/arc-ui-angular';

@Component({
  imports: [EventCalendar],
  template: `
    <arc-event-calendar
      [events]="events"
      (arcEventClick)="openDetail($event)"
    ></arc-event-calendar>
  `,
})
export class TeamCalendarComponent {
  events = [
    { id: 1, date: '2026-07-13', label: 'Sprint planning', color: 1 },
  ];

  openDetail(e: CustomEvent) {
    console.log(e.detail.event);
  }
}

API

locale string ='': BCP 47 tag used for month and weekday names. Defaults to the document's `lang`, then the browser's language.
first-day-of-week number =0: Which day the week starts on, 1 = Monday … 7 = Sunday. Defaults to the locale's own convention.
events Array<{date:string,end?:string,label:string,color?:number}> =[]: The event objects to display. `date` (and optional `end` for multi-day spans) are ISO strings (YYYY-MM-DD). `color` indexes the fixed `--chart-N` palette and defaults to 1. Set via JavaScript property, not an attribute.
view 'month' | 'week' ='month': Which period layout to render. Also switchable by the user via the header view toggle.
date string ='': ISO date string (YYYY-MM-DD) anchoring the visible period. Defaults to today when left empty.

Events

arc-period-change detail: { view: 'month' | 'week', date: string }: Fired when the visible period or view changes (navigation buttons, Today, view toggle, or keyboard). `event.detail` contains `{ view, date }`.
arc-date-click: Fired when a day cell or a "+N more" overflow button is activated. `event.detail.date` contains the ISO date string.
arc-event-click: Fired when an event chip is clicked or activated. `event.detail.event` contains the original event object.

Event Calendar

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight