React Calendar Component with Tailwind CSS & shadcn/ui
The ultimate full calendar alternative built with TypeScript, Tailwind CSS, and shadcn/ui. A lightweight (~52 KB gzipped), highly pluggable React calendar with drag-and-drop, resource scheduling, and opt-in plugins — and it ships no CSS, so your design system controls the look. Built for Next.js, Astro, and React.
Key Features
Everything you need to build beautiful and functional calendar experiences
Multiple Views
Day, week, month, and year views available out of the box to suit your application's needs.
Drag & Drop
Drag events between days, times and resources, and drag an edge to resize. Add the drag-to-create plugin to select a range and create events.
Recurring Events
Support for daily, weekly, monthly, and yearly recurring events with exceptions handling.
Event Duration
Handle multi-day events, all-day events, and precisely timed events with consistent styling.
Timezone Support
Set a timezone and the calendar renders and parses dates in that IANA zone.
Customizable Styling
No CSS shipped - you control the entire styling. Bring your own design system and customize every aspect to match your brand.
Pluggable Architecture
The core ships no plugins. Add capabilities through opt-in plugins like recurring events and agenda views, each imported from its own subpath.
Lightweight
A small ~52 KB gzipped core. Plugins are opt-in and tree-shakeable, so you only ship the features you actually use.
Built for Developers
Designed with developer experience in mind, making integration seamless and efficient
Our intuitive API makes integration a breeze:
<IlamyCalendar
events={myEvents}
firstDayOfWeek="monday"
renderEvent={customRenderer}
/>
Full TypeScript support with comprehensive typings:
interface CalendarEvent {
id: string | number;
title: string;
start: dayjs.Dayjs;
end: dayjs.Dayjs;
color?: string;
// ...other properties
}
Opt into capabilities — only ship what you use:
import { recurrencePlugin }
from '@ilamy/calendar/plugins/recurrence';
<IlamyCalendar
events={events}
plugins={[recurrencePlugin()]}
/>
Production Ready
Enterprise-grade features built for modern applications and teams
Dark Mode
Follows your design system's light and dark theme tokens; the library ships no CSS of its own.
Responsive Design
Works beautifully across devices from mobile to desktop.
Localization
Use any dayjs locale you import, and translate UI text with the translations or translator props.
Performance Optimized
In row-based grids such as month, events are filtered and laid out once per row and shared by its cells, not recomputed per cell.
Ready to enhance your application?
Get started with ilamy Calendar today and provide your users with a seamless scheduling experience.
Install Now