Styling

Customize styles using Tailwind CSS v4’s theming system. ilamy Calendar ships no CSS - it relies entirely on your Tailwind configuration and the @source directive.

How ilamy Calendar Uses Colors

ilamy Calendar is built with Tailwind CSS v4 and ships zero CSS. Instead, it uses Tailwind utility classes and CSS custom properties exclusively. This means you have complete control over the visual appearance using your Tailwind configuration.

Caution

You must register ilamy Calendar as a source using Tailwind’s @source directive so Tailwind can scan the library for utility classes.

Required: Register ilamy Calendar with Tailwind

/* In your main CSS file (e.g., globals.css) */
@source "../node_modules/@ilamy/calendar/dist";

Scrollbar Layout Shift (Optional)

ilamy Calendar uses Radix UI primitives (Select, Dialog, Popover) for its dropdowns and dialogs. When one opens, Radix locks body scroll via react-remove-scroll, which hides the page scrollbar and can shift your layout sideways by the scrollbar’s width.

Tip

This is completely optional. Add it only if the layout shift bothers you - the calendar works fine without it.

To keep the scrollbar visible and avoid the shift, add this rule to your global CSS:

Optional: keep the scrollbar on dropdown/dialog open

[data-scroll-locked][data-scroll-locked] {
  overflow-y: scroll !important;
  margin-right: 0 !important;
}

The doubled [data-scroll-locked] selector raises specificity above Radix’s own scroll-lock rule so the scrollbar stays and the compensation margin is dropped. See the upstream discussion for context: shadcn-ui/ui#4227.

Learn More

For comprehensive color customization options, theming strategies, and advanced techniques, refer to the official Tailwind CSS documentation:

Color Customization

Learn about color palettes, custom colors, and opacity modifiers. View Color Documentation

@source Directive

Learn how to use the @source directive to scan npm packages for classes. View @source Documentation

v4 Upgrade Guide

Migrating from v3? Learn about CSS-based configuration and removed features. View Upgrade Guide

Event Colors

Individual events can have custom colors by setting the color property:

Custom Event Colors

const events = [
  {
    id: '1',
    title: 'Team Meeting',
    start: new Date(),
    end: new Date(),
    backgroundColor: '#3b82f6', // Custom blue color
    color: 'black'
  },
  {
    id: '2',
    title: 'Personal Task',
    start: new Date(),
    end: new Date(),
    backgroundColor: '#ef4444', // Custom red color
    color: 'black'
  },
];

<IlamyCalendar events={events} />