DataLiquid Glass
Event Calendar
Month event grid with color chips, agenda sidebar, and day selection. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add event-calendarMonth + agenda
Full event calendar with color chips, day selection, and agenda sidebar.
Compact grid
Small elevated month grid without agenda — Monday week start.
Outline product calendar
Outline surface with a custom header title and agenda.
About this component
Event Calendar is part of Data. Month event grid with color chips, agenda sidebar, and day selection.
Install with npx @intellihelper/cli@latest add event-calendar. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Event Calendar
Use when
- Use Event Calendar when month event grid with color chips, agenda sidebar, and day selection.
- Tabular data, empty states, skeletons, and loading placeholders.
- Dense operational UIs where scanability matters.
Avoid when
- Narrative content better as cards or markdown.
- Tiny datasets that fit a simple list without table semantics.
Accessibility notes
- Tables need proper headers; empty states should explain next actions.
- Skeletons should be supplemented with aria-busy on the live region.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Show empty states with a clear primary action (e.g. add first item).
- Prefer progressive loading over layout shifts (reserve row height).