The Events components show upcoming meetings, appointments, releases, and reminders in a grouped list. Use ngs-events-list for the full schedule, ngs-events-section for day or week groups, and ngs-event for each dated row.
Use it for:
Schedule lists: Show events by Tomorrow, This week, Next week, or any app-defined period.
Calendar-adjacent cards: Pair a compact date tile with title, time, attendees, and actions.
Status hints: Use the status tone to show active, tentative, blocked, or neutral events.
Inline status: Place an event status directly before the time when the schedule line needs confirmation state.
ngs-events-list
Prop
Type
Default
groupBy
Semantic grouping mode for the list.
'none' | 'day' | 'week'
'day'
ngs-events-section
Prop
Type
Default
label
Visible section heading, such as Tomorrow, This week, or Next week.
string
''
ngs-event-date
Prop
Type
Default
weekday
Short weekday label displayed in the date tile.
string
''
day
Day number displayed in the date tile.
string | number
''
ngs-event-status
Prop
Type
Default
tone
Status color intent displayed before the event time.
