@agala-labs/ui

Calendar

Displays events in month, week, day, or list views and supports time-slot selection.

Examples

Default

July 10, 2026

All day

9:00 AM

10:00 AM

11:00 AM

12:00 PM

1:00 PM

2:00 PM

3:00 PM

4:00 PM

5:00 PM

<AgalaCalendar v-model:view="view" v-model:current-date="date" :events="events" />

Import

import { AgalaCalendar } from '@agala-labs/ui'

API

Prop	Type	Default	Description
events	CalendarEvent[]	—	Event collection.
view	'month' | 'week' | 'day' | 'list'	—	Current view.
currentDate	string	—	ISO focus date.
availableViews	CalendarView[]	—	Enabled views.
dayStart / dayEnd	string	—	Visible HH:MM bounds.
snapMinutes	number	30	Slot selection interval.
hideHeader	boolean	false	Hides built-in controls.

Events

• update:view
• update:currentDate
• select(event)
• day-click(date)
• slot-select({ start, end })

Slots

• header
• event — receives { event, view, presentation, timeLabel, isCompact }
• empty-day

Accessibility

Grid selection supports keyboard navigation. Default timed event cards progressively show title, time, and subtitle as space allows while their accessible labels retain the complete event context.