Mini Calendar
Compact month calendar generated with vanilla JS and styled with pure CSS: selectable days, today marker, month navigation and full arrow-key support.
Calendars
Month, week and event calendars.
2 component(s)
Month Calendar with Events
Tailwind CSS month calendar with colored event pills, today highlight, prev/next navigation, keyboard support and a day agenda.
What is a calendar component?
A calendar component displays dates in a grid and lets users view or interact with events. Typical variants are month views, week views with time slots, agenda lists and compact mini calendars in sidebars. Calendars are used in booking systems, project tools, event sites, school portals and dashboards. They differ from date pickers: a date picker selects a value for a form, while a calendar shows schedules and events.
When to use a calendar
- To show events, appointments or deadlines over time.
- For booking and availability views where users compare days.
- As a dashboard widget showing today's schedule or upcoming events.
- When the relationship between dates (weekdays, weekends, ranges) helps users decide.
Best practices
- Use a semantic structure: a
<table>with weekday headers, or a grid withrole="grid"and proper row and cell roles if it is interactive. - Make the current day obvious with more than colour, for example a border or bold text plus
aria-current="date". - Support keyboard navigation for interactive calendars: arrow keys between days, Page Up and Page Down for months.
- Label previous and next buttons ("Previous month", "Next month") and announce the visible month.
- On small screens, switch from a full month grid to an agenda list so event titles stay readable.
- Truncate long event titles with an ellipsis and show the full text on focus or in a detail view.
- Respect the user's locale for the first day of the week and date formats when you add JavaScript.
Framework versions
The calendar examples on this page include month grids, week schedules, event lists and small sidebar calendars, each with a live preview. Bootstrap 6 versions use theme-* colour roles for event categories and today markers, and any JavaScript ships as plain ES modules. Bootstrap 5 versions rely on the grid, tables and utilities, Tailwind CSS versions use grid-cols-7 layouts, and pure CSS versions are lightweight and framework-free. Open the code tabs, copy the HTML, CSS and JS, and connect the markup to your own event data.