React Calendar Component with Tailwind CSS & shadcn/ui

The ultimate full calendar alternative built with TypeScript, Tailwind CSS, and shadcn/ui. A lightweight (~13 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.

Try Demo Documentation
Powerful Features

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

Intuitive drag and drop interface for creating, moving, and resizing events with ease.

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

Full timezone support for international applications and distributed teams.

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 ~13 KB gzipped core. Plugins are opt-in and tree-shakeable, so you only ship the features you actually use.

Developer Experience

Built for Developers

Designed with developer experience in mind, making integration seamless and efficient

1 Simple API

Our intuitive API makes integration a breeze: 

                
<IlamyCalendar
  events={myEvents}
  firstDayOfWeek="monday"
  renderEvent={customRenderer}
/>
2 TypeScript Support

Full TypeScript support with comprehensive typings: 

                
interface CalendarEvent {
  id: string;
  title: string;
  start: dayjs.Dayjs;
  end: dayjs.Dayjs;
  color?: string;
  // ...other properties
}
3 Plugin System

Opt into capabilities — only ship what you use: 

                
import { recurrencePlugin }
  from '@ilamy/calendar/plugins/recurrence';

<IlamyCalendar
  events={events}
  plugins={[recurrencePlugin()]}
/>
Built for real-world applications

Production Ready

Enterprise-grade features built for modern applications and teams

Dark Mode

Built-in light and dark mode support for better user experience.

Responsive Design

Works beautifully across devices from mobile to desktop.

Localization

Easy internationalization with built-in locale support.

Performance Optimized

Built for speed and efficiency, even with thousands of events.

Ready to enhance your application?

Get started with ilamy Calendar today and provide your users with a seamless scheduling experience.

Install Now